ajoo Posted April 24, 2015 Share Posted April 24, 2015 Hi all ! Here's a small piece of code that seems to work fine and returned data via ajax seems to be fine. However the include that's supposed to load the file based on the returned data value is not showing up in its own div. The loaded page displaces the Links and heading making them disappear from the page altogether. So the included file is showing up as its own page which is not what is intended. Here's the code for testLink3.php <DOCTYPE html> <head> <style> #controls{ width: 200px; min-height: 35px; color: #333; text-align: left; background: #c1c1c1; } .pages{ width: 200px; min-height: 60px; color: #fff; text-align: left; background: #fff000; } </style> </head> <body> <div id="myLink"><h2>GIG</h2></div> <div id="controls"> <a href="Page1.php" class="testClick">Link 1</a> <a href="Page2.php" class="testClick">Link 2</a> <a href="Page3.php" class="testClick">Link 3</a> </div> <div class = "pages"> <?php if(isset($_GET['dataval'])) { switch($_GET['dataval']) { case Page1: include_once("Page1.php"); break; case Page2: include_once("Page2.php"); break; case Page3: include_once("Page3.php"); break; } } ?> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(".testClick").click(function () { var dataval = $(this).attr("href"); var myhttp; if(window.XMLHttpRequest) { myhttp = new XMLHttpRequest(); } else { myhttp = new ActiveXObject("Microsoft.XMLHTTP"); } myhttp.onreadystatechange = function() { if(myhttp.readyState==4 && myhttp.status==200) { document.getElementById("myLink").innerHTML = myhttp.responseText; } } myhttp.open("GET",dataval,true); myhttp.send(); alert(dataval); // return(false); }); </script> </body> </html> Page1.php <?php echo "Hi! This is Page 1"; ?> Page2.php (same) <?php echo "Hello! This is Page 2"; ?> In this particular example I feel there is no need for the line document.getElementById("myLink").innerHTML = myhttp.responseText in my code. I came across it in a tutorial where the DIV contents needed to be changed / replaced by the myHttp.ResponseText. What I would like to know is that in this case (example above ) where I just need to return a value would the following code be the correct usage: myhttp.onreadystatechange = function() { if(myhttp.readyState==4 && myhttp.status==200) { myhttp.open("GET",dataval,true); myhttp.send(); alert(dataval); } } The alert, ofcourse, can be done away with. Thanks all ! Quote Link to comment https://forums.phpfreaks.com/topic/295812-hmm-why-does-the-file-not-load-in-its-own-div/ Share on other sites More sharing options...
ajoo Posted April 27, 2015 Author Share Posted April 27, 2015 Hi ! Still awaiting for someone to enlighten me on this one. Thanks all. Quote Link to comment https://forums.phpfreaks.com/topic/295812-hmm-why-does-the-file-not-load-in-its-own-div/#findComment-1510046 Share on other sites More sharing options...
Ch0cu3r Posted April 27, 2015 Share Posted April 27, 2015 If you are going to be loading the contents with ajax when the links are clicked then you need to override their default behavior, so the browser does not redirect the user when they are clicked. You can use return false; at the end of of your .click() function or call jquery's .preventDefault() function. Also if you are going to be using jquery then there is no need to initialize the xmlhttprequest object yourself. Jquery provides a very easy to use .ajax object for you. Quote Link to comment https://forums.phpfreaks.com/topic/295812-hmm-why-does-the-file-not-load-in-its-own-div/#findComment-1510069 Share on other sites More sharing options...
ajoo Posted April 28, 2015 Author Share Posted April 28, 2015 Hi Ch0cu3r, Thanks for the reply. I made the mistake of commenting out the return(false) instead of the alert. However what I am trying to achieve is still elusive. What I am trying to achieve is that when the link(s) are clicked, they should be disabled / become invisible but I am trying not to use jquery or javascript for the same. I am trying to pass a variable thru ajax (dataval) and based on its value display or bypass the div that holds the links. The value of the dataval should be changed by the including pages ( Page1.php, Page2.php) to re-enable the display of the links in the div if and when required. I thought that this should be not difficult but now it is making me wonder. Kindly help me figure this out if it can be achieved. Thanks ! Quote Link to comment https://forums.phpfreaks.com/topic/295812-hmm-why-does-the-file-not-load-in-its-own-div/#findComment-1510149 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.