1

I know that there is a JQuery way of doing this but that's not what I need right now.

I have the following javascript that pulls a page content into a div, however I don't want the whole page, just the content of a DIV from that page:

function ahah(url, target) {
document.getElementById(target).innerHTML ='<img src="ajax-loader.gif"/>';
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
ahah(name,div);
return false;
}

And then I call it like this:

<a href="page.php" onclick="load('page.php','ajaxcontent');return false;" class="slide_more">LOAD</a>

Where should specify the selector I want to load from page.php?

elbatron
  • 675
  • 3
  • 16
  • 30
  • If you want just part of the whole page, shouldn't that DIV be just the one that you are returning from the server instead of sending back the whole page? – momo Sep 07 '11 at 13:09
  • Exactly, that is why I'm here, I don't know how to do it. I have no idea what to change in the above code to get only the div instead of the whole page. – elbatron Sep 07 '11 at 14:40
  • The page.php is the one who needs to return just the DIV. Your client javascript code is not the one who will cut the page and get the DIV. It's not normally done that way – momo Sep 07 '11 at 14:48
  • Ok. Then I was wrong. I based my assumption on JQuery load, where you could specify not just the page you want to load but a selector on that page as well. Can you point me to an example? – elbatron Sep 07 '11 at 14:57
  • I've added the reference + explanation in the answer – momo Sep 07 '11 at 15:09

1 Answers1

2

Normally in AJAX application, in order to get the HTML Fragment the server is the one who is returning the fragment instead of having it selected on the client's side. For example, see this Simple Example on Section 4. Cool AJAX example. Code from the website is provided below for your reference:

<?php
function validate($name) {
  if($name == '') {
    return '';
  }

  if(strlen($name) < 3) {
    return "<span id=\"warn\">Username too short</span>\n";
  }

  switch($name) {
    case 'bob':
    case 'jim':
    case 'joe':
    case 'carol':
      return "<span id=\"warn\">Username already taken</span>\n";
  }

  return "<span id=\"notice\">Username ok!</span>\n";
}

echo validate(trim($_REQUEST['name']));
?>

Notice that the PHP page is just returning an HTML Fragment containing the <span> only instead of the full html. This is one of the benefits of AJAX call that you don't need to return the full page thereby saving the bandwidth cost since the payload is smaller

momo
  • 21,233
  • 8
  • 39
  • 38
  • Ok. I understand it now. I really thought that there something like JQuery load with pure javascript, where the part you want to pull is defined on client side. Thanks for the example, I'm afraid it is not going to work for me: I want to pull information from a Wordpress site of mine, and I guess I cannot just put some php in the loop. – elbatron Sep 07 '11 at 15:28
  • I could think of possible tricks with jQuery that might do what you want though I have not personally tried it myself. If you want I could try a quick example with jQuery and see if that works – momo Sep 07 '11 at 15:36
  • Thanks Momo. Actually I used jQuery load but switched to Javascript because the link that actually fires the call for the HTML fragment is in a parsed xml file and inside that a link with the jQuery call defined in the head just won't work - only the old a href onlick="" seems to be ok... – elbatron Sep 07 '11 at 15:47