Ajax form in image slider

Question

I am using the code below from superluminary's answer to this question jQuery AJAX submit form to ajaxify all the forms on my site.

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

Then I add data-autosubmit to my form tag and the form submits using ajax.

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

THE PROBLEM
In my image slider, which is based on this image slider, I have a form, which acts as a like button.

The form works fine but the page reloads and the modal window closes on form submit. It does not use ajax, although I put data-autosubmit into the form tag.

The exact same form works fine (using ajax) at other places in my project.

THE SLIDER (the relevant part)

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

Please let me know if you need to see any more code.

I would be very thankful for any kind of help!!

Bob Sponge · Accepted Answer · 2016-03-23T12:14:28.847

As I understood your code you need to add ajaxForm init.

Change this lines:

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

To this:

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

Some explanation: when you calling this code

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

selector 'form[data-autosubmit]' cant resolve your form since it not presented in document (form stored in variable). When you attaching form to document by setting html content to .like-image element, you must call autosubmit to initialize jQuery plugin on newly created form.

Thank you so much for your answer! I get this error message: Uncaught TypeError: contentContainer.find(...).ajaxForm is not a function — Schwesi, Mar 23 '16 at 12:03

score 1 · Answer 2 · answered Mar 23 '16 at 12:02

1

The reason it's not doing what you ask is because you havent told it to. Your javascript is a self invoking function that throws out a function, like a plugin. you would then need to use that function to tell it to submit the form.

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

answered Mar 23 '16 at 12:02

Hazonko

1,025
1
15
30

Thank you for your answer! I do call that function in the footer of my page (I updated the question accordingly). Do you mean I should call it again in the image slider? – Schwesi Mar 23 '16 at 12:06
no, don't call it twice. perhaps adding in the 'e.preventDefault();' might solve it? as the page wont submit naturally, but the ajax should do it. – Hazonko Mar 23 '16 at 12:08
Thank you for your help and effort. Bob Sponge solved it! – Schwesi Mar 23 '16 at 12:10

Ajax form in image slider

2 Answers2