Solved

Using Jquery display a popup after a form submit button

Posted on 2014-10-03
6
1,942 Views
Last Modified: 2014-10-05
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

<script type="text/javascript" src="js/jquery.bpopup.min.js"></script>
 <script>
<!--
    ;(function($) {
        $(function() {
            $('#ctgy-bask').submit(function() {
                $('#basket-popup').bPopup();
            });
        });
    })(jQuery);
-->
</script>

Open in new window

0
Comment
Question by:niceoneishere
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40360872
when your page reload, your javascript is restarted
use the following workaround instead :

            $('#ctgy-bask').submit(function(evt) {
                   evt.preventDefault();
                   $("a.carticon").load(location.pathname + " a.carticon span", function() { // load the page but refresh only the content of the cart (span)
                         $('#basket-popup').bPopup();
                   });
            });

Open in new window

0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40360911
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

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

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40361286
The following worked for me :
add to cart
<script type="text/javascript" src="js/jquery.bpopup.min.js"></script>
 <script>
<!--
        $(function() {
$(":submit[id=addtocart]").click(function(evt) {
                   evt.preventDefault();
                   var myForm = $(this).closest("form");
                   var myProductName = $(this).closest(".product-item").find(".product-name").text();
                   var myProductImg = $(this).closest(".product-item").find(".product-thumbnail img").attr("src");
                   $("a.carticon").load(myForm.attr("action") + " a.carticon span", myForm.serializeArray(), function() { // load the page but refresh only the content of the cart (span)
                         $("#basket-popup tr:eq(1) td:eq(1)").text(myProductName);
                         $("#basket-popup tr:eq(1) td:eq(0) img").attr("src", myProductImg);
                         $('#basket-popup').bPopup();
                   });
            });
    })(jQuery);
-->
</script>

Open in new window

0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 1

Author Comment

by:niceoneishere
ID: 40362174
Hi Leakim971

I have used the code you have posted here http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28531143.html#a40361286

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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40362290
3,4 seconds ? really?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 40362773
Wow sorry didn't mean to offend I was just mentioning what the customers were complaining. Anyway Thanks for your replay
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
asp web application 3 39
Adding a countdown to HTA 12 97
PHP Web Development 6 22
Exchange OWA website Redirection 7 42
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question