Passing php variables through javascript

[Matt Phelps]

I tried asking this question before but I don't think I explained it very well.

My question is, why doesn't this work?


document.getElementById(contents).className = 'selectedcontents';


<div class="contents" id="contents1"><?php include "update/update.php?category=training&playout=1" ; ?></div>


If I leave off the extra variables at the end of the php include then it works fine.

I guess what I am asking is how to do I pass variables to php through javascript? The page all this sits on is a php page. I'm a bit desperate to get this working but if it can't be done then please tell me!

[fredmv]

There are two errors preventing your script from working. For the first one, your JavaScript code is exeucting before the <div> exists. To access nodes in the DOM they must first be loaded into memory, so your best best would be to execute this code using the onload event handler; this would ensure all DOM nodes are loaded into memory before executing any code. You second error is how you're accessing the element. Inside the following piece of code:document.getElementById(contents)Note that you're not passing a string to the getElementById method, since it isn't a quoted string, JavaScript assumes it's a variable, which would result in an error since there is no variable named contents in your code. Moreover, even if it was a string, you aren't passing the correct value. You're passing contents; that is the class of the element, you want to be accessing it's id (which is contents1). So, that line should look like this:onload = function() { document.getElementById('contents1').className = 'selectedcontents'; }That should work as expected, changing the CSS class of the element to selectedContents.

I hope that helps you out.

[Matt Phelps]

Thanks I think that does help. My problem is that I know next to nothing about javascript - I'm a php man!

I need to find out what DOM is to understand your first point. On the second point, maybe if I post a bit more of the code then it might make more sense?



function switchOn(tab,contents) {

// Pass it a tab ID and a contents ID, single-quoted:
// switchOn('tab1','contents1')

// Sets all tabs and contents to inactive state, then
// activates the tab/contents passed as parameters

switchAllOff();
document.getElementById(tab).className = 'selectedtab';
document.getElementById(contents).className = 'selectedcontents';
}

[fredmv]

You're quite welcome. The DOM is an acronym for the Document Object Model; it means, in basic terms, a tree structure of the HTML nodes in which make up the document. There is a lot of information on it here (http://www.w3.org/DOM/). For your other question, refer to the code I previously provided, it should work just fine.

[Matt Phelps]

Hmmmm, well this is what I have in there now. I might have misunderstood quite what you were suggesting - or interpreting it too simply - but now the script doesn't work at all really.


function switchOn(tab,contents) {

// Pass it a tab ID and a contents ID, single-quoted:
// switchOn('tab1','contents1')

// Sets all tabs and contents to inactive state, then
// activates the tab/contents passed as parameters

switchAllOff();
document.getElementById(tab).className = 'selectedtab';
//document.getElementById(contents).className = 'selectedcontents';
onload = function() { document.getElementById('contents1').className = 'selectedcontents'; }
}




<td id="contentscell" colspan="15">
<div class="contents" id="contents1"><?php include "update/update.php?category=training&playout=1" ; ?></div>
<div class="contents" id="contents2"><?php include "forum/forumlist.php" ; ?></div>
<div class="contents" id="contents3"><?php include "update/test.php" ; ?></div>
<div class="contents" id="contents4"><?php include "update/test.php" ; ?></div>
<div class="contents" id="contents5"><?php include "update/test.php" ; ?></div>
<div class="contents" id="contents6"><?php include "update/test.php" ; ?></div>
<div class="contents" id="contents7"><?php include "update/test.php" ; ?></div>
<div class="contents" id="contents8"><?php include "update/test.php" ; ?></div>
</td>

[fredmv]

function switchOn(tab,contents)
{

// Pass it a tab ID and a contents ID, single-quoted:
// switchOn('tab1','contents1')

// Sets all tabs and contents to inactive state, then
// activates the tab/contents passed as parameters
switchAllOff();

document.getElementById(tab).className = 'selectedtab';
document.getElementById('contents1').className = 'selectedcontents';
}