Question

I have a php page which includes jQuery and a script.js file. When I put the following function inside my php file, the function gets executed and works as intended:

<script>
    $('#scoreboard-overview').load('getusers.php?q=<?php echo $NewString; ?>').fadeIn("slow"); 
</script>

What does it do? Wel it reloads the div with id scoreboard-overview in my php file with data from an external php file called getusers.php

This all works great.

Now in the script.js file (which is loaded at the end of the php page, right before </body>), I also want to reload this div when the updatescore.php file is done updating the database via a form. I have this code for it:

$.ajax({
    type: "POST",
    data: $("#form").serialize(),
    cache: false,
    url: "updatescore.php",
    success: function() { //reload overview
        $('#scoreboard-overview').load('getusers.php?q=' + document.getElementById('str') + '').fadeIn("slow");
    }
});​

So after success it should execute the jQuery function:

function () { //reload overview
    $('#scoreboard-overview').load('getusers.php?q='+document.getElementById('str')+'').fadeIn("slow");                  
}

I verified the code. The database gets updated using updatescore.php but after this (so after success), the div isn’t refreshed. So this success part of code isn’t working. What am I doing wrong?

ps: '+document.getElementById('str')+' should give me the same result as echo $NewString; only taken from the div with id str (since php doesn’t work inside a js file?)

Answer 1

document.getElementById('str') is going to return the HTML element with the ‘str’ id, not the text within the element. I’m not sure what this element actually looks like, but you might do something like document.getElementById('str').textContent.