jquery redirect on button click

Question

I'm trying to redirect on button click based on visitor location and I have modal with two windows. As well as using freegeoip.net: I'm using this with Wordpress: script correctly hooked to wordpress and running but redirect doesnt work.

I'd equally want this modal to appear only once per visit and across all navigations through the site not upon every page reload. Thanks in advance.

Below is the jQuery:

jQuery(document).ready(function(){
  jQuery("#myModal").modal('show');
  jQuery.ajax({
    url: 'https://freegeoip.net/json/',
    type: 'POST',
    dataType: 'jsonp',
    success: function(location) {
      // If the visitor is browsing from Canada.
      if (location.country_code === 'CA') {
        jQuery('#subscriber-ca').on('click', function(){
          window.location.replace('http://www.google.com');
        });
        jQuery('#subscriber-us').on('click', function(){

          // Redirect visitor to the USA.
          window.location.replace('http://www.facebook.com');
        });
      } else if(location.country_code === 'US') {
        jQuery('#subscriber-ca').on('click', function(){
          window.location.replace('http://www.google.com');
        });
        jQuery('#subscriber-us').on('click', function(){  
          // Redirect visitor to the USA.
          window.location.replace('http://www.facebook.com');
        });
      }
    }
  });
});

this is the modal:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
                <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                    </div>
                                        <button id="subscribe-us" type="submit" class="btn btn-primary pull-left">US Subscriber</button>
                                        <button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
                </form>
            </div>
        </div>
    </div>
</div>

What's in the console when you try to click the redirect and it fails? — HB-, Dec 11 '17 at 04:47
i tried to console.log the click events but no feedback: this is all i could find on console, JQMIGRATE: Migrate is installed, version 1.4.1 — Ndong Akwo, Dec 11 '17 at 04:49
@vel yes I would like a click event when visitor clicks button he/she should be redirected based on his/her location and button clicked because the modal has two buttons. I'm not sure what am missing here.because nothing is printed on console even with console.log :( — Ndong Akwo, Dec 11 '17 at 05:09

score 3 · Answer 1 · answered Dec 11 '17 at 05:40

Try this code

        <!doctype html>
        <html lang="en">
         <head>
          <meta charset="UTF-8">
          <meta name="Generator" content="EditPlus®">
          <meta name="Author" content="">
          <meta name="Keywords" content="">
          <meta name="Description" content="">
          <title>Document</title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         </head>
         <body>

        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Subscribe our Newsletter</h4>
                    </div>
                    <div class="modal-body">
                        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email Address">
                            </div>
                                <button id="ussubscribe" type="button" class="btn btn-primary pull-left">US Subscriber</button>
                                <button id="casubscribe" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var locationstatus = false;
            var userlocation = '';

            jQuery(document).ready(function(){
              jQuery.ajax({
                url: 'https://freegeoip.net/json/',
                type: 'POST',
                dataType: 'jsonp',
                success: function(locationresponse) {
                  userlocation = locationresponse.country_code;
                    locationstatus = true;
                    console.log(userlocation);
                }
              });
            });

            $('#ussubscribe').on('click', function(){
                alert();
                console.log(userlocation);

                if (locationstatus) {     
                    if(locationstatus=='CA'){
                      window.location.replace('http://www.google.com');
                    }
                }

             });

            $('#casubscribe').on('click', function(){
                 console.log(userlocation);

                 if (locationstatus) {      
                     if(locationstatus=='US'){
                        window.location.replace('http://www.facebook.com');
                     }
                 }
            });

        </script>
        </body>
        </html>

awesome! that worked, any suggestions how i could have this pop up just once? and not across all navigation on page? — Ndong Akwo, Dec 11 '17 at 05:56

score 3 · Answer 2 · answered Dec 11 '17 at 05:43

3

US Subscriber

change type="submit" to type="button" //also make sure

jQuery('#subscriber-us').on('click', function(){ //check the spelling which is subscribe-us

and add onclick events outside the ajax call inside if else clause only hide/show modal and buttons

answered Dec 11 '17 at 05:43

Siddhesh Nayak

185
3
15

awesome! that worked, any suggestions how i could have this pop up just once? and not across all navigation on page? – Ndong Akwo Dec 11 '17 at 05:56

score 2 · Answer 3 · answered Dec 11 '17 at 05:44

Replace your code:

<button id="subscribe-us" type="submit" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>

With:

<button id="subscriber-us" type="button" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscriber-ca" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>

And Bind click events outside the ajax if buttons are not dynamically created upon ajax request.

awesome! that worked, any suggestions how i could have this pop up just once? and not across all navigation on page? thanks! — Ndong Akwo, Dec 11 '17 at 05:55

score 1 · Answer 4 · edited Dec 11 '17 at 06:31

1

To check whether this is the first visit by the user, you can store value in session storage:

window.sessionStorage.setItem("first_visit", "Y");

While loading check for the session storage. If it is not present then open modal dialog.

Hope it helps.

edited Dec 11 '17 at 06:31

Jobin

5,610
5
38
53

answered Dec 11 '17 at 05:08

Tanvi Surve

19
1

jquery redirect on button click

4 Answers4