Javascript inside PHP Tag

php, javascript, hide, show

[Petervn]

I am hiding/showing divs using Javascript. I have added php pagenitation to the page and when I browse through the pagenitation, it jumps back to the first div and not the currently viewed div. Any suggestions how to get the Javascript to work inside the php tags?
Herewith the coding:

JAVASCRIPT INSIDE HEADER:
//show div and hide another
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3','content4','content5'];
for (var j=0;ji<divs.length;j++)
{
if (onediv != document.getElementById(divs[j]))
{
document.getElementById(divs[j]).style.display='none';
}
}
onediv.style.display = 'block';
}

NAVIGATION:
<!--navigation menu-->
<div class="menu2">
<a href="javascript:showHide('content1');">1</a>
<a href="javascript:showHide('content2');">2</a>
<a href="javascript:showHide('content3');">3</a>
<a href="javascript:showHide('content5');">5</a>
</div>
<!--end navigation menu-->

THE ACTUAL DIV:
<div class="topcontent" id="content5" style="display:none">

AND PAGINATION PHP:
echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage' 'javascript:showHide('content5');'><</a> ";

</div>

I cannot get the Javascript to work inside the PHP tag
Please help

[Sean_Dewlin]

JavaScript should be inserted as HTML. I'm not sure, but you can try this. I'd also suggest to use "onclick" parameter.

echo "<a href=\"?currentpage=".$prevpage."\" onclick=\"showHide('content5');\">Link!</a>";

[rocknbil]

Welcome aboard Petervn, javascript is not a URL. Put a real URL in there and return false from the function to stop it from navigating. This is important.

Your function is not working because you're comparing a dom object to another, you want to compare the ID selectors as strings.

//change this too - more economical 
function showHide(d) { 
 var onediv = document.getElementById(d); 
 var divs=['content1','content2','content3','content4','content5']; 
 for (var j=0;j<divs.length;j++) { 
 // Always, always, always check for existence of the objects first 
 var currdiv = document.getElementById(divs[j]); 
 if (onediv and currdiv) { 
  // It will only set "onediv" to block - try it 
  currdiv.style.display = (divs[j] != d)?'none':'block'; 
 } 
 } 
} 

<div class="menu2">
<a href="CREATE-ALTERNATE-CONTENT.html" onclick="return showHide('content1');">1</a>
<a href="CREATE-ALTERNATE-CONTENT.html" onclick="return showHide('content2');">2</a>
<a href="CREATE-ALTERNATE-CONTENT.html" onclick="return showHide('content3');">3</a>
<a href="CREATE-ALTERNATE-CONTENT.html" onclick="return showHide('content5');">5</a>
</div>

echo " <a href=\"{$_SERVER['PHP_SELF']}?currentpage=$prevpage\" onclick=\"return showHide('content5');\"></a> ";

You should never use self either, Google for "PHP_SELF vulerabilties" . . .

[Petervn]

Thank you for your replies Sean_Dewlin and rocknbil

I am very new to Javascript and can help myself as far as my ability to Google. Therefor rocknbil a lot of what you have mentioned I will have scratch my head to make sense from it.

I am going to give your replies a try - will let you know of the results

[Petervn]

Sean_Dewlin - unfortunately your suggestion was unsucsessful

rocknbil - Am I understanding correctly that when I add a real URL the page will have to refresh to get the content instead of just hiding or showing a div?

[rocknbil]

Sean_Dewlin's solution didn't work **only** because the bit about returning false was missed.

when I add a real URL the page will have to refresh to get the content instead of just hiding or showing a div?

No. You can still have the hidden content "in the page," but the alternate content is an expanded version similar to the content in the div.

Scenario:

<a href="some-alternate-content.html">test</a>

Following that link (note I didn't say "click" :-) ) will load the page some-alternate-content.html.

<a href="some-alternate-content.html" onclick="somefunction();">test</a>

Following that link will execute the Javascript function somefunction, but it will simultaneously navigate the the page. To avoid this, many coders will do things like this:

<a href="javascript:somefunction();">test</a>
<a href="javascript:void();" onclick="somefunction();">test</a>
<a href="#" onclick="somefunction();">test</a> <!-- navigates to page top, but doesn't leave page -->

All of these "work." What they DON'T do is consider a larger picture, which involves the overall health of your page.

- Javascript disabled or a client that doesn't execute Javascript: Your visitor gets nothing at all following these links.

- Decreased site content: a search engine can't follow these links, they don't go anywhere. You're missing an opportunity to provide more content to them.

- Decreased links: given the above, your site now has less internal linking.

However, this

<a href="some-alternate-content.html" onclick="somefunction(); return false;">test</a>

or this

<a href="some-alternate-content.html" onclick="return somefunction();">test</a> <!-- as above, return false from the function itself -->

Solves all three issues. Returning false from any "natural" navigation object (works on forms too) prevents the browser from executing the normal action. As anything that is well built, it requires a little more work, but it's worth it.

[Petervn]

Thank you rocknbill for your input, it is greatly appreciated. I will try your suggestions.