CODEWITHSUNDEEP
javascriptjqueryhtmldynamicload
developer
developer

Reputation: 308

How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?

Ok, so this what I have that works, for the starting code:

$(document).ready(function(){
  $('.currentpagediv').load('http://theurl.com/page2/somethingsomewhere.html .secondpagedivclass');
});

What this does, is find the div on the current page, <div class="currentpagediv">, and add in the second page (http://theurl.com/page2/somethingsomewhere.html) div <div class="secondpagedivclass">

So for example, say I have a page like this:

<html>
  <body>
    <div class="currentpagediv">
    </div>
  </body>
</html>

then what my code above does is make this:

<html>
  <body>
    <div class="currentpagediv">
    </div>
    <div class="secondpagedivclass">
    </div>
  </body>
</html>

Which is just what I want it to do. So I have the functionality I need.

BUT, the problem is that I need the URL portion to be dynamic.
For example, the current page is always http://theurl.com/page1/[a path].html, and the new page that I need to fetch the div is always http://theurl.com/page2/[the same path].html

So basically, I need to get the URL, and change ONLY /page1/ to /page2/, while retaining this. That way I can run on all the pages of the domain and it will add the section from page2 into page1.

Like this:

Original page http://theurl.com/page1/365743668.html:

<html>
  <body>
    <div class="currentpagediv">
    </div>
  </body>
</html>

Second page http://theurl.com/page2/365743668.html:

<html>
  <body>
    <div class="secondpagedivclass">
    </div>
  </body>
</html>

NEW ORIGINAL PAGE THAT THE SCRIPT IS RUNNING ON (still http://theurl.com/page1/365743668.html):

<html>
  <body>
    <div class="currentpagediv">
    </div>
    <div class="secondpagedivclass">
       [THE INFO FROM PAGE `http://theurl.com/page2/365743668.html`]
    </div>
  </body>
</html>

I've tried many things, but they did not work.

Here is my attempt which does not work:

function changeURL() {
        var theURL = location.pathname.toString();
        var newURL = theURL.replace("/page1/", "/page2/");
}
$(document).ready(function(){
  $('.currentpagediv').load(changeURL() '.secondpagedivclass');
});

In the code above, I tried to:

  1. fetch the url of current page
  2. convert the url to a string, so I could
  3. modify the url, and then
  4. add the function changeURL() in place of where the URL went after .load('

Please note I want to make it work using jquery and this method (NOT ANOTHER METHOD) because I'm also trying to learn, and giving me something completely different is not going to help me learn how to do this method.

Upvotes: 1

Views: 1628

Answers (1)

Barmar
Barmar

Reputation: 781210

You're just missing the string concatenation operation, +.

$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');

Don't forget the space before .secondpagedivclass.

The changeURL function needs to return the result:

function changeURL() {
    var theURL = location.pathname;
    var newURL = theURL.replace("/page1/", "/page2/");
    return newURL;
}

You don't need to use .toString(), since the pathname is a string.

Upvotes: 2

Related Questions