Javascript - How to get script to run with Ajax requested data

Question

In the image above, there is a page that has a battlefield with 20 users on it. I have written JavaScript to capture the data and store it in a MySQL db. The problem comes into the picture when I need to hit next to go to the next page and gather that data.

It fetches the next 20 users with an Ajax call. Obviously when this happens, the script can't log the new information because the page never loads on an Ajax call which means the script doesn't execute. Is there a way to force a page load when the Ajax link is clicked?

Here's the code:

grabData(); var nav = document.getElementsByClassName('nav')[0].getElementsByTagName('td')[2].getElementsByTagName('a')[0];

 nav.addEventListener("click", function(){
      grabData();
  });

  function grabData(){
      var rows = document.getElementsByClassName('table_lines battlefield')[0].rows;
      var sendData = '';

      for(i=1; i < rows.length -1 ; i++){
          var getSid = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].getElementsByTagName('a')[0].href; 
          var statsID = getSid.substr(getSid.indexOf("=") + 1); //Grabs ID out of stats link
          var name = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].textContent.replace(/\,/g,"");
          var tff = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[3].textContent.replace(/\,/g,"");
          var rank = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[6].textContent.replace(/\,/g,"");
          var alliance = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[1].textContent.trim();
          var gold = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[5].textContent.replace(/\,/g,"");

          if(alliance == ''){
              alliance = 'None';
          }

          if(gold == '??? Gold'){
              gold = 0;
          }else{
              gold = gold.replace(/[^\/\d]/g,'');
          }
          sendData += statsID + "=" + name + "=" + tff + "=" + rank + "=" + alliance + "=" + gold + "@";
      }
      $.ajax({
          // you can use post and get:
          type: "POST",
          // your url
          url: "url",
          // your arguments
          data: {sendData : sendData},
          // callback for a server message:
          success: function( msg ){
              //alert(msg);
          },
          // callback for a server error message or a ajax error
          error: function( msg )
          {
              alert( "Data was not saved: " + msg );
          }
      });
  }

So as stated, this grabs the info and sends to the php file on the backend. So when I hit next on the battlefield page, I need to be able to execute this script again.

UPDATE : Problem Solved. I was able to do this by drilling down in the DOM tree until I hit the "next" anchor tag. I simply added an event listener for whenever it was clicked and had it re execute the JavaScript.

So can you write code that watches the table and when th data cahnges run your script? — epascarello, May 16 '16 at 13:54
I like that approach. I will look into it. One thing I was thinking about....can I add an onclick to the "next" link and re-execute the code that way? — Zane, May 16 '16 at 14:04
Thanks @epascarello, I added an event listener not to the table itself, but to the anchor tag to catch the click and execute the script. Your suggestion led me in the right direction! — Zane, May 16 '16 at 16:02

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Yes, you can force a page load thus:

window.location.reload(true);

However, what the point of AJAX is to not reload the page, so often you must write javascript code that duplicates the server-side code that builds your page initially.

However, if the page-load-code-under-discussion runs in javascript on page load, then you can turn it into a function and re-call that function in the AJAX success function.

Reference:

How can I refresh a page with jQuery?

edited May 23 '17 at 11:52

Community

1
1

answered May 16 '16 at 14:32

cssyphus

37,875
18
96
111

I am not needing to reload the page. I want to force a page load when I click the Ajax link. – Zane May 16 '16 at 14:48
Do you mean, load a different page? Or re-run code on the current page (and, if so, PHP code or javascript code)? *Forcing a page load of the current page is the same as reloading the current page.* Please clarify what you want to happen. – cssyphus May 16 '16 at 14:52
When you click "next" it fetches new data with Ajax, however, I can manually right click and extract that url and also get to the page on a page load manually. I need to see if there is a way to click the link and instead of it fetching the data with an Ajax call, actually load the url as a new page. I hope I am making sense. We are not loading the current page, but the new page the "next" points to. – Zane May 16 '16 at 15:36
Hopefully I understand correctly. If a new URL comes back you can use `window.location.href = "newurl.com"` to navigate away to that URL. However, if you only wish to load the page content from the new page, then you can use [`$.load()`](http://api.jquery.com/load/) to do that. [This link](http://stackoverflow.com/questions/4101770/load-content-of-a-div-on-another-page) might also help. – cssyphus May 16 '16 at 15:46

Javascript - How to get script to run with Ajax requested data

1 Answers1