I'm trying to run multiple AJAX calls on the same page and seem to be having trouble. I'm new to this so I don't really understand what's going on. I have a drop down menu and I want it to update the content in two different places when the selection changes. Each of these works on their own but when I try running them together it only updates whichever script I run last. Any help would be greatly appreciated
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../php/get_org.php?q="+str,true);
xmlhttp.send();
}
</script>
<script>
function list(str)
{
if (str=="")
{
document.getElementById("list").innerHTML="";
return;
}
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("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../php/list_org.php?q="+str,true);
xmlhttp.send();
}
</script>
The reason is simple, you are using same global variable for both requests xmlhttp.
Use var when declaring variables like this var xmlhttp = new XMLHttpRequest();.
Your code initializes xmlhttp and requests for some page. Before the request is done you run some another function, which uses xmlhttp again. It is reinitialized and new onreadystatechange handler is set and another request is made. So only the last response handler set is actually executed.
Related
My page is getting loaded through Ajax. I am using tinyMCE for a few textarea on the page. It gets loaded the first time. But when I make another ajax call the tinyMCE does not work anymore and I see a normal textarea. I know I have to use execCommand and Add and Remove the editor. But it will be nice if someone can help me with where to insert it.
<script>
function show(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxpage.php?q="+str,true);
xmlhttp.send();
$.ajax({
url: "ajaxpage.php",
context: document.body,
success: function(){
tinymce.init({
selector: 'textarea'
});
}
});
}
</script>
i use this code for get each teacher lesson list this code work fine in all browser but in ie10 cant get lesson list and return blank selection list .
function get_lesson(lesson)
{
var getid=lesson;
document.getElementById("ajax_msg").innerHTML='<span style="color:red">Update</span>';
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("ajax").innerHTML=xmlhttp.responseText;
document.getElementById("ajax_msg").innerHTML='Now Select';
}
}
xmlhttp.open("GET","subpage/ajax_lesson.php?id=" + getid + "&tnow="+ (new Date()).getTime(),true);
xmlhttp.send();
}
IE 10 seems having issue with ajax.
Please Refer:
http://code.gishan.net/code/solution-to-ie10-ajax-problem/
HTH,
I need to display a name in the textbox with id = txtName using an ajax function, but it won't work. The following is my ajax function:
function showName(str) {
if (str.length == 0) {
document.getElementById("txtName").innerHTML = "";
return;
}
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("txtName").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getname.php?q="+str, true);
xmlhttp.send();
}
You have to chnage the innerHTML to value, since the former will be changing the value of the element having the id "txtName".
Hope this helps.
function showName(str)
{
if (str.length==0)
{
document.getElementById("txtName").innerHTML="";
return;
}
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("txtName").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getname.php?q="+str,true);
xmlhttp.send();
}
Try using jquery , why still using the old fashioned ajax
i am having side menu, where users clicks on links pages should load inside a div in the center of the page using AJAx requests and it's working properly, however when i click on a link inside the div itself, it loads the whole page, any one knows where is the problem
Ajax function:
function loadmypage(divID, pageURL)
{
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(divID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", pageURL ,true);
xmlhttp.send();
}
links used:
I have created a mozilla extension which is a button located on the browser. This button has a javascript which when clicked should send a XMLHTTLP request. I want to use a local HTML file which I have created in the URL field of it. When I use it I still can't view that HTML page. Why is that so? The code goes like this:
CustomButton = {
1: 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)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/sample.html",true);
xmlhttp.send();
}
}
The sample.html file is located in the htdocs folder of xampp.
Accessing local files with XMLHttpRequest is not allowed for security reasons.