By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,007 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,007 IT Pros & Developers. It's quick & easy.

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

P: 28
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!)
Nov 27 '08 #1
Share this Question
Share on Google+
18 Replies


acoder
Expert Mod 15k+
P: 16,027
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 = "/\";
Nov 27 '08 #2

P: 28
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*)


@acoder
Nov 28 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Nov 29 '08 #4

P: 28
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?


@acoder
Dec 1 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Dec 1 '08 #6

P: 28
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.


@acoder
Dec 1 '08 #7

P: 28
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.  
Dec 1 '08 #8

Markus
Expert 5K+
P: 6,050
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.
Dec 1 '08 #9

acoder
Expert Mod 15k+
P: 16,027
@wizdom
Glad you got it working. You could improve this further by combining both functions into one and adding a parameter for hiding/displaying.
Dec 1 '08 #10

P: 28
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!

@acoder
Dec 2 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Yes, use a boolean for the third parameter and pass it true or false depending on what you want to do: show or hide.
Dec 2 '08 #12

P: 28
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.  
@acoder
Dec 4 '08 #13

acoder
Expert Mod 15k+
P: 16,027
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.
Dec 4 '08 #14

P: 28
hmm nice
Ok thanks will give that a shot tomorrow.

@acoder
Dec 7 '08 #15

P: 28
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
Jan 26 '09 #16

acoder
Expert Mod 15k+
P: 16,027
Don't pass the string 'false' or 'true'. Pass the literal value true or false without quotes.
Jan 26 '09 #17

P: 28
@acoder
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.  
Jan 26 '09 #18

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad you got it sorted.
Jan 27 '09 #19

Post your reply

Sign in to post your reply or Sign up for a free account.