lovephp Posted October 12, 2012 Share Posted October 12, 2012 friends how to add i hide option on the same button? and also whichever buton clicked it shows keep showing its content even after the page is refreshed? <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $(".buttons").click(function () { var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> </head> <body> <div id="buttonsDiv"> <input type="button" id="button1" class="buttons" value="div1"></input> <input type="button" id="button2" class="buttons" value="div2"></input> <input type="button" id="button3" class="buttons" value="div3"></input> <input type="button" id="button4" class="buttons" value="div4"></input> </div> <div> <div id="div1" style="display:none"> Hello World </div> <div id="div2" style="display:none"> Test </div> <div id="div3" style="display:none"> Another Test </div> <div id="div4" style="display:none"> Final Test </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 I've got a correct result. index.php <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script> <script language="Javascript" type="text/javascript"> <!-- function swapContent(cv) { //$("#myDiv").html('<img src="loader.gif"/>').show(); var url = "test.php"; $.post(url, {contentVar: cv} ,function(data) { console.log(data); //$("#myDiv").html(data).show(); }); } //--> </script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con1');">Content1</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con2');">Content2</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html> test.php <?php if (isset($_POST['contentVar'])) if($_POST['contentVar'] == 'con1') echo 'Con1 is here'; elseif($_POST['contentVar'] == 'con2') echo 'Con2 is here'; elseif($_POST['contentVar'] == 'con3') echo 'Con3 is here'; else echo 'Something else'; ?> Quote Link to comment Share on other sites More sharing options...
Christian F. Posted October 13, 2012 Share Posted October 13, 2012 Bad code, bad! ( ) onclick="return false" onmousedown="javascript:swapContent('con1');" "Javascript:" should not be used in the intrinsic event handlers, in fact it should never be used at all. The line(s) in question should have looked like this: <a href="?contentVar=con1" onclick="return swapContent('con1');">Content 1</a> Then have the swapContent () function return false on success. Plus changing the PHP and AJAX call to use GET, and not POST. Doing it this way means the page will work, even if the user doesn't have JS (enabled, or at all). Quote Link to comment Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 Bad code, bad! ( ) onclick="return false" onmousedown="javascript:swapContent('con1');" Christian, it's not my code. I posted it into a wrong section! This answer belongs to here -> http://forums.phpfre...lease-help-fix/ @lovephp I thought you 're double posting, ignore my answer for that, please. Thank you j. Quote Link to comment Share on other sites More sharing options...
lovephp Posted October 13, 2012 Author Share Posted October 13, 2012 I've got a correct result. index.php <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script> <script language="Javascript" type="text/javascript"> <!-- function swapContent(cv) { //$("#myDiv").html('<img src="loader.gif"/>').show(); var url = "test.php"; $.post(url, {contentVar: cv} ,function(data) { console.log(data); //$("#myDiv").html(data).show(); }); } //--> </script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con1');">Content1</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con2');">Content2</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html> test.php <?php if (isset($_POST['contentVar'])) if($_POST['contentVar'] == 'con1') echo 'Con1 is here'; elseif($_POST['contentVar'] == 'con2') echo 'Con2 is here'; elseif($_POST['contentVar'] == 'con3') echo 'Con3 is here'; else echo 'Something else'; ?> don't seem to be working mate and my code above is different this is another topic not double post Quote Link to comment Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 Sorry about that The code above works just fine, but to this topic -> http://forums.phpfreaks.com/topic/269366-switch-content-not-working-please-help-fix/ About the real one you could use "this" javascript object and css property to hide this button. Try, <script> $(document).ready(function(){ $(".buttons").click(function () { $(this).css("display", "none"); var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> Quote Link to comment Share on other sites More sharing options...
lovephp Posted October 13, 2012 Author Share Posted October 13, 2012 Sorry about that The code above works just fine, but to this topic -> http://forums.phpfre...lease-help-fix/ About the real one you could use "this" javascript object and css property to hide this button. Try, <script> $(document).ready(function(){ $(".buttons").click(function () { $(this).css("display", "none"); var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> no no i do not want to hide buttons i wanted to hide the content if click again on the button Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.