Redirect and modify new page with the same jQuery script

Question

I am trying to create a function with JQuery that when I click on a button, takes the user to a new html page and then modifies the content of the page (just as an exercise). But, although the function does take the user to the new page, it does not modify the html with new tags or the such. What am I doing wrong?

This is the HTML of the homepage:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Generic name </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>

  <body>
    <header>
      <h1> GUI test </h1>
      <h6> beta </h6>
    </header>

    <main id="data-container">
      Loading...
    </main>


  <script src="https://code.jquery.com/jquery-2.2.1.min.js"
              integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
              crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
              integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
              crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
              integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
              crossorigin="anonymous"></script>
      <script src="/RandomColor.js"></script>
      <script src="/ToCardInfo.js"></script>
      <script src="/client.js"></script>


  </body>

</html>

With the /client.js script at the end, the content of this home page is modified to add elements with the following button:

  $('<button class="Gallery-Button" OnClick="TakeToCardInfo(this.id)">See More..</button>').attr('id', record.id).appendTo($galleryCard);

When the user clicks on the button, the following function from the /ToCardInfo.js script in the homepage is called,

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);
  var $dataContainer = $('#container-A');
  $dataContainer.html('');
};

This function sends the user to the following HTML page:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Test </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>

  <body>

    <header>
      <h1>TRIAL</h1>
    </header>

    <main id="container-A"> Loading too... </main>

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
                integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
                crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
                integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
                crossorigin="anonymous"></script>
        <script src="/ToCardInfo.js"></script>


    </body>

  </html>

But the Loading too... message never disappears, the main tag is never emptied. What am I doing wrong?

You can't edit the page after you redirected to from a previous page. The JS will only modify the currently loaded page. You would have to create a function in the new page and run it. If you need to choose between different behaviors based on where you're coming from, you may want to use a URL parameter — Victoria Ruiz, Jul 26 '18 at 17:02
@VictoriaRuiz thank you for the explanation, I didn't know that. How would u suggest I send the user to the new page but then, in that new page, call a function with the "this.ID" parameter from the previous page, since this ID parameter will be used to define the tags needed in this new page? — DCS, Jul 26 '18 at 17:13
have a look at my new answer, hopefully you can use that to get you started. — Victoria Ruiz, Jul 26 '18 at 17:34
You can not do that alone with jQuery. You need something like a router to pass data between routes. — OscarDev, Jul 26 '18 at 17:06

Mohaalak · Answer 1 · 2018-07-26T18:05:03.313

When you call

$(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);

it will refresh your page, and these two lines

var $dataContainer = $('#container-A');
$dataContainer.html('');

are never going to run.

When your page reloads your .js files will be reloaded too.

in your new page if you want to read the user id you can use this function

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0; i < vars.length; i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

so in the new page when you want user id you called above function

getQueryVariable('user') it will return the id for you.

you can read more here

thank you for your replies! How would u suggest I send the user to the new page but then, in that new page, call a function/scripty with the ID of the button that was clicked on the previous page as the parameter, since this ID parameter will be used to define the tags needed in this new page? — DCS, Jul 26 '18 at 17:27

score -1 · Accepted Answer · answered Jul 26 '18 at 17:34

As said, after your script makes a redirect, you will not be able to run anything after that line.

You need to have the page you redirected to do the rest.

Your redirect can add another parameter to decide what the other page has to do, like so:

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id + '&run=something');
};

And on the other page, you need to detect that parameter. The parameters in your URL can be parsed by doing this (based on this question):

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

And then you can use the run parameter to define which function to load:

if (params.run == "cleanup") cleanup();

Cleanup() in this case contains what you wanted to run before:

function cleanup() {

  var $dataContainer = $('#container-A');
  $dataContainer.html('');

}

You can also use params.id – Victoria Ruiz Jul 26 '18 at 17:35 — Victoria Ruiz, Jul 26 '18 at 17:35

score -3 · Answer 3 · answered Jul 26 '18 at 17:09

-3

Do this

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);
  var $dataContainer = $('#container-A');
  $dataContainer.empty();
};

answered Jul 26 '18 at 17:09

Omolewa Stephen

444
3
19

Oops! He is trying to inject a script and that may not work, didn't check properly at first. – Omolewa Stephen Jul 26 '18 at 17:35

Redirect and modify new page with the same jQuery script

3 Answers3