画像スライダーのAjaxフォーム

Question

私はこの質問に対するsuperluminaryの答えjQuery AJAX submit formの下のコードを使用して、私のサイトのすべてのフォームを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(); 
}); 

は、その後、私は私のformタグにdata-autosubmitを追加すると、フォームは、Ajaxを使用して提出します。

など。 <form action="like/post" method="post" data-autosubmit>

---

PROBLEM this image sliderに基づいて私の画像スライダーにおいて
、Iのようなボタンとして作用する形状を有します。

フォームは正常に動作しますが、ページがリロードされ、フォームの送信時にモーダルウィンドウが閉じます。私はdata-autosubmitをformタグに入れていますが、ajaxは使用しません。

私のプロジェクトの他の場所でも、全く同じフォームが（ajaxを使って）うまく動作します。

---

THE SLIDER（関連部分）

/* 
* 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' }); } 
     }); 

---

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

---

あなたが任意の詳細を参照する必要がある場合は私に知らせてくださいコード。

私はどんな助けでも非常に感謝しています！

Answer 1

私はあなたのコードを理解したので、ajaxForm initを追加する必要があります。

変更この行：

// 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(); 

---

いくつかの説明：これに

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

あなたはこのコード

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

セレクタを呼び出し'form[data-autosubmit]'フォームに書かれていないのでフォームを解決できません（変数に格納されているフォーム）。 htmlコンテンツを.like-image要素に設定してフォームに文書を添付するときは、autosubmitを呼び出して新しく作成したフォームのjQueryプラグインを初期化する必要があります。

Answer 2

あなたが聞いたことをやっていない理由は、あなたが話したことがないからです。あなたのjavascriptは、プラグインのような関数をスローする自己呼び出し関数です。フォームを送信するようにその関数を使用する必要があります。

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