I made a little module to use a jquery/ajax script on my website. For that I used examples which are on the site and others. The script is working in IE (for a change it works there) but I cannot get it working in FF or safari. Tried a lot of things but somehow it never executes the updatecounter function
I am not a javascript programmer so have no idea where to look. Maybe there are some who know what I am doing wrong
Tried 

if (Drupal.jsEnabled) {
$(document).ready(function(content) {
$('a.download').click(function () {
// This function will get exceuted after the ajax request is completed successfully
var updatecounter = function(data) {
alert (data.counter); // only in IE this is displayed not in FF or Safari
}
alert(this.href); // this works in all browsers
var urlget = "/counter/get”;
$.ajax({
type: 'GET',
url: urlget,
success: updatecounter, // The js function that will be called upon success request
dataType: 'json', //define the type of data that is going to get back from the server
data: 'js=1' //Pass a key/value pair
});
//return false; // return false so the navigation stops here and not continue to the page in the link .. This puzzles me also. If I put it in the program stops and does not continue
});
});
}

Strange thing is if I change the it to :

if (Drupal.jsEnabled) {
$(document).ready(function(content) {
$('a.download').click(function () {
// This function will get exceuted after the ajax request is completed successfully
var updatecounter = function(data) {
alert (data.counter); // only in IE this is displayed not in FF or Safari
}
var fout = function(stat, statext) {
alert (stat.readyState);
alert (statext);
}

alert(this.href); // this works in all browsers
var urlget = "/counter/get”;
$.ajax({
type: 'GET',
url: urlget,
success: updatecounter, // The js function that will be called upon success request
error: fout , // calls when error
dataType: 'json', //define the type of data that is going to get back from the server
data: 'js=1' //Pass a key/value pair

});
//return false; // return false so the navigation stops here and not continue to the page in the link .. This puzzles me also. If I put it in the program stops and does not continue
});
});
}

It always goes to fout and displays error code 4 and text error. So the ajax call is working but gives me always an error (only in FF and safari not in IE)
I also tried;

if (Drupal.jsEnabled) {
$(document).ready(function(content) {
$('a.download').click(function () {
// This function will get exceuted after the ajax request is completed successfully
var updatecounter = function(data) {
alert (data.counter);
}
alert(this.href);
var urlget = "/counter/get"; 
$.get(urlget, null, updatecounter);
});
});
}

I am busy on this for some hours maybe someone can help me out here
Thanks

Comments

erald’s picture

erald commented

Well needed this badly and have been searching for days now how to get this working. It looks like it has something to do with the request headers where the security in FF and safari is more strict then in IE and opera.

My knowledge about this subject is limited so followed the rules as given on the mozilla website and came up with a working solution.
In my module I now have the following JS file which works in all browsers. It is not the elegant solution and does not make use of what Drupal is offering, but it is a working solution.

I am still interested in knowing why the above is not working in FF and Safari.

// $Id$
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
if (!xmlhttp && window.createRequest) {
	try {
		xmlhttp = window.createRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
Drupal.behaviors.dynamic_counter = function(context) {
	$('a.download').click(function () {
		var urlget = "/counter/get/";
		xmlhttp.open("GET",urlget,false);
		xmlhttp.setRequestHeader('Accept','message/x-jl-formresult')
		xmlhttp.send(null);
		if (xmlhttp.readyState==4) {
			alert(xmlhttp.responseText);
		}
	});
}
prabeen.giri’s picture

prabeen.giri commented

You can also check if you have any DOM element with id as 'updatecounter' . Because in firefox and other browsers u can't use same identifier as javascript variable and dom element Id . But surprisingly it works on IE browsers.

For Eg, 

<script>
    var my_element;  
</script>

AND 

<div id='my_element'></div>

I am not sure if its your problem but it can definitely worth giving one look :)

Status: Active » Closed (outdated)

Automatically closed because Drupal 6 is no longer supported. If the issue verifiably applies to later versions, please reopen with details and update the version.