ajax – devfrontend.info

Source: Form Submission without page refresh

$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#form_output").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

$(document).ready(function () {

$('#myform').on('submit', function(e) {

e.preventDefault();

$.ajax({

url : $(this).attr('action') || window.location.pathname,

type: "GET",

data: $(this).serialize(),

success: function (data) {

$("#form_output").html(data);

error: function (jXHR, textStatus, errorThrown) {

alert(errorThrown);

}

});

Sources : Click doesn’t work after AJAX load – jQuery, Jquery not working after ajax refresh page.

Si vous utilisez AJAX sur votre site, il est possible que des événements comme click, submit ou hover ne fonctionnent plus après rafraîchissement si vous ne les attachez pas proprement.
Je vais utiliser l’événement click pour décrire le problème, mais ce dernier s’applique à l’ensemble des événements jQuery.

Structure HTML :

<form id="#onestepcheckout-form">
  <div class="payment-methods">
    <input type="radio" ... />
  </div>
</form>

</div>

</form>

Code jQuery qui fonctionnera uniquement avant rafraîchissement AJAX :

jQuery('.payment-methods input[type="radio"]').on('click', function(){
    var y = jQuery(window).scrollTop();  //your current y position on the page
    jQuery(window).scrollTop(y+1);
});

jQuery('.payment-methods input[type="radio"]').on('click', function(){

var y = jQuery(window).scrollTop(); //your current y position on the page

jQuery(window).scrollTop(y+1);

});

Code jQuery qui fonctionnera avant et après rafraîchissement AJAX :

jQuery('#onestepcheckout-form').on('click', '.payment-methods input[type="radio"]', function(){
    var y = jQuery(window).scrollTop();  //your current y position on the page
    jQuery(window).scrollTop(y+1);
});

jQuery('#onestepcheckout-form').on('click', '.payment-methods input[type="radio"]', function(){

var y = jQuery(window).scrollTop(); //your current y position on the page

jQuery(window).scrollTop(y+1);

});

Articles récents

Catégories

Archives

Méta

Étiquette : ajax

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

[jQuery] jQuery ne fonctionne plus après rafraîchissement AJAX d’un élément dans la page

Structure HTML :

Code jQuery qui fonctionnera uniquement avant rafraîchissement AJAX :

Code jQuery qui fonctionnera avant et après rafraîchissement AJAX :