changing content in a div using php, html ajax

Question

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?

in your onreadystatechange function you're trying to access the variable elem without declaring\defining it. — developerwjk
– developerwjk, Commented Aug 16, 2013 at 22:06
The right code would be to write the correct xhtml strict syntax and then correct any js error. Put your page through validator.w3.org — user2417483
– user2417483, Commented Aug 16, 2013 at 22:12
I have just tried your code with and without the php include links and works fine for me. — Malcolm
– Malcolm, Commented Aug 16, 2013 at 22:38
Probably a silly question but does example.html and example2.html have anything to output? Like text or something and are not just blank pages, just wondering as it is working for me. — Malcolm
– Malcolm, Commented Aug 16, 2013 at 22:45

Malcolm · Accepted Answer · 2018-05-10 13:35:21Z

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>

Adder · Accepted Answer · 2013-08-16 23:15:54Z

0

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.

edited Aug 16, 2013 at 23:15

answered Aug 16, 2013 at 22:10

Adder

5,8982 gold badges35 silver badges60 bronze badges

5 Comments

developerwjk Over a year ago

i originally thought moving it would work, but it won't. he needs it in both places, because notice, its two different functions, one being created within the other.

Adder Over a year ago

The inner function has access to the variables of the outer function, it is called a closure. I'm not quite sure whether the sequence matters but it seems it does.

Rick Skeels Over a year ago

would another bit off code work on the same principle? if so any ideas and examples im very novice and trying to learn

Rick Skeels Over a year ago

in firebug i get this erro hope it means more to you than me lol TypeError: respText[1] is undefined elem.innerHTML = respText[1].split('</body>')[0];

developerwjk Over a year ago

it could mean the line var respText = xmlHttp.responseText.split('<body>'); didn't find anything after <body>. part[1] is the second part, and maybe you don't have a second part.

Collectives™ on Stack Overflow

changing content in a div using php, html ajax

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related