hmm ! why does the file not load in its own div ?

ajoo · 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 !

ajoo · April 27, 2015

Hi ! Still awaiting for someone to enlighten me on this one. Thanks all.

Ch0cu3r · 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.

ajoo · 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 !

Sign In

hmm ! why does the file not load in its own div ?

Recommended Posts

ajoo

Link to comment

Share on other sites

ajoo

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

ajoo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information