Connecting Tech Pros Worldwide Forums | Help | Site Map

Help - change text on click - text has another onclick inside with php variables

Newbie
 
Join Date: Oct 2008
Posts: 28
#1: Nov 27 '08
Help - change text on click - text has another onclick inside with php variables
----------

I think what I'm trying to do is simple.

I have a 2 buttons on a page. 1 button allows a thread of messages to be displayed, the other button collapses that same thread. Works fine.

I was asked if I can just make it one button.

I've played around with a few java scripts. they seem to all work fine until i put my added codes in the text line that is supposed to be replaced. Any help? Here is all pertinent code:

Original Code with both buttons which works fine ritght no without errors:
Expand|Select|Wrap|Line Numbers
  1. <td style="background:black;border: 1pt solid #CC0033; border-color: #CC0033;" onmouseover="this.style.backgroundColor='#333333'; this.style.cursor='hand'; this.style.color='#FFFFFF';" onmouseout="this.style.backgroundColor='#000000';">
  2.  
  3. <!-- START - Expand button -->
  4.  
  5. <A Title="Expand and show thread" onclick="setVisibility('sub<? echo $id; ?>', 'inline');"><font size=1><B>\/</b></font></a>
  6.  
  7. <!-- END - Expand button -->
  8.  
  9. </td>
  10. <td style="background:black;border: 1pt solid #CC0033; border-color: #CC0033;" onmouseover="this.style.backgroundColor='#333333'; this.style.cursor='hand'; this.style.color='#FFFFFF';" onmouseout="this.style.backgroundColor='#000000';">
  11.  
  12. <!-- START - Collapse button -->
  13.  
  14. <a TITLE="Collapse and hide thread" onclick="setVisibility('sub<? echo $id; ?>', 'none');"><font size=1><b>/\</b></font></a>
  15.  
  16. <!-- END - Collapse button -->
  17.  
  18. </td>    
  19.  
  20.  
  21.  
Here is the java code i tried to implement:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>        
  3.     <script type="text/javascript">
  4.         function exp(obj) {
  5.             if(obj.oldText){
  6.                 obj.innerHTML = obj.oldText;
  7.                 obj.oldText = null;
  8.             } else {
  9.                 obj.oldText = obj.innerHTML;
  10.                 obj.innerHTML = '<a TITLE="Collapse and hide thread" onclick="setVisibility(\'sub<? echo $id; ?>\', \'none\');"><font size=1><b>/\\</b></font></a>';
  11.             }
  12.         }
  13.     </script>
  14.     <body>
  15.         <span onclick="javascript:exp(this);">
  16.         <A Title="Expand and show thread" onclick="setVisibility('sub<? echo $id; ?>', 'inline');" ><font size=1><B>\/</b></font></a>
  17.         </span>
  18.     </body>
  19. </html>
  20.  
  21.  
The javascript works well when I'm only putting plain text. but when I incorporate it in my own code, it breaks. It does still display the thread, but it does not change the text. It also is picking up the php variables in each instance...but it wont change the text.

I want the text to change from " \/ " and then to " /\ " back and forth when you click. I've tried a number of javascripts i've found out there, this one seems to get me the closest, but its not working and its also spitting errors, although I'm not a java expert.

Someone tell me theres an easier way! Any help greatly appreciated. If I left anything out, please let me know, and I will give any info I can.

(I'll be on for the next 2-3 hours, then i'll be back on sunday so bear with me on response times please if its after tonight! thanks!)

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Nov 27 '08

re: Help - change text on click - text has another onclick inside with php variables


Some suggestions:

1. Rather than using a link, use a button:
Expand|Select|Wrap|Line Numbers
  1. <input id="expcolbtn" type="button" value="\/" onclick="setVisibility(...)">
2. Rather than using a custom property oldText, check the elem.style.display property. You could also use your own function getVisibility() for this.
3. When the thread expands/collapses, change the value of the button by accessing it and setting the value:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("expcolbtn").value = "/\";
Newbie
 
Join Date: Oct 2008
Posts: 28
#3: Nov 28 '08

re: Help - change text on click - text has another onclick inside with php variables


Thank you for the quick response.

The only problem with using a "button" is the fact that all the other buttons are 'tables' which i have formatted to match the page colors.

Is there a way to format the submit button to any color i want? basically to look like a small box which changes background color when you hover over it? ...also of course I would want to change the border line & color as well as the font color etc...

I ran into that problem during my hunt and looked for a work around. I tried making a graphic that looks like the other buttons which are 'tables' but I ended up having a couple problems with it, mainly the graphic not looking exactly like the other buttons, and placement issues among other things. Plus I figured it would load faster without any images.

