Ajax/javascript problem, innerhtml not changing

Question

index.php

<?php
    //grab product id's who need to be showed
    $pids = '1,2,3';
?>

<html>

<head>
    <?php include 'lol.js.php'; ?>
</head>


<body onload="update_timers();">


    <div id="timer_3183" class="timer countdown clearfix" title="1301994024"></div>

lol.js.php

<script type="text/javascript">

function update_timers()
{
    check_detail('<?=$pids?>', 'ajax.php');
}




function updatepage(str, pids)
{
      //loop through all the products, change time
      document.getElementById("timer_3183").innerHTML = document.frm.hide.value;
}

function check_detail(pids, strURL) 
{
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() 
    {
        if (self.xmlHttpReq.readyState == 4)
            updatepage(self.xmlHttpReq.responseText, pids);
            //document.getElementById("myDiv").innerHTML = self.xmlHttpReq.responseText;
    }
    self.xmlHttpReq.send("pids=" + pids); //this goes to PHP script via POST
}


</script>

ajax.php

<?php

    echo '
<form name="frm">
    <input type="hidden" name="hide" value="Some random text">
</form>';
?>

I'm trying to get the div in index page set to the value in ajax.php.

The line that's not working is: document.getElementById("timer_3183").innerHTML = document.frm.hide.value;

If i replace it with a literal string, it works: document.getElementById("timer_3183").innerHTML = "rand text";

But when i want to set it to "document.frm.hide.value;" expression, the value doesn't change when the page loads.

Any ideas what I'm doing wrong?

But ... that form is not part of the document yet when you're trying to add it ... — Pointy
– Pointy, Commented Apr 5, 2011 at 13:38

Pointy · Accepted Answer · 2011-04-05 13:39:19Z

1

Well, I don't know what that "loop through ..." comment means, but:

  document.getElementById("timer_3183").innerHTML = str;

seems like it'd do something more interesting. The form you want to add is in the XMLHttpRequest response text, right? That's what your "ajax.php" file returns to the browser. At the point that the request succeeds, it's still just plain un-parsed text. By stuffing that text into the "innerHTML" property of the target "drop zone" <div>, you give it to the browser for parsing. When that's done, the form will be there inside that <div>.

answered Apr 5, 2011 at 13:39

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zindel · Accepted Answer · 2011-04-05 13:37:22Z

0

Use getElementById again? I.e. assign some id, say hide to input:

<input type="hidden" name="hide" value="Some random text" id="hide">

And write the JS code like this:

document.getElementById("timer_3183").innerHTML = document.getElementById('hide').value;

answered Apr 5, 2011 at 13:37

zindel

1,87511 silver badges14 bronze badges

Collectives™ on Stack Overflow

Ajax/javascript problem, innerhtml not changing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related