function processAjaxStateChangeForRowAdd() {
alert(0);
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
This code is working fine for IE, Safari and Firefox, but if I remove the alert, then the code will not work in Firefox, though it still works in IE and Safari.
Can anybody give me suggestion why it not working in Firefox without alert?
EDIT: Code that adds a row:
if (window.XMLHttpRequest && browserVersion.indexOf("Microsoft") == -1 ) {
// code for Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest("");
if (req) {
ajaxProcessed = false;
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
// alert("1");
}
}
The alert is blocking. What this means is that your script is temporarily suspended (even if it's for a few milliseconds). During this time, your AJAX request completes and your req object is being set. You can add a delay (using setTimeout) to your callback to verify this.
I would suggest you post more of your script so that we can help you set up your callback properly. Alternatively, use a library such as jQuery to set up AJAX calls in a cross-browser manner easily.
EDIT: You need to either declare req as a global variable, or use an anonymous function. The following code demonstrates the first method (using a global variable):
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
}
}
function processAjaxStateChangeForRowAdd() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
function getHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
if(typeof XMLHttpRequest != 'undefiend')
{
xmlhttp = new XMLHttpRequest();
}
}
}
return xmlhttp;
}
can you try this:
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
} else
alert("status: " + request.status);
}
You should also check for the readyState , the following code might help
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
processForRowAdd(req.responseText)
}
}
Read this for the different values of readyState
Related
I have to build an ajax site without the use of JQuery (which is a pain), So I have been trying to build ajax requests in a similar fashion.
Currently I have this:
function $ajax(json) {
var xmlhtml;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhtml = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhtml.onreadystatechange = function () {
if (xmlhtml.readyState == 4) {
if (xmlhtml.status == 200) {
alert(xmlhtml.responseText);
}
else if (xmlhtml.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhtml.open(json.type, json.url, true);
xmlhtml.send();
};
and I call it like so:
(function () {
$ajax({
type: "GET",
url: "/api/stock"
});
})();
which is fine, it returns my records. What I need to do is create callback functions for complete (status == 200) and error (status != 200).
How can I do this?
Please note, I can not use jQuery.
Well, the simplest way would be for your function to accept another parameter which is the function:
function $ajax(json, callback) {
var xmlhtml;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhtml = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhtml.onreadystatechange = function () {
if (xmlhtml.readyState == 4) {
if (xmlhtml.status == 200) {
callback(xmlhttp.responseText)
}
else if (xmlhtml.status == 400) {
// don't ignore an error!
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhtml.open(json.type, json.url, true);
xmlhtml.send();
}
Which would let you do
$ajax({...}, function(response){
// done here
})
As for your function itself, if you can use modern web browsers I'd do this slightly differently using promises. Like the above code this requires no external references but it does require a modern browser:
function xhr(params){
var xhr = new XMLHttpRequest()
xhr.open(params.type || "GET", params.url);
return new Promise(function(resolve, reject){
xhr.onload = function(e){
if(xhr.status === 200) return resolve(xhr.responseText);
return reject(new Error("XHR response not 200 " + xhr.status);
};
xhr.onerror = reject;
xhr.send(params.data)
});
}
I have a problem reloading jScrollPane after I use ajax. Although this issue seems to be asked a lot, I still haven't figured it out (after spending hours on it).
So here's my javascript code:
function search(str) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
}
}
xmlhttp.open("POST", "ajax/search.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
}
So although I'm reintitialising JscrollPane it still doesn't come up after the div content is being replace by ajax.
Any solution?
I managed to solve it with api getContentPane.
I added the following code in the top of the script:
$(document).ready(function() {
jQuery('.searchresult').jScrollPane({
showArrows: true,
autoReinitialise: false
});
})
And I replaced this:
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
with:
api = jQuery("#searchresult").data('jsp');
api.getContentPane().html(xmlhttp.responseText);
document.getElementById("results").style.display="inline";
api.reinitialise();
home.html
front page test
test.php
<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
<button type="button" onclick="callAJAX('home.html','displaydiv')">Click Me!</button>
<div id="displaydiv"></div>
ajax.js
function callAJAX(url, pageElement, callMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAJAX(pageElement);};
req.open("GET",url,true);
req.send(null);
}
function responseAJAX(pageElement) {
console.log(req.readyState);
var output = '';
if (req.readyState == 4) {
if (req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}
Above code is mainly from here:
Questions:
according to this site, onreadystatechange stores a function (or the name of a function) to be called automatically each time the readyState property changes so when will readyState property change? after req.send(null);?
for this line: console.log(req.readyState); in chrome console, it shows: 1 2 3 4, it does not output 0, is that because 0: request not initialized?
readyState changes in a few places, check out Mozilla's documentation for more information. req.readyState = 0 means that req.open() has not been called yet.
Also, depending on what browsers you are trying to support with this code, you can look into using some of the features from XHR2, including a req.onload() function that would change your code to:
function callAJAX(url, pageElement, callMessage) {
var elem = document.getElementById(pageElement);
elem.innerHTML = callMessage;
var req = new XMLHttpRequest();
req.onload = function() {
elem.innerHTML = req.responseText;
};
req.open("GET",url,true);
req.send(null);
}
I´ve implemented a dynatree on a web application, dynatree is generated from server with a JSON object.
Dynatree works perfectly on Firefox, Safari, Chrome and Opera (last versions), but when I open on IE9, I just capable of loading the tree after refresh the page, or start the debug mode. I can´t find any mistake on console, script....
Any suggestion? someone with the same problem?
Code:
function hacerPeticion(url, callback){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
Using the function:
hacerPeticion('/ServiciosWeb/Zonas.jsp', function(data){
var data = JSON.parse(data.responseText);
var arbol = data;
eval('var obj='+arbol);
console.log(obj);
$(function(){
$("#tree3").dynatree({
checkbox: true,
selectMode: 3,
children: obj,
onSelect: function(select, node) {
if(!select){
if(node.data.key=="zonas"){
control=false;
cargaMapaCYL(map, control);
}
if(node.data.key=="ast"){
control=false;
cargaMapaAst(map, control);
}
/*Nodos seleccionados*/
if(select){
if(node.data.key=="zonas"){
control=true;
cargaMapaCYL(map, control);
}
if(node.data.key=="ast"){
control=true;
cargaMapaAst(map, control);
}
}
onDblClick: function(node, event){
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
}
});
Thanks in advance.
So....., the problem is in this line:
console.log(obj);
When I have retired this line everything works fine.
I wrote an AJAX function and with this function I am populating the <option> tag of a particular <select> tag. This function runs fine on all leading web browsers but when I try to run it on IE7 it gives me the runtime error on following line in the browser:
document.getElementById("box2View").innerHTML = req.responseText;
My code is
function retrieveURL(url)
{
var newUrl = 'showStates.do?country='+url;
req = GetXmlHttpObject();
req.onreadystatechange = processStateChange;
try {
req.open("GET", newUrl, true);
} catch (e) {
alert(e);
}
req.send();
}
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
alert(req.responseText);
document.getElementById("box2View").innerHTML = req.responseText;
var x = document.getElementsByName("countryid");
} else {
alert("Problem: " + req.statusText);
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
When I debug it I found that I got a HTML from in req.responseText
which is
So can anyone tell me what should I do to make it work with IE7.