Any suggestions? I'm thinking of giving the image creation deal one more shot using acoder's suggestion

Thanks again... (I won't be able to try it until sunday *sigh*)


Quote:

Originally Posted by acoder View Post

Some suggestions:

1. Rather than using a link, use a button:

Expand|Select|Wrap|Line Numbers
  1. <input id="expcolbtn" type="button" value="\/" onclick="setVisibility(...)">
2. Rather than using a custom property oldText, check the elem.style.display property. You could also use your own function getVisibility() for this.
3. When the thread expands/collapses, change the value of the button by accessing it and setting the value:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("expcolbtn").value = "/\";

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Nov 29 '08

re: Help - change text on click - text has another onclick inside with php variables


You can style a button, but it's unreliable. Images would work best, but if you decide to change the colours, you'd have problems. So, I guess, in that case, a link would give most flexibility.

Suggestions 2 and 3 still apply except that a link doesn't have a value, so you'd set the innerHTML (or DOM) property instead.
Newbie
 
Join Date: Oct 2008
Posts: 28
#5: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


Thanks again for the reply.

So I tried the 'button' suggestion. I got it to work but it only works once. (user clicks expand, the button changes from "\/" to "/\" , but once clicked again it didn't go back to "\/"

I readup a bit about "getElementById" and javascript in general and I came up with this bit of code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <head>
  3. <script language="JavaScript">
  4. function showVisible(id, expcolid) {
  5. document.getElementById(id).style.display = "inline";
  6. document.getElementById(expcolid).value = "/\\";
  7. document.getElementById(expcolid).onClick = hideVisible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>');
  8. }
  9. </script>
  10.  
  11. <script language="JavaScript">
  12. function hideVisible(id, expcolid) {
  13. document.getElementById(id).style.display = "none";
  14. document.getElementById(expcolid).value = "\\/";
  15. document.getElementById(expcolid).onClick = showVisible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>');
  16. }
  17. </script>
  18.  
  19. </head>
  20. <body>
  21. <?php
  22. $id = 1;
  23. ?>
  24.  
  25.  
  26.     <input id="expcolid<? echo $id; ?>" type="button" value="\/" onClick="showVisible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>');" >
  27. <P>
  28.          <div style="display:none;" id="sub<? echo $id; ?>">SHOW TEST</div>
  29.  
  30.          </body>
  31.  
  32.          </html>
  33.  
  34.  
  35.  
  36.  
The main problem I'm running into now is:
the "onClick" code needs to change when the button is clicked. So i tried the "onclick" function in javascript, not sure if that actually works tho, lol well it doesn't, but it looks like it should. Any ideas?

I also tried this:

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <?php
  4. $id = 1;
  5. ?>
  6.     <script language="JavaScript">
  7. function setVisibility(id, visibility, expcolid) {
  8. document.getElementById(id).style.display = visibility;
  9.  
  10. document.getElementById(expcolid).innerHTML = "<a TITLE=\"Collapse and hide thread\" onClick=\"setVisibility('sub<? echo $id; ?>', 'none', 'expcolid<? echo $id; ?>');\"><font size=1><b>/\\</b></font></a>";
  11. }
  12. </script>
  13.  
  14.  
  15.  
  16.  
  17. <body>
  18. <?php
  19. $id = 1;
  20. ?>
  21.  
  22.         <div id="expcolid<? echo $id; ?>"><A Title="Expand and show thread" onClick="setVisibility('sub<? echo $id; ?>', 'inline', 'expcolid<? echo $id; ?>');"><font size=1><B>\/</b></font></a></div>
  23.     <P>
  24.          <div id="sub<? echo $id; ?>" style="display:none;">SHOW TEST</div>
  25.  
  26.          </body>
  27.  
  28.          </html>
  29.  
  30.  
  31.  
the above works but i get an error on the second click...

I'll keep hacking at it. Any suggestions?


Quote:

Originally Posted by acoder View Post

You can style a button, but it's unreliable. Images would work best, but if you decide to change the colours, you'd have problems. So, I guess, in that case, a link would give most flexibility.

Suggestions 2 and 3 still apply except that a link doesn't have a value, so you'd set the innerHTML (or DOM) property instead.

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


Change line 7 to something like:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(expcolid).onclick = function() {
  2.     hideVisible(id, expcolid);
  3. }
Notice the changes:
1. onclick (lower case "c")
2. function() - anonymous function, so setting onclick to a function reference rather than the function call (which would set it to the result and run immediately)
3. Re-use of id and expolid passed into function instead of the PHP (which would be fixed).

Add something similar for line 15.
Newbie
 
Join Date: Oct 2008
Posts: 28
#7: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


Acoder, nice man you are the man =) thanks for sticking with me on this one....the new changes worked perfect. I put in a little more effort on the image button and it looks pretty good. I actually tried taking it a step further to get my highlight effect....but i'm not sure I can do what i'm trying to do. Here's my code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <head>
  3.     <script language="JavaScript">
  4. function showVisible(id, expcolid) {
  5. document.getElementById(id).style.display = "inline";
  6. document.getElementById(expcolid).src = "collapse.bmp";
  7. document.getElementById(expcolid).onmouseover = "this.src=collapse-hover.bmp";
  8. document.getElementById(expcolid).onmouseout = "this.src=collapse.bmp";
  9. document.getElementById(expcolid).onclick = function () { hideVisible(id, expcolid); }
  10. }
  11. </script>
  12.  
  13.     <script language="JavaScript">
  14. function hideVisible(id, expcolid) {
  15. document.getElementById(id).style.display = "none";
  16. document.getElementById(expcolid).src = "expand.bmp";
  17. document.getElementById(expcolid).onmouseover = "this.src=expand-hover.bmp";
  18. document.getElementById(expcolid).onmouseout = "this.src=expand.bmp";
  19. document.getElementById(expcolid).onclick = function () { showVisible(id, expcolid); }
  20. }
  21. </script>
  22.  
  23. </head>
  24. <body>
  25. <?php
  26. $id = 1;
  27. ?>
  28.  
  29.  
  30.     <input id="expcolid<? echo $id; ?>" type="image" src="expand.bmp" onmouseover="this.src='expand-hover.bmp'" onmouseout="this.src='expand.bmp'" onclick="showVisible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>');" >
  31. <P>
  32.          <div style="display:none;" id="sub<? echo $id; ?>">SHOW TEST</div>
  33.  
  34.          </body>
  35.  
  36.          </html>
  37.  
  38.  
  39.  
  40.  
Everything works well except for the hover effect. It only works once. After I click the button, and it changes to the next button, i no longer get the hover effect. Obviously my javascript is not taking that piece. I can do without the hover effect but it would make everything fit perfectly if its possible.

Long story short, is this possible?:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(expcolid).onmouseover = "this.src=expand-hover.bmp";
  2. document.getElementById(expcolid).onmouseout = "this.src=expand.bmp";
  3.  
I tried a few variations of the above such as removing the single quotes, or adding ".this.src" to the document.getElementById line....Shooting in the dark on those tho....

Thanks again tho, i'll keep digging, If I find the answer b4 a response, i'll post it.


Quote:

Originally Posted by acoder View Post

Change line 7 to something like:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(expcolid).onclick = function() {
  2.     hideVisible(id, expcolid);
  3. }
Notice the changes:
1. onclick (lower case "c")
2. function() - anonymous function, so setting onclick to a function reference rather than the function call (which would set it to the result and run immediately)
3. Re-use of id and expolid passed into function instead of the PHP (which would be fixed).

Add something similar for line 15.

Newbie
 
Join Date: Oct 2008
Posts: 28
#8: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


I tried changing the onmouseover and onmouseout lines to functions as acoder showed me with the onclick issue above and it worked =)

