Jump to content

Get the contents of another page with Ajax.


johny20

Recommended Posts

Hi,

 

I have two pages. The first page has two links, when a user clicks on one of them then s/he can view some information.

I have used an image viewer taken from http://projects.sebastianhelzle.net/jquery.rondell/examples/carousel.html and I have set it according to my needs.

the code of the first/main page is:

<html><head><title>Animals</title><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {  xmlhttp=new XMLHttpRequest();  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4)    {    document.getElementById("rondellCarousel").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","second.html",false);xmlhttp.send();}</script></head><body> <a href = "#" onClick = "loadXMLDoc();">Αnimals</a><br /> <br /><a href = '#' >Cars</a><div id = "rondellCarousel" class = "false"><!-- I expect to see the image viewer here :/ --></div></body></html>

The code of the second page is:

<!DOCTYPE html><html class="no-js">  <head> <link rel="stylesheet" href="scripts/jquery.rondell.css" type="text/css" media="all" title="Screen">    <script src="scripts/modernizr-2.0.6.min.js"></script>    <title></title>  </head>  <body>    <br>      <div id="rondellCarousel" class="hidden"> <a target="_blank" rel="rondell_1" href="images/band.jpg" title="My favourite band"> <img src="images/band_small.jpg" alt="Band" title="My favourite band">          <h5>Awesome concert</h5>          <p>My favourite band.</p></a><a target="_blank" rel="rondell_1" href="images/dog.jpg" title="My dog"><img src="images/dog_small.jpg" alt="Dog" title="My dog">          <h5>My dog</h5>          <p>Standing in front of a glass door and wants in.</p></a><a target="_blank" rel="rondell_1" href="images/cat.jpg" title="My cat"><img src="images/cat_small.jpg" alt="Cat" title="My cat">          <h5>My cat</h5>          <p>Sleeping...</p></a><a target="_blank" rel="rondell_1" href="images/boar.jpg" title="Boar"><img src="images/boar_small.jpg" alt="Boar" title="Boar">          <h5>Dead boar on the wall</h5>          <p>Hanging around.</p></a><a target="_blank" rel="rondell_1" href="images/snow.jpg" title="Snow"><img src="images/snow_small.jpg" alt="Snow" title="Snow">          <h5>Winter wonderland</h5>          <p>The german alps.</p></a><a target="_blank" rel="rondell_1" href="images/rabbit.jpg" title="Rabbit"><img src="images/rabbit_small.jpg" alt="Rabbit" title="Rabbit">          <h5>Bunny</h5>          <p>In my brothers garden.</p></a><a target="_blank" rel="rondell_1" href="images/trash.jpg" title=""><img src="images/trash_small.jpg" alt="Trash" title="Trash">          <h5>Trash</h5>          <p>Somewhere in the USA.</p></a></div>    <script src="scripts/jquery-1.9.1.min.js"></script>    <script src="scripts/jquery.rondell.js"></script> <script type="text/javascript">(function() {  $(function() {    var carousel;    carousel = $("#rondellCarousel > *").rondell({      preset: "carousel"    });    $(".resize-button").click(function(e) {      e.preventDefault();      return carousel.fitToContainer();    });    return $.ajax({      url: "http://www.wookmark.com/api/json",      dataType: "jsonp",      success: function(data, text, xhqr) {        var item, rondellContent, _i, _len, _ref;        if (text === "success") {          rondellContent = "";          _ref = data.slice(0, 25);          for (_i = 0, _len = _ref.length; _i < _len; _i++) {            item = _ref[_i];            rondellContent += "            <a href="" + item.image + "" title="" + item.title + " @ " + item.url + "" target="_blank" style="display:none">              <img src="" + item.preview + "" title="" + item.title + "" width="" + item.width + "" height="" + item.height + ""/>            </a>          ";          }          return $("#rondellCubic").html(rondellContent).children().rondell({            preset: "cubic"          });        }      }    });  });}).call(this);</script>  </body></html>

The problem is that, even if Ajax works without getting any problem, the pictures are not presented like a "carousel image viewer". If I put directly the second page in the address bar and browse it, I see the images as I wish (like a carousel image viewer with next/prev arrows).

 

Can anyone help with that?

Thank you in advance.

Link to comment
Share on other sites

You are retrieving the whole page content when you only require what is between

 

<div id="rondellCarousel" class="hidden"> ... </div> and maybe the jquery as well, but this should be placed in external file and linked to, in the original main page.

 

Also you may have to change

 

$(".resize-button").click(function(e) {e.preventDefault();return carousel.fitToContainer();});

 

using click() applies the click function to html on page load, but your ajax function add this extra html code afterwards

 

look into using live() instead

Link to comment
Share on other sites

Hi, thanks for the reply.

I linked the jQuery inside my main file :

<script src="scripts/jquery-1.9.1.min.js"></script>

then I changed the click() to live(), but I thought that this has to do with the prev/next buttons at the image viewer.

Nothing worked again...

Yes, I want to retrieve that specific <div> and I can't understand why since it works on the second page, it can't work on the main one.. :mellow:

Link to comment
Share on other sites

Not! just the jquery libraries,

this!

(function() {$(function() {var carousel;carousel = $("#rondellCarousel > *").rondell({preset: "carousel"});$(".resize-button").click(function(e) {e.preventDefault();return carousel.fitToContainer();});return $.ajax({url: "http://www.wookmark.com/api/json",dataType: "jsonp",success: function(data, text, xhqr) {var item, rondellContent, _i, _len, _ref;if (text === "success") {rondellContent = "";_ref = data.slice(0, 25);for (_i = 0, _len = _ref.length; _i < _len; _i++) {item = _ref[_i];rondellContent += " <a href="" + item.image + "" title="" + item.title + " @ " + item.url + "" target="_blank" style="display:none"> <img src="" + item.preview + "" title="" + item.title + "" width="" + item.width + "" height="" + item.height + ""/> </a> ";}return $("#rondellCubic").html(rondellContent).children().rondell({preset: "cubic"});}}});});}).call(this);

all css links, javascript/jquery external file links used for the second page as well

Link to comment
Share on other sites

You should only have

<a target="_blank" rel="rondell_1" href="images/band.jpg" title="My favourite band"> <img src="images/band_small.jpg" alt="Band" title="My favourite band">          <h5>Awesome concert</h5>          <p>My favourite band.</p></a><a target="_blank" rel="rondell_1" href="images/dog.jpg" title="My dog"><img src="images/dog_small.jpg" alt="Dog" title="My dog">          <h5>My dog</h5>          <p>Standing in front of a glass door and wants in.</p></a><a target="_blank" rel="rondell_1" href="images/cat.jpg" title="My cat"><img src="images/cat_small.jpg" alt="Cat" title="My cat">          <h5>My cat</h5>          <p>Sleeping...</p></a><a target="_blank" rel="rondell_1" href="images/boar.jpg" title="Boar"><img src="images/boar_small.jpg" alt="Boar" title="Boar">          <h5>Dead boar on the wall</h5>          <p>Hanging around.</p></a><a target="_blank" rel="rondell_1" href="images/snow.jpg" title="Snow"><img src="images/snow_small.jpg" alt="Snow" title="Snow">          <h5>Winter wonderland</h5>          <p>The german alps.</p></a><a target="_blank" rel="rondell_1" href="images/rabbit.jpg" title="Rabbit"><img src="images/rabbit_small.jpg" alt="Rabbit" title="Rabbit">          <h5>Bunny</h5>          <p>In my brothers garden.</p></a><a target="_blank" rel="rondell_1" href="images/trash.jpg" title=""><img src="images/trash_small.jpg" alt="Trash" title="Trash">          <h5>Trash</h5>          <p>Somewhere in the USA.</p></a><h4>Click me to show alert</h4>

In the second page, note: i added '<h4>Click me to show alert</h4>' at the end, and as mentioned links to css, js, jquery etc will be in the main page.

 

Now add the code below to the head section between <head> </head> BELOW the jquery library link

$(function(){//$('h4').live('click', function(){ // jQuery 1.3+//$(document).delegate( 'h4','click', function(){   // jQuery 1.4.3+$(document).on( 'click','h4', function(){  // jQuery 1.7+  alert($(this).html())});});

The jquery version you are using SHOULD use the uncommented line of code for version 1.7+, else comment out this line, and uncomment the previous, one at a time till it works. now! what should happen is if you click the h4 header a alert will appear showing the h4 text.

 

so this line

 

$(".resize-button").click(function(e) {

 

should be replaced with the above code that works, which more than likely would be

 

$(document).on( 'click','.resize-button', function(e){

 

Like i said click() event is attached to the specific element on current content on page load, the content from second does not exist until link/button is pressed, so it does not have this click event function attached to it, using live(), on() fixes this.

Link to comment
Share on other sites

Hi again. Thanks so much that help me.

OK, look what I did (main/first) page:

<html><head><title>Animals</title><script src="scripts/jquery-1.9.1.min.js"></script><script src="scripts/modernizr-2.0.6.min.js"></script><script>$(function(){//$('h4').live('click', function(){ // jQuery 1.3+//$(document).delegate( 'h4','click', function(){   // jQuery 1.4.3+$(document).on( 'click','h4', function(){  // jQuery 1.7+  alert($(this).html())});});</script> <link rel="stylesheet" href="scripts/jquery.rondell.css" type="text/css" media="all" title="Screen"><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {  xmlhttp=new XMLHttpRequest();  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4)    {    document.getElementById("rondellCarousel").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","second.html",false);xmlhttp.send();}</script></head><body> <a href = "#" onClick = "loadXMLDoc();">Αnimals</a><br /> <br /><a href = '#' >Cars</a><div id = "rondellCarousel" class = "false"></div> <script src="scripts/jquery-1.9.1.min.js"></script>    <script src="scripts/jquery.rondell.js"></script>  <script src="fromforum.js"></script></body></html>

So, the second page is like this:

<!DOCTYPE html><html class="no-js">  <head><!--    <link rel="stylesheet" href="../examples/screen.css" type="text/css" media="all" title="Screen"> --> <!-- <link rel="stylesheet" href="scripts/jquery.rondell.css" type="text/css" media="all" title="Screen"> --><!--    <script src="scripts/modernizr-2.0.6.min.js"></script> -->    <title></title>  </head>  <body>    <br> <!--     <div id="rondellCarousel" class="hidden"> --> <a target="_blank" rel="rondell_1" href="images/band.jpg" title="My favourite band"> <img src="images/band_small.jpg" alt="Band" title="My favourite band">          <h5>Awesome concert</h5>          <p>My favourite band.</p></a><a target="_blank" rel="rondell_1" href="images/dog.jpg" title="My dog"><img src="images/dog_small.jpg" alt="Dog" title="My dog">          <h5>My dog</h5>          <p>Standing in front of a glass door and wants in.</p></a><a target="_blank" rel="rondell_1" href="images/cat.jpg" title="My cat"><img src="images/cat_small.jpg" alt="Cat" title="My cat">          <h5>My cat</h5>          <p>Sleeping...</p></a><a target="_blank" rel="rondell_1" href="images/boar.jpg" title="Boar"><img src="images/boar_small.jpg" alt="Boar" title="Boar">          <h5>Dead boar on the wall</h5>          <p>Hanging around.</p></a><a target="_blank" rel="rondell_1" href="images/snow.jpg" title="Snow"><img src="images/snow_small.jpg" alt="Snow" title="Snow">          <h5>Winter wonderland</h5>          <p>The german alps.</p></a><a target="_blank" rel="rondell_1" href="images/rabbit.jpg" title="Rabbit"><img src="images/rabbit_small.jpg" alt="Rabbit" title="Rabbit">          <h5>Bunny</h5>          <p>In my brothers garden.</p></a><a target="_blank" rel="rondell_1" href="images/trash.jpg" title=""><img src="images/trash_small.jpg" alt="Trash" title="Trash">          <h5>Trash</h5>          <p>Somewhere in the USA.</p></a><h4>Click me to show alert</h4><!-- </div> --><!--    <script src="scripts/jquery-1.9.1.min.js"></script> --><!--    <script src="scripts/jquery.rondell.js"></script>  -->  </body></html>

and the external JS (fromforum.js) file is like this:

(function() {  $(function() {    var carousel;    carousel = $("#rondellCarousel > *").rondell({      preset: "carousel"    });    //$(".resize-button").on(function(e) {$(document).on( 'click','.resize-button', function(e){      e.preventDefault();      return carousel.fitToContainer();    });    return $.ajax({      //url: "http://www.wookmark.com/api/json",      dataType: "jsonp",      success: function(data, text, xhqr) {        var item, rondellContent, _i, _len, _ref;        if (text === "success") {          rondellContent = "";          _ref = data.slice(0, 25);          for (_i = 0, _len = _ref.length; _i < _len; _i++) {            item = _ref[_i];            rondellContent += "            <a href="" + item.image + "" title="" + item.title + " @ " + item.url + "" target="_blank" style="display:none">              <img src="" + item.preview + "" title="" + item.title + "" width="" + item.width + "" height="" + item.height + ""/>            </a>          ";          }          return $("#rondellCubic").html(rondellContent).children().rondell({            preset: "cubic"          });        }      }    });  });}).call(this);

When I click on the <h4>, I get the alert. But nothing works again.

Is the order of the scripts wrong?

When I run it on IE I get an error -> Syntax error filename.html line:1 char:1 code:0

and when I click the 'Animals' link I do not get any other error.

Link to comment
Share on other sites

NO! NOTHING BUT

<a target="_blank" rel="rondell_1" href="images/band.jpg" title="My favourite band"> <img src="images/band_small.jpg" alt="Band" title="My favourite band"><h5>Awesome concert</h5><p>My favourite band.</p></a><a target="_blank" rel="rondell_1" href="images/dog.jpg" title="My dog"><img src="images/dog_small.jpg" alt="Dog" title="My dog"><h5>My dog</h5><p>Standing in front of a glass door and wants in.</p></a><a target="_blank" rel="rondell_1" href="images/cat.jpg" title="My cat"><img src="images/cat_small.jpg" alt="Cat" title="My cat"><h5>My cat</h5><p>Sleeping...</p></a><a target="_blank" rel="rondell_1" href="images/boar.jpg" title="Boar"><img src="images/boar_small.jpg" alt="Boar" title="Boar"><h5>Dead boar on the wall</h5><p>Hanging around.</p></a><a target="_blank" rel="rondell_1" href="images/snow.jpg" title="Snow"><img src="images/snow_small.jpg" alt="Snow" title="Snow"><h5>Winter wonderland</h5><p>The german alps.</p></a><a target="_blank" rel="rondell_1" href="images/rabbit.jpg" title="Rabbit"><img src="images/rabbit_small.jpg" alt="Rabbit" title="Rabbit"><h5>Bunny</h5><p>In my brothers garden.</p></a><a target="_blank" rel="rondell_1" href="images/trash.jpg" title=""><img src="images/trash_small.jpg" alt="Trash" title="Trash"><h5>Trash</h5><p>Somewhere in the USA.</p></a><h4>Click me to show alert</h4>

should be be within the file you want to insert into the main document, you CANNOT have more than one <doctype!><html><head><body> tags within the main page.

 

EDIT : To use the whole second page original document including html, body, head tags and all, you would have to use an iframe instead, and on clicking on the links change the src of the iframe

 

EDIT : all these should be placed in the <head></head> of main document

<!--<script src="scripts/jquery-1.9.1.min.js"></script> NOT this, already exists --><script src="scripts/jquery.rondell.js"></script> <script src="fromforum.js"></script>
Edited by dsonesuk
Link to comment
Share on other sites

OK, so the main page looks like this (I put the scripts two times) :

<!DOCTYPE html><html class="no-js"><title>Animals</title> <link rel="stylesheet" href="scripts/jquery.rondell.css" type="text/css" media="all" title="Screen"><script><script src="scripts/jquery-1.9.1.min.js"></script><script>$(function(){//$('h4').live('click', function(){ // jQuery 1.3+//$(document).delegate( 'h4','click', function(){   // jQuery 1.4.3+$(document).on( 'click','h4', function(){  // jQuery 1.7+  alert($(this).html())});});</script><script src="scripts/modernizr-2.0.6.min.js"></script><script src="scripts/jquery.rondell.js"></script>  <script src="fromforum.js"></script><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {  xmlhttp=new XMLHttpRequest();  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4)    {    document.getElementById("rondellCarousel").innerHTML=xmlhttp.responseText;    }  }  xmlhttp.open("GET","second.html",false);xmlhttp.send();}</script></head><body> <a href = "#" onClick = "loadXMLDoc();">Αnimals</a><br /> <br /><a href = '#' >Cars</a><div id = "rondellCarousel" class = "false"></div> <script src="scripts/jquery-1.9.1.min.js"></script> <script src="scripts/jquery.rondell.js"></script> <script src="fromforum.js"></script></body></html>

But again nothing works. I also removed the scripts from the bottom and I placed them again but nothing new...

The second page is as you mentioned above!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...