How to execute jquery function one after other

Question

In below, When i click on button call the jquery click event,It will first shows the alerts upto this it works properly, In this i have call two functions(i.e. reload() and popup()) when i click on button it gives alerts and after that it execute popup() function and reload() function at a time. My query is i want to execute first reload function(it reload only once) then execute popup function means when i click on button first reload the page only once and then show me my popup.

<script>
  $(document).ready(function()
              { 

                  $('.button').click(function()
                  {

                      var href = $(this).val();
                      alert(href);
                      $.session.set("linkurl",href);
                      alert($.session.get('linkurl'));
                      //window.location.reload();

                        function reload()
                        {
                            if(document.URL.indexOf("#")==-1)
                            {
                            // Set the URL to whatever it was plus "#".
                            url = document.URL+"#";
                            location = "#";

                            //Reload the page
                            location.reload(true);
                            return true;
                            }

                        }
                        function popup()
                        {
                            document.getElementById('light').style.display='block';
                            document.getElementById('fade').style.display='block';
                        }
                        $.when( reload() ).done(function() {
                            popup();
                        });

                  }); 
              });
</script>



<button  class="button"  value="<?php echo $value['3']; ?>" style="background-color:#ff8c21;">Buy Now</button>

See http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/30144363?s=1|0.1100#30144363 — guest271314, Dec 11 '15 at 05:46
`location.reload(true);` iirc reload is asnync, so the reload will be invoked after your function reload has finished. Also your entire document will be reloaded, so you JS will start from 0 again on the next run. — wotanii, Dec 11 '15 at 05:55

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

The simple answer - it will not work. You cannot reload a page and execute any JavaScript after it. After unloading a page, JavaScript will stop executing.

You need to pass any sort of flag to your target page in order to tell it to show a popup. You can use GET parameters, for example.

There is a good Stackoverflow article on this topic:
Global Variable usage on page reload

edited May 23 '17 at 12:30

Community

1
1

answered Dec 11 '15 at 05:55

Yeldar Kurmangaliyev

33,467
12
59
101

score 0 · Answer 2 · answered Dec 11 '15 at 05:57

 $(document).ready(function() {

  $('.button').click(function() {

    var href = $(this).val();
    alert(href);
    $.session.set("linkurl", href);
    alert($.session.get('linkurl'));
    //window.location.reload();

     reload(function () {
        popup();
    });

  });
});

 function reload(callback) {
      if (document.URL.indexOf("#") == -1) {
    // Set the URL to whatever it was plus "#".
    url = document.URL + "#";
    location = "#";

    //Reload the page
    location.reload(true);
    return true;
      }

    }


function popup() {
      document.getElementById('light').style.display = 'block';
      document.getElementById('fade').style.display = 'block';
    }

score 0 · Accepted Answer · answered Dec 11 '15 at 06:23

try something like this:

function reload() {
      if (document.URL.indexOf("#") == -1) {
        // Set the URL to whatever it was plus "#".
        url = document.URL + "#";
        location = "#";

        //Reload the page
        location.reload(true);
        return true;
      }
function popup() {
      document.getElementById('light').style.display = 'block';
      document.getElementById('fade').style.display = 'block';
    }
if($.session.set("reload") == true ) {
  popup();
  $.session.set("reload", false);
}
$('.button').click(function() {
   $.session.set("reload", true);
   reload();
});

How to execute jquery function one after other

3 Answers3