Can someone tell me why this will not work in Joomla 2.5 but does in 1.5?
The error I'm receiving is - Uncaught TypeError: Cannot read property 'childNodes' of null ajax.php:33
If I enter in the url: index.php?option=com_mmg&controller=ajax&task=listModels&make_id=3
It outputs the ajxGetModels function like it's suppose to.
I know Joomla 2.5 Ajax Calls got changed or something like that but, I can't find a solution online to convert what I have below to the 2.5 version way of doing so.
Any help or direction would be very useful. Thank you.
function ajxGetModels(reload)
{
if (reload) {
var use_make = 'sel_make_id';
} else {
var use_make = 'make_id';
}
var make_id = document.getElementById(use_make).value;
var xhr = createXHR();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var model=document.getElementById("model_id");
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(xhr.responseText);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xhr.responseText,"text/xml");
}
catch(e) {alert(e.message)}
}
var options =xmlDoc.getElementsByTagName("options").item(0);
model.innerHTML='';
for (i=0; i < options.childNodes.length; i++){
var newoption=document.createElement("option");
var myoption=options.childNodes[i];
var newtext=document.createTextNode(myoption.childNodes[0].nodeValue);
newoption.setAttribute("value",myoption.getAttributeNode("id").value)
newoption.appendChild(newtext);
model.appendChild(newoption);
}
document.getElementById('model_id').disabled=false;
document.getElementById('year_id').innerHTML='';
document.getElementById('year_id').disabled=true;
if (reload) {
var preVal = document.getElementById('sel_model_id').value;
setMmgVal('model_id',preVal);
ajxGetYears(true);
}
} else {
alert('Error code ' + xhr.status);
}
}
}
xhr.open("GET","index.php?option=com_mmg&controller=ajax&task=listModels&make_id="+make_id,true);
xhr.send(null);
}
function createXHR() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
return xhr;
}
It was not working because $error_reporting was set to "maximum" in configuration.php.
Still though - there has to be a better way.
Related
ajax : function(typ,url,callback) {
if(window.XMLHttpRequest) {
var xml = new XMLHttpRequest();
}
if(window.ActiveXObject) {
var xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.onreadystatechange = function(callback) {
if(xml.readyState == 4 && xml.status == 200) {
callback();
}
}
xml.open(typ,url,true);
xml.send();
}
}
//Function being called
window.onload = function() {
JS.ajax("GET","/server/chkEmail.php?email=email#email.com",function() {
alert(xml.responseText);
});
}
It throws the error saying:
Uncaught TypeError: callback is not a functionxml.onreadystatechange #
global.js:30
Any ideas?
I fixed it by passing the data variable through the onreadystatechange function and calling it in the callback function.
ajax : function(typ,url,callback) {
if(window.XMLHttpRequest) {
var xml = new XMLHttpRequest();
}
if(window.ActiveXObject) {
var xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.onreadystatechange = function(data) {
if(xml.readyState == 4 && xml.status == 200) {
var data = xml.responseText;
callback(data);
}
};
xml.open(typ,url,true);
xml.send();
}
}
window.onload = function() {
JS.ajax("GET","/server/chkEmail.php? email=jonwcode#gmail.com",function(data){
alert(data);
});
}
Try like this:
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
callback();
}
};
Notice that the onreadystatechange function doesn't take any parameters whereas in your code you have passed it a parameter with the name callback which will override the callback variable from the outer scope.
UPDATE:
It looks like you have improperly scoped the xml variable and it isn't available in your AJAX callback. I strongly recommend you reading more about javascript variables scope. Here's how you could make the xml variable visible:
var xml = null;
if (window.XMLHttpRequest) {
xml = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xml == null) {
alert('Sorry, your browser doesn\'t seem to support AJAX - please upgrade to a modern browser');
} else {
xml.onreadystatechange = function() {
if(xml.readyState == 4 && xml.status == 200) {
var data = xml.responseText;
callback(data);
}
};
xml.open(typ,url,true);
xml.send();
}
I'm new to using AJAX and my code works in Internet Explorer but not in Firefox or Chrome.
I do not know what it is exactly what should change in the code ...
// I think that error should be here :-)
function cerrar(div)
{
document.getElementById(div).style.display = 'none';
document.getElementById(div).innerHTML = '';
}
function get_ajax(url,capa,metodo){
var ajax=creaAjax();
var capaContenedora = document.getElementById(capa);
if (metodo.toUpperCase()=='GET'){
ajax.open ('GET', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState==1){
capaContenedora.innerHTML= "<center><img src=\"imagenes/down.gif\" /><br><font color='000000'><b>Cargando...</b></font></center>";
} else if (ajax.readyState==4){
if(ajax.status==200){
document.getElementById(capa).innerHTML=ajax.responseText;
}else if(ajax.status==404){
capaContenedora.innerHTML = "<CENTER><H2><B>ERROR 404</B></H2>EL ARTISTA NO ESTA</CENTER>";
} else {
capaContenedora.innerHTML = "Error: ".ajax.status;
}
} // ****
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return
}
}
function creaAjax(){
var objetoAjax=false;
try{objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){try {objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E){objetoAjax = false;}}
if(!objetoAjax && typeof XMLHttpRequest!='undefined') {
objetoAjax = new XMLHttpRequest();} return objetoAjax;
}
//These functions are connected with a form
function resultado(contenido){
var url='ajax/buscar.php?'+ contenido +'';// Vota Resultado
var capa='resultado';
var metodo='get';
get_ajax(url,capa,metodo);
}
function paginas(contenido){
var url='ajax/paginar.php?'+ contenido +'';// Vota Paginas
var capa='paginas';
var metodo='get';
get_ajax(url,capa,metodo);
}
Strongly suggest that you use a lib like jQuery that encapsulates a lot of what you're doing above, masking cross-browser issues (current and future). Even if you don't want to use jQuery site-wide, you could still use it just for its AJAX functionality.
In the following piece of JavaScript code, i'm executing GetData.php using AJAX. However, when i remove the comments to see the request object's state property, it turns up as undefined, although the PHP script is getting executed properly and my page is changing as i want it to. But i still need the state property. Any clue on what's going on here ?
function refreshPage()
{
var curr = document.getElementById('list').value;
var opts = document.getElementById('list').options;
for(var i=0;i<opts.length;i++)
document.getElementById('list').remove(opts[i]);
var request = new XMLHttpRequest();
request.onreadystatechange=
function()
{
if(request.readyState == 4)
{
//alert(request.state);
//if(request.state == 200)
{
fillOptions();
var exists = checkOption(curr);
var opts = document.getElementById('list').options;
if(exists == true)
{
for(var i=0;i<opts.length;i++)
if(curr == opts[i])
{
opts[i].selected = true;
break;
}
}
else
{
opts[0].selected = true;
}
refreshData();
}
/*else
{
alert(request.responseText);
//document.close();
}*/
}
}
request.open("GET","GetData.php?Address=" + address + "&Port=" + port,true);
request.send();
}
Do you mean request.status not request.state?
Try changing it to the .status and it should work just fine :)
I have e really big problem with firefox and facebook.
I mad an application on my webserver which uses xmlHttpRequest. I added this application to a facebook tab on a test facebook page. It works with IE, Chrome, Safari but not with firefox.
The request just keeps loading until timeout.
The JS functions i'm using:
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
}
if (status == 200) {
callback(request.responseXML, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, f);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
function downloadScript(url) {
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
i call it through downloadUrl()
The Headers from the requested files:
header('Access-Control: allow <*>');
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET');
header('Access-Control-Allow-Headers: X-PINGOTHER');
header("Content-type: text/xml");
i really tried everything, but it won't work in firefox...
what i've noticed: by observing firebug while loading this app in the facebook tab i could see that facebook is not requesting the adress given in the source, but other ones like: https://0-317.channel.facebook.com/pull?channel=p_1495135952&seq=389&partition=7&clientid=420773d2&cb=682&idle=0&state=active
i think it's surely firefox cross domain policy... but how can i solve this problem?
Anyone had the same problems ?
I thank you in advance.
Greetings
ok, found the problem.
Facebook is using UTF-8, but my page wasn't. So the stopped at the umlauts.
So it wasn't the Request at all.
I am creating an XMLHTTP object in Firefox and IE8 and i transfer a very large amount of data (json). In Firefox it renders it in 5 seconds, in IE8 it takes 30 seconds.
Is there any way to make IE8 XMLHTTP works faster?
Here is my code for creating the XHR object:
function createRequestObject2()
{
var http_request = false;
if(window.XMLHttpRequest)
{ //: Mozilla, Safari,...
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType)
{
//: set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject)
{ //: IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if(!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
return http_request;
}
Here is how i use the XHR:
http = createRequestObject2();
http.open('GET', encodeURI(action), true);
http.onreadystatechange = results;
http.send(null);
inwork = true;
viewLoading();
//: search results handling
function results()
{
/*console.log("do_search.results[ " +
'Results return ' + http.readyState
+ " ]"
);*/
if(http.readyState != 4)
return;
inwork = false;
if(http.status != 200)
{
//setStatusLine(httpapplicant.statusText);
return;
}
//: evaluate
var data = eval('(' + http.responseText + ')');
//: add data to the table
applicant_list = new dogtable(data, table1_options, $$('dog_results'));
hideLoading();
} //function results