Ajax issue in Firefox - javascript

I'm counting clicks on a link by calling a page with AJAX but in Firefox, apparently because the page called is never actually loaded, for some reason Firefox never calls it. It seems like the link is clicked and then Firefox makes the AJAX call but somehow because the page changes to the actual link in the href then the AJAX call is never actually sent (appears red in firebug and no sign of it in Fiddler). It works fine in IE & Chrome and if I change the link to target="_new" then it will work in Firefox. Am I making some sort of stupid mistake?
<HTML>
<HEAD>
<script type="text/javascript">
function adtrk(cde){
var ajaxRequest; // The variable that makes Ajax possible!
var r=Math.random();
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaresp = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "/atr.php?cde=" + cde + "&r=" + r, true);
ajaxRequest.send(null);
}
</script>
</HEAD>
<BODY>
<a onclick="adtrk('zip1'); return true;" href="http://www.google.com"><img src="/images/img.jpg"></a>
</BODY>
</HTML>

When you load a new page any open AJAX requests will be cancelled (by the browser). Your server probably never sees the click count request.
Either always open links in a new window or use some other mechanism for counting clicks, like a proxy/redirect.

The page changes before the ajax request is done. You should wait for you ajax request to end before changing page by running it synchronously :
ajaxRequest.open("GET", "/atr.php?cde=" + cde + "&r=" + r, false);

Related

xmlhttprequest recognize as pop-up

I have an issue, with that code with my xmlhttprequest code.
The aim is to execute mac.php every 10 seconds but when I go to my webpage, the first time, it will block all pop-up (mac.php) even if mac.php is not a pop-up !
I reload the page and now it is not recognize as a pop-up !!
I would like to know why it is recognise as a pop-up some time and other not.
Thanks
Here's my code :
<script language="JavaScript">
function mac() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
xmlhttp.responseText;
};
xmlhttp.open("GET", "mac.php", true);
xmlhttp.send();
}
mac();
setInterval(mac, 10000);
</script>
Possibly this is a CORS issue. Try changing "mac.php" to "http://whatever-your-page-is.com/mac.php" - obviously changing the url to your site's. The message about pop-up blocking may be browser specific.

Ajax refresh does not refresh the Java script

I have a JSP page that refreshes every 5 seconds Using ajax.
The page i am calling having javascript that is not getting refreshed .
Please tell me how to achieve that.
Below is the code i am using to refresh that page .
refresh is the name of the div where i am displaying the data.
<script type="text/javascript">
function AutoRefresh() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("No AJAX");
return false;
}
}
}
xmlHttp.onreadystatechange = function () {
//alert("hi");
if (xmlHttp.readyState == 4) {
document.getElementById('TotalRoutes').innerHTML = xmlHttp.responseText;
setTimeout('AutoRefresh()', 10 * 1000); // JavaScript function calls AutoRefresh() every 3 seconds
}
}
xmlHttp.open("GET", "QAGENIE.jsp", true);
xmlHttp.send(null);
}
</script>
Here js files in the QAGENIE.jsp page is not getting refreshed on the ajax call
I think you are not calling AutoRefresh function first time. so nothing will be execute. and if you are calling from outside of your code which you gave here, then please post whole web page code in question.
setTimeout(AutoRefresh,5000); for every 5 seconds
if (xmlhttp.readyState==4 && xmlhttp.status==200)
window.onload = AutoRefresh();
When you call document.getElementById('TotalRoutes').innerHTML=xmlHttp.responseText;, script tags inside the "QAGENIE.jsp" are not executed, that's why:
js files in the QAGENIE.jsp page is not getting refreshed.
Since the question is tagged with jQuery, you could try $.ajax and $.html. Like this:
function AutoRefresh(){
$.ajax({
url:"QAGENIE.jsp"
})
.done(function(response){
$("#TotalRoutes").html(response);
setTimeout(AutoRefresh,10*1000);
});
}
AutoRefresh(); //call this to trigger the first call
$.html automatically parses and executes script tags in the response HTML.
There is 1 more thing to notice is browser cache, if your js files are cacheable (as it usually does by the cache response header from server), the js files may be served from the cached. If you need to always refresh with new js files, ensure your js files are not returned with a cache header, or try to append a random string at the end of the script tags. Like this:
<script src="yourFile.js?[randomstring]"></script>

