Ajax 图片滑块中的表单

Question

我正在使用 superluminary 对这个问题 jQuery AJAX submit form 的回答中的以下代码来 ajax 验证我网站上的所有表格。

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

然后我将 data-autosubmit 添加到我的表单标签中，表单使用 ajax 提交。

例如。 <form action="like/post" method="post" data-autosubmit>

问题
在我基于 this image slider 的图像滑块中，我有一个表单，它充当类似按钮。

表单工作正常，但页面重新加载并且模式 window 在表单提交时关闭。它不使用 ajax，尽管我将 data-autosubmit 放入表单标记中。

完全相同的形式在我项目的其他地方工作正常（使用 ajax）。

滑块（相关部分）

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

表格

<!-- 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
$('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html());

为此：

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

一些解释：当你调用这段代码时

$(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
}

Ajax 图片滑块中的表单

Ajax form in image slider

javascript

ajax

jquery

modal-dialog

form-submit