Appreciate all the help, I feel like I knew little to nothing about javascript before and now I feel like I have a much better understanding.

here's is the final code which works:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <head>
  3.     <script language="JavaScript">
  4. function showVisible(id, expcolid) {
  5. document.getElementById(id).style.display = "inline";
  6. document.getElementById(expcolid).src = "collapse.bmp";
  7. document.getElementById(expcolid).onmouseover = function () { this.src='collapse-hover.bmp'; }
  8. document.getElementById(expcolid).onmouseout = function () { this.src='collapse.bmp'; }
  9. document.getElementById(expcolid).onclick = function () { hideVisible(id, expcolid); }
  10. document.getElementById(expcolid).title = "Collapse and hide thread";
  11. }
  12. </script>
  13.  
  14.     <script language="JavaScript">
  15. function hideVisible(id, expcolid) {
  16. document.getElementById(id).style.display = "none";
  17. document.getElementById(expcolid).src = "expand.bmp";
  18. document.getElementById(expcolid).onmouseover = function () { this.src='expand-hover.bmp'; }
  19. document.getElementById(expcolid).onmouseout = function () { this.src='expand.bmp'; }
  20. document.getElementById(expcolid).onclick = function () { showVisible(id, expcolid); }
  21. document.getElementById(expcolid).title = "Expand and show thread";
  22. }
  23. </script>
  24.  
  25. </head>
  26. <body>
  27. <?php
  28. $id = 1;
  29. ?>
  30.  
  31.  
  32.     <input id="expcolid<? echo $id; ?>" TITLE="Expand and show thread" type="image" src="expand.bmp" onmouseover="this.src='expand-hover.bmp'" onmouseout="this.src='expand.bmp'" onclick="showVisible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>');" >
  33. <P>
  34.          <div style="display:none;" id="sub<? echo $id; ?>">SHOW TEST</div>
  35.  
  36.          </body>
  37.  
  38.          </html>
  39.  
  40.  
  41.  
