Tammu
asked on
Using Jquery display a popup after a form submit button
I am trying to display a popup that says continue shopping or view cart in my site.
here is my test site url http://dev.ihobb.com/c/2X2_COIN_HOLDERS.html where I placed the popup code inside a div tag called basket-popup ( by default set to display:none) and using a popup jquery script
As you see when the Add to Basket submit Button is clicked I want the form to add that item to basket and after that display popup without reloading the page.
Whats happening when I hit the submit button the page just reloads and adds the items to the basket but does not show the popup.
What am I missing? any advice is appreciated
here my script markup I am using.
Thanks
here is my test site url http://dev.ihobb.com/c/2X2_COIN_HOLDERS.html where I placed the popup code inside a div tag called basket-popup ( by default set to display:none) and using a popup jquery script
As you see when the Add to Basket submit Button is clicked I want the form to add that item to basket and after that display popup without reloading the page.
Whats happening when I hit the submit button the page just reloads and adds the items to the basket but does not show the popup.
What am I missing? any advice is appreciated
here my script markup I am using.
Thanks
<script type="text/javascript" src="js/jquery.bpopup.min.js"></script>
<script>
<!--
;(function($) {
$(function() {
$('#ctgy-bask').submit(function() {
$('#basket-popup').bPopup();
});
});
})(jQuery);
-->
</script>
You want to submit the page and you don't want to submit the page.
Currently clicking add to basket does that but as a server side post-back. If you prevent that from happening you loose the add to basket function.
You will need to submit the add to basket action as an Ajax call. A normal submit as leakim says resets everything and the browser "forgets" that it was on the page so will start from the beginning and the call to the popup is lost.
By using AJAX you submit the data to the form without the reload.
NB Your forms all have the same ID ctgy-bask - this is a big no-no in html and will cause you many headaches. ID must be unique. What I would do is change the id's to class - or add a class to each form otherwise the code below (and that posted above) will not work.
Something like this
Currently clicking add to basket does that but as a server side post-back. If you prevent that from happening you loose the add to basket function.
You will need to submit the add to basket action as an Ajax call. A normal submit as leakim says resets everything and the browser "forgets" that it was on the page so will start from the beginning and the call to the popup is lost.
By using AJAX you submit the data to the form without the reload.
NB Your forms all have the same ID ctgy-bask - this is a big no-no in html and will cause you many headaches. ID must be unique. What I would do is change the id's to class - or add a class to each form otherwise the code below (and that posted above) will not work.
Something like this
// NB THE CHANGE TO A CLASS FROM AN ID
$('.ctgy-bask').submit(function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method'),
success: function(response) {
$('#basket-popup').bPopup();
}
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Leakim971
I have used the code you have posted here http://www.experts-exchang e.com/Prog ramming/La nguages/Sc ripting/Ja vaScript/J query/Q_28 531143.htm l#a4036128 6
It works and thanks but can the popup appear little faster the customers are calling saying that it takes almost to 3 to 4csecs for the popup to appear after hitting the add to cart button.
Thanks and appreciate it
I have used the code you have posted here http://www.experts-exchang
It works and thanks but can the popup appear little faster the customers are calling saying that it takes almost to 3 to 4csecs for the popup to appear after hitting the add to cart button.
Thanks and appreciate it
3,4 seconds ? really?
ASKER
Wow sorry didn't mean to offend I was just mentioning what the customers were complaining. Anyway Thanks for your replay
use the following workaround instead :
Open in new window