0

What I am trying to do is:

When you click on a form submit button, the page doesn't reload, instead data from form is send to another page for processing and HTML output of that page replaces the form on current page. More specifically, I am trying to get the add comment form working without a need to reload the page (there is a video streaming in a flash player on that page and if the page would reload each time someone submitted a comment it would waste tons of money and bandwidth).

Here is the form markup:

<div id="add-media-comment">
    <form enctype="application/x-www-form-urlencoded" method="post" action="/view/add-media-comment/id/12"><ol>
    <li><label for="body" class="required">Body</label>
    <div class="element">
    <textarea name="body" id="body" rows="10" cols="50"></textarea></div></li>
    <li><div class="button">
    <input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" /></div></li></ol></form>
</div>

And here is the javascript code I'm using:

$('#add-media-comment form').submit(function() {
    // this is taken from the same page
    // I have tested this with alert() and yes
    // it is returning correct values
    var id = $('#media-photo img').attr('id');
    var url = '/view/add-media-comment/id/' + id;

    // let's submit the form to another page
    $.post(url, $(this).serialize(), function() {
        // and replace the content of #add-media-comment
        // with the resulting HTML from the submission page
        $('#add-media-comment').html(data);
    }, 'html');

    return false;
});

What happens is that after clicking on the submit button exactly nothing happens. The page doesn't reload but the code on the page where I'm submitting the form doesn't get executed either.

3 Answers 3

1

Try making html available in the callback to $.post, also there's no need to give the second parameter to post ('html') if the expected return data is html:

$.post(url, $(this).serialize(), function(html) { //instead of function()
    alert(html);
    // and replace the content of #add-media-comment
    // with the resulting HTML from the submission page
    $('#add-media-comment').html(data);
});
5
  • Doesn't help, the page where I submit the form doesn't get executed. Sep 6, 2009 at 2:07
  • When I try alert(data) in the $.post callback, nothing happens. Sep 6, 2009 at 2:08
  • Instead of binding to the form submit event, bind that code to the button's click event.
    – karim79
    Sep 6, 2009 at 2:18
  • Ok that already worked on 50%. The #add-media-comment gets replaced with HTML from the page the problem is that the form has not been submitted to that page. This is sending the formd data as POST, right? Sep 6, 2009 at 2:28
  • @Richard Knop - yes, that does thend the form data as a POST request.
    – karim79
    Sep 6, 2009 at 9:30
1

Have you tried using something like the Firebug plugin for Firefox? It gives you step through debugging as well as a console that tracks the ajax send/response activity.

The signature on the JQuery documentation shows the signature of the success callback as:

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

In this case, it is also a good idea to use a Try/Finally block to ensure that your form submit always returns false.

$('#add-media-comment form').submit(function(event) {
   try {
      var id = $('#media-photo img').attr('id');
      var url = 'view/add-media-comment/id/' + id;

      // let's submit the form to another page
      $.post(url, $(this).serialize(), function(data, textStatus) {
       // and replace the content of #add-media-comment
       // with the resulting HTML from the submission page
       $('#add-media-comment').html(data);
      }, 'html');
   }
   finally {
      return false;
   }
});
1

try modify you form like this:

<div id="add-media-comment">
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return False;"><ol>
<li><label for="body" class="required">Body</label>
<div class="element">
<textarea name="body" id="body" rows="10" cols="50"></textarea></div></li>
<li><div class="button">
<input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" onclick="return Submit();"/></div></li></ol></form>

then submit your form using jquery ajax:

function Submit() {
    $.ajax({
        type: "POST",
        url: "/view/add-media-comment/id/" + $('#media-photo img').attr('id'),
        dataType: "json",
        data: $('#add-media-comment form').serialize(),
        error: function(){
            //do something
        },
        success: function(data){
            //do something
        }
    });
    return false;
}

instead of json,you can use other type of data to return from your server side function..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.