Markus's Avatar
Moderator
 
Join Date: Jun 2007
Location: York, England, with wolves.
Posts: 4,949
#9: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


Expand|Select|Wrap|Line Numbers
  1. <script language="javascript"> 
  2.  
is deprecated. Use
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
Markus.
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Dec 1 '08

re: Help - change text on click - text has another onclick inside with php variables


Quote:

Originally Posted by wizdom View Post

I tried changing the onmouseover and onmouseout lines to functions as acoder showed me with the onclick issue above and it worked =)

Appreciate all the help, I feel like I knew little to nothing about javascript before and now I feel like I have a much better understanding.

Glad you got it working. You could improve this further by combining both functions into one and adding a parameter for hiding/displaying.
Newbie
 
Join Date: Oct 2008
Posts: 28
#11: Dec 2 '08

re: Help - change text on click - text has another onclick inside with php variables


I've been staring at the 2 functions for a little bit now. I'm racking my brain on how I would switch back and forth between both functions, but in one function.

I think it may have finally sunk in; adding another parameter like


Expand|Select|Wrap|Line Numbers
  1. visible(id, expcolid, show-or-hide); 
I guess I would throw an IF statement in to say if the "show-or-hide"
is either 'show' or 'hide' and just dump the 2 functions in the IF statement.

It works fine as is, but I am intrigued on how to do it.

I'll be trying the one function tomorrow.

I also made the script type change Markus posted.

Thanks again!

Quote:

Originally Posted by acoder View Post

Glad you got it working. You could improve this further by combining both functions into one and adding a parameter for hiding/displaying.

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Dec 2 '08

re: Help - change text on click - text has another onclick inside with php variables


Yes, use a boolean for the third parameter and pass it true or false depending on what you want to do: show or hide.
Newbie
 
Join Date: Oct 2008
Posts: 28
#13: Dec 4 '08

re: Help - change text on click - text has another onclick inside with php variables


Got it on the 2nd try =) I just used the same syntax for the boolean as I would with php and hoped for the best.

Would have had it on the first try but I had

