homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Javascript inside PHP Tag
php, javascript, hide, show
Petervn




msg:4461955
 8:33 am on Jun 6, 2012 (gmt 0)

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




msg:4461990
 10:19 am on Jun 6, 2012 (gmt 0)

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




msg:4462125
 5:33 pm on Jun 6, 2012 (gmt 0)

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




msg:4462135
 6:09 pm on Jun 6, 2012 (gmt 0)

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




msg:4462140
 6:40 pm on Jun 6, 2012 (gmt 0)

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




msg:4462510
 3:27 pm on Jun 7, 2012 (gmt 0)

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




msg:4462826
 7:37 am on Jun 8, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved