JQuery $ .post sur un événement soumettre aide

Question

Ce que je suis en train de faire est:

Lorsque vous cliquez sur un formulaire le bouton d'envoi, la page ne se recharge pas, à la place des données de formulaire est envoyé à une autre page pour le traitement et la sortie HTML de cette page remplacent le formulaire sur la page en cours. Plus précisément, j'essaie de faire fonctionner le formulaire d'ajout de commentaire sans avoir besoin de recharger la page (il y a une vidéo en streaming dans un lecteur flash sur cette page et si la page se rechargeait chaque fois que quelqu'un soumettait un commentaire argent et bande passante).

Voici le balisage de formulaire:

<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> 

Et voici le code javascript J'utilise:

$('#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; 
}); 

Ce qui se passe est que après avoir cliqué sur le bouton Soumettre exactement rien ne se passe. La page ne recharge pas mais le code sur la page où je soumets le formulaire n'est pas exécuté non plus.

Answer 1

Essayez de faire html disponible dans le rappel à $.post, aussi il n'y a pas besoin de donner le second paramètre à afficher (« html ») si les données de rendement attendu est 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); 
}); 

Answer 2

Avez-vous essayé d'utiliser quelque chose comme le plugin Firebug pour Firefox? Il vous permet d'effectuer le débogage ainsi qu'une console qui suit l'activité d'envoi/de réponse ajax.

La signature de la documentation JQuery montre la signature du rappel de succès:

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

Dans ce cas, il est aussi une bonne idée d'utiliser un bloc try/Enfin, pour vous assurer que votre formulaire soumettre toujours renvoie 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; 
    } 
}); 

Answer 3

essayez-vous modifier formez comme ceci:

<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> 

puis soumettez votre formulaire en utilisant 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; 
} 

au lieu de JSON, vous pouvez utiliser un autre type de données à renvoyer depuis la fonction côté serveur.