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