Jump to content

Ajax - variable for div id not working


JoshEir

Recommended Posts

I'm trying to write an ecommerce site and was doing well until this one.  It has has taken me a few days...can't get it.  It won't display answerHtml in the pear div using a string.  The idea is to use a variable for the pear div and to place apple div into it.  The error is :  fails with cannot set property 'innerhtml' of null .

html>
<body>

<script>

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
	
	if (this.readyState == 4 && this.status == 200) {
	
	var jsonData = JSON.parse(this.responseText);
	var answerHtml = jsonData.htmlstuff;
	
    var pear1 = jsonData.div;
    
    //fails with cannot set property 'innerhtml' of null   
    document.getElementById(pear1).innerHTML = answerHtml;   
	}
};

    xmlhttp.open("GET", "div2.php", true);
	xmlhttp.send();
</script>


</body>
</html>

 

<?php

$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'ecommerce';

$options = array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => false
);

$dbo3 = new PDO("mysql:host=$host;dbname=$database", $user, $pass, $options);

$var = "pear";
$string = " 
<div>
    <div id = \"$var\" >here </div>
    <div id = \"apple\"> <button type=\"button\" onclick=\"loadDoc()\">Change Content</button> </div>
</div>
";

$myObj = new stdClass();
$myObj->htmlstuff = $string;
$myObj->div = $var;

//Encode the data as a JSON string
$jsonStr = json_encode($myObj);
echo $jsonStr;
?>

Thank you for your time.

Edited by JoshEir
fix comment
Link to comment
Share on other sites

I think you've got your order of operations mixed up. The pear DIV is inside the AJAX's HTML, so right now you're trying to insert that HTML into itself.
There's also nothing in there targeting the "apple" element.

1 hour ago, JoshEir said:

The idea is to use a variable for the pear div and to place apple div into it.

The pear DIV has to exist on the page for you to insert something into it. It should not be in the response itself but rather already on the page, and the response would be just the apple part.

  • Like 1
Link to comment
Share on other sites

It can be whatever, as long as stuff exists in the way it needs to exist at the moment it needs to exist.

So you can getElementById a variable, sure, but the thing you're trying to find has to be on the page - not just sitting in a variable you got from AJAX.

  • Great Answer 1
Link to comment
Share on other sites

Thanks for your help, I had never created my own div before, making them dynamically.  I just completed the Administrator's product system.  For the rest, I plan to use modern PHP instead of the Vanilla variety.  

Josh

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.