CODEWITHSUNDEEP
phpajaxhyperlinkhtml
Rick Skeels
Rick Skeels

Reputation: 511

changing content in a div using php, html ajax

i am trying to make the content in the div 'test' change according to the link i click and to go where the original text is

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">

    </style>
    <script type="text/javascript">
    function ajaxFunction(id, url){
        var xmlHttp;
        try {// Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();     
        } catch (e) {// Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
            }
        }

        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4) {
                //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
                var respText = xmlHttp.responseText.split('<body>');
                elem.innerHTML = respText[1].split('</body>')[0];
            }
        }

        var elem = document.getElementById(id);
        if (!elem) {
            alert('The element with the passed ID doesn\'t exists in your page');
            return;
        }

        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }       
</script>
</head>

    <body>
        <div id="test">THIS SHOULD CHANGE</div>
        <a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example2.html'); return false;">link2</a>

    </body>
</html>

the div is i am trying to change is this

 <div id="test">THIS SHOULD CHANGE</div>

and the links im using are these

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example2.html'); return false;">link2</a>

any ideas on this? as this is giving me a head ache

i am using the links in a sepreat php file named menu and includeing it with 

<?php include 'menu.php'; ?>

would this make a diffrence?

if i rename one the html files i get a error saying it cant be found but other than that nothing shows when there correct

!!!update!!!

ok if i change the link text from 

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

to this

<form>
        <input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html');"/>
    </form>

it works fine but looks really bad so is there a better way to change the link?

Upvotes: 0

Views: 5043

Answers (2)

Malcolm
Malcolm

Reputation: 784

If you are trying to load external content into a div depending on what link was clicked? Then you could try something like the following. It is basically a striped down version of what you have and works fine for me.

<script type="text/javascript">
    function loadiv(temp){
      var req = new XMLHttpRequest();
      req.open("GET", temp, false);
      req.send(null);
      var page = req.responseText;
      document.getElementById("test").innerHTML = page;
    };
</script>

<a href="#" onClick="loadiv('example.html?ID=1&MyVar=1'); return false;">link1</a>
<a href="#" onClick="loadiv('example2.html?ID=2&MyVar=2'); return false;">link2</a>

<div id="test"></div>

Or use jQuery

<script type="text/javascript">
$(function(){
    $('a').on('click', function(e){
        e.preventDefault();
        var page_url = $(this).prop('href');
        $('#test').load(page_url);
    });
});
</script>

<a href="example.html?ID=1&MyVar=1">Load Form 1</a>
<a href="example2.html?ID=2&MyVar=2">Load Form 2</a>

<div id="test"></div>

Upvotes: 2

Adder
Adder

Reputation: 5878

I was wrong with my advice, sequence doesn't matter when accessing the outer scope.

function z() {
    var a=1;

    function x() {
        console.log(a);
        console.log(b);
    }

    var b=2;

    x();
}
z();

I still recommend using Firefox with firebug addon or your favorite browser with a similar feature: check the javascript console for errors. You cn also check the ajax response there.

Upvotes: 0

Related Questions