1

I would like to solve the following problem: Given a link on a Web page, I would like to replace the content of a specified div element with the content of a div element of another page. Say, just load the text "Stand on the shoulders of giants" from the Google Scholar page into my existing div element.

Up to date, if implemented the following example:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href="http://www.whatsmyip.org/">Click me</a>

<div id="myid">Text to be replaced</div>

<script type="text/javascript">
    $("a").click(function() {
      $.get(this.href, function(data) {
        $("#myid").replaceWith($(data).find("#fb-root"));
      });
      previous_page = location.href;
      window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
      return false;
    });

    window.onpopstate = function(event) {
      location.reload();
    }
</script>

</body>
</html>

I've included window.history in order to change the URL in the location bar, and to allow the user to restore the previous state of the Web page without the new content.

Now, I have two issues:

  • The replacement of the <code>div</code> element seems not to work, since the entire page from WhatIsMyIP is loaded.
  • While using Chrome, the entire page gets reloaded again and again right from the beginning. I think, the event window.onpopstate is triggered continuously.

Thank for any help!

Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
labrassbandito
  • 535
  • 12
  • 25
  • Maybe your pushState problem can be solved by use the plugin of that is mentioned in this answer: http://stackoverflow.com/questions/5210034/history-pushstate – Kees C. Bakker Dec 16 '11 at 11:08
  • I think that one source of the problem in your implementation is that "$.get" may take too much time for the event to be canceled. Thus, the "return false" may come too late. Anyone having seen that? – jehon Aug 01 '17 at 19:14

4 Answers4

2

Regarding your first issue

Try this

$('#myid').load(this.href + ' #fb-root');

instead of this

$.get(this.href, function(data) {
    $("#myid").replaceWith($(data).find("#fb-root"));
});
pimvdb
  • 151,816
  • 78
  • 307
  • 352
devnull69
  • 16,402
  • 8
  • 50
  • 61
2

You could combine a click and a $.load on a hyperlink:

$('a').click(function(e){
    $('#myid').load($(this).attr('href'));
    e.preventDefault(); //needed to prevent navigation!
});

If you want a special element within the page, you can append any selector. Example:

 $('#myid').load($(this).attr('href') + ' div');

This will append all divs of the requested page.

Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
1

Try to add event.preventDefault() before return false;

ijse
  • 2,998
  • 1
  • 19
  • 25
0

If I understand you correctly, you just want to replace the content of a specified div element on page1 (in this case div element with ID "myid") with the content of a div element from page2 (page2 is http://www.whatsmyip.org/).

Hope this might help:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href="http://www.whatsmyip.org/">Click me</a>

<div id="myid">Text to be replaced</div>

<script type="text/javascript">
$("a").click(function() {
  $.get(this.href, function(data) {
    var target_element_id_page2 = "element_id_page2";
    var target_element_type_page2 = "div";
    var respond= $('<div>' + data + '</div>');//You forgot this... It won't work unless you use it...
    var target_element = respond.find( target_element_type_page2 + '#'+ target_element_id_page2 )[0]; //There "might" be more div elements with the same id: that's why you specify index
    var container = document.getElementById( "myid");
    container.innerHTML = target_element.innerText;
    }, "html");
</script>

</body>
</html>

I took out window.history.pushState and window.onpopstate to better answer your question without any errors these two codes might give. If you put these back it should work perfectly. Althought I do not understand why you're using " previous_page = location.href; ". previous_page is not declared and you are not using it afterwards. Correct me if I am wrong...

chippie3000
  • 31
  • 5