I have a jsp page(page1.jsp) that I use to query a database and display the result in a table with a tree structure. I use a jquery plugin called treetable to do this.
On a different page (page2.jsp) i use ajax to get the first page(page1.jsp). BUT the problem is that I loose the treetable structure when the page1.jsp is loaded in this new page2.jsp.This is the javascript function in page2.jsp used to load page1.jsp
function loadpage1()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","page1.jsp",true);
xmlhttp.send();
}
The treeTable is applied to a table with class like this
$(".tree").treeTable();
and I call the the ajax function like this
<table >
<tr onclick="loadpage1()" >
<td id="myDiv">Load</td>
</tr>
</table>
Is there a way to retain the tree structure in Page2.jsp?
Thanks in advance.
Related
I am trying to constantly update a DIV on our landing page to display the number people waiting in our live chat system queue.
The following code works fine in Chrome and updates every 5 seconds however in IE it obtains the value the first time it runs but then doesn't update.
<head>
<script>
setInterval(function() {
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("support_session_count");
txt=x[7].childNodes[0].nodeValue;
document.getElementById("Sessions_Waiting").innerText = txt;
}
}
xmlhttp.open("GET","http://my.server.com/command.xml",true);
xmlhttp.send();
}, 5000);
</script>
</head>
Your problem might be that IE caches the result. This is a common problem. You can either force the no-cache in your server, or append a unique postfix.
xmlhttp.open("GET","http://my.server.com/command.xml?nocache"+(new Date().getTime()),true);
Situation : I have a simple web-page with some form data and a submit button.
Earlier, on clicking the button the page used to redirect to another page, where the D3 chart was drawn. So far, so good.
Now, I want to draw this chart on a div within the same page. For this, I send an xmlHTTP request (to a PHP controller inside an MVC framework).
But the d3 chart is not displayed, and I get a very mangled html. How to solve this issue ?
Code:
function loadXMLDoc(newUrl)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").style.display = "block";
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
//xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
alert('Sending xmlHttp request');
//var url = window.location.pathname + '?q=' + "http://localhost/parentsconcernV2/index.php/analytics_storytrend/index/253/0/0/177";
xmlhttp.open("GET",newUrl,true);
xmlhttp.send();
}
I have searched but cannot find an answer to this issue. I am calling an asynchronous javascript file and the php page it calls makes a database entry twice.
window.onload = function(){
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert(xmlhttp.responseText);
//document.write(xmlhttp.responseText);
return;
}
}
xmlhttp.open("POST","http://example.com/api/tracking/index.php?cid=" + get["clientId"] + "&refUrl=" + encodeURIComponent(siteURL) + "&auk=" + get["auth"],true);
xmlhttp.send();
}
The index php page does an insert and returns the new row id. The alert in the successful response corresponds to that id, but there is another entry made one millisecond before. I assume this is happening because the page is being accessed until it gets the ready state of 4. The question is how do I stop or bypass this?
I'm making a quiz using AJAX to refresh each question. Instead of having individual AJAX calls for every different question in the quiz, I was wondering if there might be an easy way to use the same AJAX call but add a digit to the end of the filename each time.
So here is the basic AJAX request:
function nextQuestion()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("wordbank").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","question2.php",true);
xmlhttp.send();
}
As you can see the GET request pulls a file called question2.php
xmlhttp.open("GET","question2.php",true);
This is just a stand-in file at the moment, what I really want to do is something like this:
xmlhttp.open("GET","question" i++ ".php",true);
OK, I phrased that badly, but I'm not sure if this is the best way to do this. Essentially I want to have my button bound to the nextQuestion() function, but I want to work out a way to generate the next filename based on the one you're currently on.
Is this possible?
Another idea would be to give the button on each page a different ID and have the nextQuestion() function take that ID and use it to generate the next file. E.G if you are on question 2, the button would have an ID of question2. The ajax would take the last digit (2) and add 1 to it, so the filename called would be question3.php - and that is how it would know to move to the next question.
Here you go you can now place an ID on any button and have it take you to the correct page.
Your JS
function nextQuestion(buttonID)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("wordbank").innerHTML=xmlhttp.responseText;
}
}
var splitID = buttonID.split('_');
var questionID = splitID.pop();
xmlhttp.open("GET","question" + questionID + ".php",true);
xmlhttp.send();
}
Your Button
<button id="question_2" onClick="nextQuestion(this.id)">Go To Question 2</button>
or
<button id="question_14" onClick="nextQuestion(this.id)">Go To Question 14</button>
so build a string with the current index you have
xmlhttp.open("GET","question" + i + ".php",true);
You can have a global var with the current quest and do something like this:
var current_quest=1;
function nextQuestion()
{
...
xmlhttp.open("GET","question"+current_quest+".php",true);
xmlhttp.send();
window.current_quest++;
...
}
I am not familiar with ajax, I am in the process of learning, but as far as I know, it utilizes javascript to access the DOM, so my question is, is it possible to put an argument inside a function?
<script type="text/javascript">
function loadXMLDoc( * * this * * ) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", ""
test.php ? access = "**+this**", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
</script>
Shouldn't this work?
Thank you so much for your help.
this in JS changes according to the context you are running in. Depending on how you call it, it will change.
Read this article for more information : http://www.quirksmode.org/js/this.html
xmlhttp.open("GET",""test.php?access="**+this**",false);
This call wouldn't make much sense since this refers to an object, but what you're actually attempting to do is string concatenation (adding two strings together).
If you need to make variable calls, use a variable instead of the this keyword.
function loadXMLDoc(accessVar) {
....
xmlhttp.open("GET","test.php?access=" +accessVar ,false);
}
loadXMLDoc('accessIdentifier'); //passes the value 'accessIdentifier' to your method so it is passed along in the querystring.
You're close. It looks like you're using the example from w3schools. Be warned, that site is not always the most reliable source. See http://w3fools.com/ for more info.
Look over their code again, as it is taken from their page:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
As you can see, the "on success" code is located within the onreadystatechange event handler. Your example code has three problems: one with the way you're passing a variable, two with the way you use this, and three that your response handler won't work as expected.
var xmlhttp;
var var1 = 'testdata';
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
handleAjaxResponse(responseText);
}
xmlhttp.open("GET","ajax_info.php?var1="+var1,true);
xmlhttp.send();
function handleAjaxResponse(resp) {
document.getElementById("myDiv").innerHTML=resp;
}
In terms of this, it refers to the current scope of execution, a different subject entirely. It isn't a variable you'd pass via AJAX.