Javascript: Find browser windows open with the same domain

Is there a way to get a list of all the open browser windows if they are from the same domain as the window that is trying to get the list?
In general, no.
Unless there is a "connection" between the windows (e.g., one window opened all the other using window.open), browser windows can't interact because of security reasons.
Edit:
If you assign a name to your window, you can regain control over it after refreshing the parent page.
windowVar = window.open('somePage.html', 'windowName'); opens a child window with name windowName.
After refreshing the parent page, windowVar = window.open('', 'windowName'); re-associates the variable windowVar with the window of name windowName.
Now, windowVar.location.href= 'logout.html'; lets you log out your user.
Edit:
Assuming you use PHP, you could do something like this:
Create logged.php with a function logged_in that verifies if the session ID is still valid.
<?php
if (isset($_GET['sid']))
if (logged_in($_GET['sid']))
echo "in";
else
echo "out";
?>
Include check() function in your pages.
function check()
{
var url = "http://redtwitz.com/test/logged.php?sid=" + sessionId;
var request;
try
{
request = new XMLHttpRequest();
}
catch(error1)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(error2)
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}
request.open("GET", url, false);
request.setRequestHeader("User-Agent",navigator.userAgent);
request.send(null);
if(request.status==200)
if(request.responseText == "out")
window.location.href = "logout.html";
}
Call check function every 5 seconds.
<body onload="setInterval(check, 5000);">
Alternatively, you can implement Chrome extension and do your task by using extension api: http://code.google.com/chrome/extensions/tabs.html
But it will work in Chrome browser only.

SQL query using AJAX in Wordpress theme

I'm attempting to use AJAX to insert data into a database, but am unable to connect to the .php file on the server end. I'm thinking this is due to the fact that this is all run on Wordpress, so my normal url path to the .php file might not be correct.
Here is my setup:
Template file:
$('#newsletter-register').submit(function(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
alert(ajaxRequest.responseText);
}
}
ajaxRequest.open("GET", "register_newsletter.php", true);
ajaxRequest.send(null);
});
'#newsletter-register' is form that the user will use to submit his/her information. The alert when the ajaxRequest is at readyState 4 is thrown correctly, but will an empty value.
My php is a simple echo returning a string to signal that the connection is correct (presently I'm just trying to see if the files are correctly calling eachother).
I'm thinking it must be the url path to register_newsletter.php as I've tried placing the code within the template file, outside, etc.
My javascript file is located in /theme/assets/js/code.js where as my template files (including the register_newsletter.php file) in /theme.
Any ideas?
I had this type of issue yesterday. In my situation the page would only be accessed from
www.site.com/aFolder/
The script was stored in my
'/wp-content/themes/themeName/processForm.php'
folder.
and the URL I used was:
../wp-content/themes/themeName/processForm.php
My JS was simply in the head of the main header.php file, but note that the URL I had to use was relative to the URL the page the script was accessed from.
Does that shed any light on things?
EDIT:
As troubleshooting steps, try ensuring you can access your php file from it's absolute URL, and have a look in firebug to see what link is being called when you fire the ajax request to see if it matches up with what you expect.

Return script content that has src attribute

i am having a bit of a problem here and i don't even know if it is possible at all, here's my dilema:
I have this script code:
<script id='script1' src='http://link.to.js'></script>
While using firebug, i can clearly see that the script has bee loaded between those tags, like this
<script id='script1' src='http://link.to.js'>
function something(){
alert('hi');}
</script>
What i want to do is, by means of another script, get the content between those tags, something like
var x = document.getElementById('script1').innerHtml;
document.getElementById('somedividhere').innerHtml = x;
That works perfectly WHEN the code is already part of the html, not when its loaded from src.
I have been looking for this for hours and i have not found any hint, hope someone can help me on this.
I think Firebug only shows you that for convenience sake. If you want to get the code from the script, you'll have to use AJAX.
You could do something like this:
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var scriptcontent = ajaxRequest.responseText;
//Do something with the content
}
}
ajaxRequest.open("GET", document.getElementById('script1').src, true);
ajaxRequest.send(null);
}
Just a few notes:
This will only work for scripts
located on your site due to the
same origin
policy.
I took the ajax code from this
site
and modified it.
This would be a lot
easier with
jQuery

Categories