Expand|Select|Wrap|Line Numbers
  1. if (showorhide = 'show') {
instead of
Expand|Select|Wrap|Line Numbers
  1. if (showorhide == 'show') {
noob rookie mistake =}

Here's the code I ended up with and once again I really appreciate all the help. I've learned a lot.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <head>
  3.     <script language="JavaScript">
  4. function Visible(id, expcolid, showorhide) {
  5.  
  6. if (showorhide == 'show') {
  7. document.getElementById(id).style.display = "inline";
  8. document.getElementById(expcolid).src = "collapse.bmp";
  9. document.getElementById(expcolid).onmouseover = function () { this.src='collapse-hover.bmp'; }
  10. document.getElementById(expcolid).onmouseout = function () { this.src='collapse.bmp'; }
  11. document.getElementById(expcolid).onclick = function () { Visible(id, expcolid,'hide'); }
  12. document.getElementById(expcolid).title = "Collapse and hide thread";
  13.  
  14. }
  15. else { 
  16.  
  17. document.getElementById(id).style.display = "none";
  18. document.getElementById(expcolid).src = "expand.bmp";
  19. document.getElementById(expcolid).onmouseover = function () { this.src='expand-hover.bmp'; }
  20. document.getElementById(expcolid).onmouseout = function () { this.src='expand.bmp'; }
  21. document.getElementById(expcolid).onclick = function () { Visible(id, expcolid,'show'); }
  22. document.getElementById(expcolid).title = "Expand and show thread";
  23. }
  24.  
  25. }
  26.  
  27. </script>
  28.  
  29. </head>
  30. <body>
  31. <?php
  32. $id = 1;
  33. ?>
  34.  
  35.  
  36.     <input id="expcolid<? echo $id; ?>" TITLE="Expand and show thread" type="image" src="expand.bmp" onmouseover="this.src='expand-hover.bmp'" onmouseout="this.src='expand.bmp'" onclick="Visible('sub<? echo $id; ?>', 'expcolid<? echo $id; ?>', 'show');" >
  37. <P>
  38.          <div style="display:none;" id="sub<? echo $id; ?>">SHOW TEST</div>
  39.  
  40.          </body>
  41.  
  42.          </html>
  43.  
  44.  
  45.  
  46.  
Quote:

Originally Posted by acoder View Post

Yes, use a boolean for the third parameter and pass it true or false depending on what you want to do: show or hide.

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Dec 4 '08

re: Help - change text on click - text has another onclick inside with php variables


You could still improve it further or at least cut the number of lines if you use a boolean for the actual parameter, i.e. call it show and pass it true (without quotes) for showing and false for hiding. Then you can use the shorthand if-else syntax: (bool)?what to do if true:else here, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(expcolid).style.display = (show)?"inline":"none";
PS. you forgot Markus' earlier advice about the language attribute.
Newbie
 
Join Date: Oct 2008
Posts: 28
#15: Dec 7 '08

re: Help - change text on click - text has another onclick inside with php variables


hmm nice
Ok thanks will give that a shot tomorrow.

Quote:

Originally Posted by acoder View Post

You could still improve it further or at least cut the number of lines if you use a boolean for the actual parameter, i.e. call it show and pass it true (without quotes) for showing and false for hiding. Then you can use the shorthand if-else syntax: (bool)?what to do if true:else here, e.g.

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(expcolid).style.display = (show)?"inline":"none";
PS. you forgot Markus' earlier advice about the language attribute.

Newbie
 
Join Date: Oct 2008
Posts: 28
#16: Jan 26 '09

re: Help - change text on click - text has another onclick inside with php variables


Took me a few to get back to this.....but I'm still intrigued...

I would like to use the inline boolean.

I'm trying this code here but it's only working halfway. I'm sure something is up with my "function" bool

Can I do this....

Here's my code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript">
  3. function Visible(id, expcolid, show) {
  4. document.getElementById(id).style.display = (show)?"inline":"none";
  5. document.getElementById(expcolid).src = (show)?"collapse.bmp":"expand.bmp";
  6. document.getElementById(expcolid).onmouseover = (show)?function () { this.src='collapse-hover.bmp'; }:function () { this.src='expand-hover.bmp'; }
  7. document.getElementById(expcolid).onmouseout = (show)?function () { this.src='collapse.bmp'; }:function () { this.src='expand.bmp'; }
  8. document.getElementById(expcolid).onclick = (show)?function () { Visible(id, expcolid,'true'); }:function () { Visible(id, expcolid,'false'); }
  9. document.getElementById(expcolid).title = (show)?"Collapse and hide thread":"Expand and show thread";
  10. }
  11. </script>
  12.  
Thanks for all the help once again
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#17: Jan 26 '09

re: Help - change text on click - text has another onclick inside with php variables


Don't pass the string 'false' or 'true'. Pass the literal value true or false without quotes.
Newbie
 
Join Date: Oct 2008
Posts: 28
#18: Jan 26 '09

re: Help - change text on click - text has another onclick inside with php variables


Quote:

Originally Posted by acoder View Post

Don't pass the string 'false' or 'true'. Pass the literal value true or false without quotes.

Thanks again, that did the trick...here's the final:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function Visible(id, expcolid, show) {
  3. document.getElementById(id).style.display = (show)?"inline":"none";
  4. document.getElementById(expcolid).src = (show)?"collapse.bmp":"expand.bmp";
  5. document.getElementById(expcolid).onmouseover = (show)?function () { this.src='collapse-hover.bmp'; }:function () { this.src='expand-hover.bmp'; }
  6. document.getElementById(expcolid).onmouseout = (show)?function () { this.src='collapse.bmp'; }:function () { this.src='expand.bmp'; }
  7. document.getElementById(expcolid).onclick = (show)?function () { Visible(id, expcolid,false); }:function () { Visible(id, expcolid,true); }
  8. document.getElementById(expcolid).title = (show)?"Collapse and hide thread":"Expand and show thread";
  9. }
  10. </script>
  11.  
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#19: Jan 27 '09

re: Help - change text on click - text has another onclick inside with php variables


You're welcome. Glad you got it sorted.
Reply


Similar JavaScript / Ajax / DHTML bytes