Simple Div update with jquery & ajax

Question

Hey guys i'm trying to update a div element when end user clicks the submit key.

So i have this code:

        <div class="duruGetPhone"> <input type="submit" name="upload" value="submit" class="something" />  </div>
        <script>
        $(document).ready(function() {
            $('input.something').click(function(e) {
                 e.preventDefault();
                $('div.duruGetPhone').load('loadImage.php', {param1: '<?php echo $Hood; ?>', param2: '<?php echo $Id; ?>'});
            });
        });
        </script>

This works fine if i use an 'a' tag or 'span' but doesn't work for an input. It actually updates the div just fine but doesn't carry out the submit. if i don't use "preventDefault" then nothing happens. can someone shed some light on this one?

what do you mean with carry out submit but updates the div? either the submit is blocked and only the update div will be performed or the update will be performed but you would not see it because the unblocked submit will refresh the page? — Luke
– Luke, Commented Feb 27, 2011 at 23:33
To both Luke & kim3er: the reason i want the submit button to get updated is because the user is submitting an image which takes quit a long time and i want the submit button to vanish while the image is loading — Tom
– Tom, Commented Feb 28, 2011 at 0:07

kim3er · Accepted Answer · 2011-02-27 23:41:08Z

1

Assuming your example is wrapped in a form tag I have a possible explanation.

Without preventDefault, the click event handler is fired but cut short by the form posting the to the server, so the load function never completes.

With preventDefault, the click event handler fires and reaches a successful conclusion. However, the default behavior (form submission) has been disabled.

Why are you wanting the form to post back to the server in addition to the click event? Have I misunderstood something?

If you're wanting the click event to fire as result of a successful form submission, I would investigate the use of the jQuery Form plugin http://jquery.malsup.com/form/ to control the postback asynchronously using ajaxSubmit or ajaxForm.

edited Feb 27, 2011 at 23:41

answered Feb 27, 2011 at 23:36

kim3er

6,5365 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim Biancolo · Accepted Answer · 2011-02-28 14:36:01Z

If I understand what you want correctly (to submit the form, put the response in the DIV, and disable the button while it's all happening) I would use the form plugin mentioned above:

http://jquery.malsup.com/form/

... and do something like this (untested, but should be in the ballpark):

<script>
$(document).ready(function() {
   $("#myform").ajaxForm({
      target: "div.duruGetPhone",
      beforeSubmit: function(responseText, statusText) {
         $("input.something").disable();
      }
   });
});
</script>

<form id="myform" method="post" action="loadImage.php">
   <input type="hidden" name="param1" value="<?php echo $Hood; ?>"/>
   <input type="hidden" name="param1" value="<?php echo $Id; ?>"/>
   <div class="duruGetPhone">
      <input type="submit" name="upload" value="submit" class="something" />
   </div>
</form>

Then loadImage.php just needs to return the IMG tag you want inserted into duruGetPhone.

Collectives™ on Stack Overflow

Simple Div update with jquery & ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related