By vaseline28 on Sep 09, 2008Script is relatively simple, credit should be shown to several tutorials, particularly those on AJAX in www.w3schools.com I HAVE used my own work though :-)
Preview: Getting a new one up tomorrow.
There are a few rules with this, the id where the text is destined MUST be EMPTY before the script is called, it decides whether to show or hide the text depending on whether content exists in this location (variable 'a').
Unless you wish to change the .value to .innerHTML in the cases of changing to "Hide Text" or "Show Text" they must have the text in them added like this:
<input type='button' **value='Show Text'** />
To call the function, I recommend adding a line like:
<input onclick='ajaxToggle_Text("Text_Arrives_here","parToggle_Content.php?AJAX_callType=Show","Show/Hide")' type="button" id="Show/Hide" value="Show Text" />
What I find I love about AJAX is that the page does not need to be refreshed for the new content to show, the .php file needs updating, then the next time you generate the content, the new content shows!
<script type="text/javascript">
function ajaxToggle_Text(a,b,c)
{
// Variable Descriptions: 'a' should be the location in the document that the text is sent to. 'b' should be the .php document from which to extract the data.
// 'c' is the location where the command has been called from (in example, the id of the button).
// Detect Browser for XMLHttpRequest
if (document.getElementById(a).innerHTML=="")
{
document.getElementById(c).value="Hide Text";
var xmlHttp;
if (navigator.appName == "Microsoft Internet Explorer")
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
else
xmlHttp=new XMLHttpRequest();
// End of Browser Detect
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById(a).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",b,true);
xmlHttp.send(null);
}
else
{
document.getElementById(a).innerHTML="";
document.getElementById(c).value="Show Text";
}
}
</script>
still waiting for the preview that says, will do one tomorrow ;) hehehe :)
although, i do like the look of the script, especially how you select which page you want.... i never thought of doing it like this, how i've always done it is, created another php page, that, when called upon, gets $_GET['page'] and then gets the contents of $_GET['page'] and displays that :)
Either way, yours is a good script, :) Good job
I've worked out the problem :-)
IE does not like this line:
document.getElementById(a).innerHTML=xmlHttp.responseText;
if that is changed to:
document.write(xmlHttp.responseText);
IE is fine, but the rest of the toggling does not work. Can you see the problem with the line? The error message is "Unknown runtime Error".
The HTML used in the example is:
<body>
<input onclick='ajaxToggle_Text("Text_Arrives_here","parToggle_Content.php?AJAX_callType=Show","Show/Hide")' type="button" id="Show/Hide" value="Show Text" />
<p id="Text_Arrives_here"></p>
</body>
with 2 links to stylesheets in the
section.// Variable Descriptions: 'a' should be the location in the document that the text is sent to. 'b' should be the .php document from which to extract the data.
// 'c' is the location where the command has been called from (in example, the id of the button).
// Detect Browser for XMLHttpRequest
The Detect Browser section is necessary as IE needs the XMLHttpRequest sent differently to other browsers. The rest of that comment describes the variables needing use.