Ajax Formular in Bild Slider

Question

Ich benutze den Code unten aus Superluminary's Antwort auf diese Frage jQuery AJAX submit form, um alle Formulare auf meiner Website zu ajaxify.

(function($) { 
    $.fn.autosubmit = function() { 
     this.submit(function(event) { 
      event.preventDefault(); 
      var form = $(this); 
      $.ajax({ 
       type: form.attr('method'), 
       url: form.attr('action'), 
       data: form.serialize() 
       }).done(function(response) { 
        $(form).parent('.like-this').html("works"); 
        $(form).parent('.dislike-this').html("works"); 
       }).fail(function(response) { 
        console.log('Ajax form submit does not work!'); 
       }); 
      }); 
      return this; 
     } 
    })(jQuery) 

$(function() { 
    $('form[data-autosubmit]').autosubmit(); 
}); 

Dann füge ich data-autosubmit meinen Form-Tag und das Formular abschickt Ajax.

z. <form action="like/post" method="post" data-autosubmit>

---

DAS PROBLEM
In meinem Bild Schieber, der auf this image slider basiert, habe ich eine Form, die als wie Taste fungiert.

Das Formular funktioniert gut, aber die Seite wird neu geladen und das modale Fenster wird beim Senden des Formulars geschlossen. Es verwendet keinen AJAX, obwohl ich data-autosubmit in das Formular-Tag einfüge.

Die exakt gleiche Form funktioniert gut (mit Ajax) an anderen Stellen in meinem Projekt.

---

THE SLIDER (der relevante Teil)

/* 
* jQuery Slider Plugin 
* Version : Am2_SimpleSlider.js 
* author :amit & amar 
*/ 

(function ($) { 

    jQuery.fn.Am2_SimpleSlider = function() { 
     //popup div 
     $div = $('<div class="product-gallery-popup"><div class="popup-overlay"></div><div class="product-popup-content"><div class="product-image"><img id="gallery-img" src="" alt="" /><div class="gallery-nav-btns"><a id="nav-btn-next" class="nav-btn next"></a><a id="nav-btn-prev" class="nav-btn prev"></a></div></div><div class="product-information"><p class="product-desc"></p><div class="clear"></div><hr><br><br><div class="like-image"><form action="" method="post" class="like-form" data-autosubmit></form><div class="liked"></div></div><a href="" class="cross">X</a></div></div>').appendTo("body"); 

     //on image click 
     $(this).click(function() { 
      $('.product-gallery-popup').fadeIn(500); 
      $('body').css({ 'overflow': 'hidden' }); 
      $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src')); 
      $('.product-popup-content .product-information p').html($(this).find('.image-description').html()); 

      // In the like-image div is the form 
      $('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html()); 

      $Current = $(this); 
      $PreviousElm = $(this).prev(); 
      $nextElm = $(this).next(); 
      if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); } 
      else { $('.nav-btn.prev').css({ 'display': 'block' }); } 
      if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); } 
      else { $('.nav-btn.next').css({ 'display': 'block' }); } 
     }); 

---

DIE FORM

<!-- the image like button --> 
<div class="like-image"> 
    <?php if ($this->likedImages[$postImage->image_id]) { ?> 

     <!-- like the image --> 
     <div class="like-this"> 
      <form action="<?= Config::get('URL');?>like/like_image" method="post" class="like-form" data-autosubmit> 
       <input type="hidden" name="image_id" value="<?= $postImage->image_id; ?>" /> 
       <button type="submit" class="button like-button">Like</button> 
      </form> 
     </div><!-- /.like-this --> 

    <?php } else { ?> 

     <!-- dislike the image --> 
     <div class="dislike-this"> 
      <form action="<?= Config::get('URL');?>like/unlike_image" method="post" class="like-form" data-autosubmit> 
        <input type="hidden" name="image_id" value="<?= $postImage->image_id; ?>" /> 
        <button type="submit" class="button like-button">Dislike</button> 
      </form> 
     </div><!-- /.dislike-this-post --> 
    <?php } ?> 

    <div class="liked"></div> 
</div><!-- /.like-image --> 

---

Bitte lassen Sie mich wissen, wenn Sie nicht mehr sehen müssen Code.

Ich wäre sehr dankbar für jede Art von Hilfe !!

Answer 1

Wie ich Ihren Code verstanden habe, müssen Sie ajaxForm init hinzufügen.

Ändern Sie diese Zeilen:

// In the like-image div is the form 
$('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html()); 

Um dies:

// In the like-image div is the form 
var contentContainer = $('.product-popup-content .product-information .like-image'); 
contentContainer.html($(this).find('.like-image').html()); 
contentContainer.find('form').autosubmit(); 

---

Einige Erklärung: wenn Sie diesen Code aufrufen

$(function() { 
    $('form[data-autosubmit]').autosubmit(); 
}); 

Selektor 'form[data-autosubmit]' kann Ihr Formular nicht auflösen, da es nicht im Dokument dargestellt wurde (Formular in Variable gespeichert). Wenn Sie ein Formular an ein Dokument anhängen, indem Sie den HTML-Inhalt auf setzen, müssen Sie autosubmit aufrufen, um das jQuery-Plugin auf dem neu erstellten Formular zu initialisieren.

Answer 2

Der Grund, warum es nicht tut, was Sie fragen, ist, weil Sie es nicht gesagt haben. Ihr Javascript ist eine selbstaufrufende Funktion, die eine Funktion wie ein Plugin ausgibt. Sie müssten dann diese Funktion verwenden, um das Formular zu senden.

$('form[data-autosubmit]').submit(e) { 
    $(this).autosubmit(); 
    e.preventDefault(); //prevent actual form submission 
}