Link to home
Start Free TrialLog in
Avatar of 1Cougar
1Cougar

asked on

JQUERY ajax issues

Hello,

I have the code below to update a database via AJAX.  This code works fine on the Mac in Safari and Firefox.  However, this code fails on Windows IE and FF.

In both the statement "alert(status)" returns "success" but in Windows the change to the database does not occur and on the Mac it does.

Any ideas would be much appreciated.

Thanks!

var myurl = baseURL+"data/AddDeleteUpdateEvents.php?thisTeacher="+myTeacher+"&startdate="+startdate+"&enddate="+enddate+"&activityid="+activityid+"&thisid="+thisid+"&what=2&"+Math.random()*1000;
      	
		$.get(myurl,
  {
    
  },
  function(data,status){
	alert(status);
    alert("OK!!");
  });

Open in new window

Avatar of 1Cougar
1Cougar

ASKER

Hello again,

I have simplified the code:

var thisTeacher1 = myTeacher;
var thisStartDate = startdate;
var thisEndDate = enddate;
var thisActivityID = activityid;
var newthisid = thisid;

var data = { thisTeacher: thisTeacher1, startdate: thisStartDate, enddate: thisEndDate, activityid:thisActivityID, thisid: newthisid, what:2 };

$.get(myurlBase,data);

Open in new window


This works fine in Mac FF but doesn't work in Windows FF or IE.  

I can't figure out why????
Avatar of Dave Baldwin
Is 'myurl' located on the Mac?  Rather, where are all the files located?
Avatar of 1Cougar

ASKER

Hi,

I have been playing around some more...I think it is a Windows security issue.  myurl is a file located on the same server as the page calling it.

I tried to change the code to this but it works on Mac and fails in IE and FF on Windows:

$.ajax({
type: "GET",
headers: { 
        Accept : "text/plain; charset=utf-8",
        "Content-Type": "text/plain; charset=utf-8"
    },
cache: false,
url: myurlBase,
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});

Open in new window

Avatar of 1Cougar

ASKER

I have tried specifying the url to be the full address: "http://...." and also just pointing to the file on the server: "data/myfile.php".  

Code is fine on Mac so I don't understand what the issue could be....

???
Are all the files being served thru a web server on the Mac?  Can you directly access the page by typing it in the address bar in your browsers?  And frankly if it Only works on the Mac, then it isn't fine.
Avatar of 1Cougar

ASKER

The site is remotely hosted with shared webhosting.  The jquery ajax call on works on Mac not Windows.
Avatar of 1Cougar

ASKER

Obviously it isn't fine.  However, the call to the php code executes correctly when in Safari or FF on Mac and doesn't work when in IE or FF on Windows.  So, I think there is a problem with how Windows handles the ajax call.  

And, I don't know how to fix this....
So what is different?  I have Windows, Mac, and Linux machines here and I never have code problems like that where a remote web page only works on one OS.  Are the Windows and Mac machines on the same network?  Are the versions of Firefox the same and current on both Mac and Windows?  I have Firefox version 22 on Windows and Mac.
Javascript in Firefox on both Windows and Mac is going to be the same.  Can you go to http://www.google.com and get the same results on both Mac and Windows?  That's a fairly good test of your javascript working.  Facebook too.  The both run a lot of AJAX.
Avatar of 1Cougar

ASKER

The page is being accessed by different users.  I can recreate the issues they are having (on PCs).  It seems the data is not getting sent correctly to the php page as I get an error that it cannot insert a null value into the database (one of the variables sent with "data").  

Again, the exact same code runs correctly on Safari and Firefox on Mac.

The app is an internal scheduling solution and the users that are having issues are on a PC.

Thanks again,
You need to stop blaming Windows and saying code runs correctly on Safari and Firefox on Mac.  Someone needs to go find out what is actually failing.  If they are not on the same network as you, there may be security issues that you are not seeing.  Someone may have setup security restrictions on the Windows machines.  

This is Not a Mac versus Windows issue, it is a "something isn't working" issue.  I have yet to see any site that didn't work in Firefox because it was on Mac or Windows.  I have seen a site that looked funny because the designer specified all Mac fonts that aren't on Windows.
Avatar of 1Cougar

ASKER

Your right about them maybe having security issues on their machines, but I have the same issue running it in IE and FF on the PC here.  So, the issue only occurs with Windows which is why I am looking for a work around to add for people using Windows.
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 1Cougar

ASKER

Thank you.  I will check out the links you provided!  I will be leaving and away until next Wed and will update you then.  Was trying to fix this before I left...
Ok, I'll still be here somewhere.
It's very difficult to know what the problem is based on the little piece of code you've posted. At no point have you posted full 'testable' code.

The fact that your textStatus returns 'success' only tells you that the AJAX request was successful - i.e. communication occurred between your script and the server - it doesn't tell you whether your scripts passed data to the server or whether your server-side script processed any data correctly.

Let us see the server-side script and make sure that it is robust - i.e. it handles missing / invalid data in a predictable manner. Any output that your script generates will be passed back to your AJAX script in the 'data' argument, so you may be better of viewing that rather than the textStatus argument.
Avatar of 1Cougar

ASKER

Hello,

@DaveBaldwin:  I have used LiveHTTPHeaders (thank you very much for that suggestion!) and altered the string of data being passed so FF in Windows now executes properly.  So, now I have Safari, FF (Mac) and FF(Windows) working...but IE still doesn't work.  It's like the AJAX call doesn't get executed.  If I manually copy and paste the url being passed to the AJAX call in another IE window then it executes, but not from the AJAX call itself.

I have a random number at the end of the url so that it is not cached.  I have tried $.ajax and setting cache:false and I get the same result--it works in Safari and FF but not in IE.

Any ideas why this seems to hang in IE??

Many thanks again!

var mydata = { thisTeacher: myTeacher, startdate: startdate, enddate: enddate, activityid: activityid, thisid: myid, what:2 };
var myurl1 = "data/AddDeleteUpdateEvents.php?thisTeacher="+myTeacher+"&startdate="+startdate+"&enddate="+enddate+"&activityid="+activityid+"&thisid="+myid+"&what=2&dummy="+Math.random()*1000;

//pasting myurl1 below in a new IE window will execute the code as expected but it doesn't work when being called from jquery Ajax
alert(myurl1);

		var myurl = "data/AddDeleteUpdateEvents.php";
	
//this works in FF (mac and windows) and Safari but not IE	
		$.get(myurl1)
		.done(function(data) {
		alert("Data Loaded: " + data);
		});
		
		
//this works in FF (mac and windows) and Safari but not IE			
           $.ajax({ 
                   url: myurl, 
                   cache: false, 
                   data: mydata,
                   type: "POST", 
                   //dataType: "json", 
                   success: function(result) { 
                       alert("yes!");
                   } 
           });

Open in new window

In IE, look in the lower left corner of the window and see if there is an error notification.  That might tell you what's going on.  Are you using a current version of jQuery?  See the notes on this page: http://jquery.com/download/
Avatar of 1Cougar

ASKER

Hi,

I believe I am using the latest version of jquery:

<script src="http://code.jquery.com/jquery-latest.js"></script>

In IE I do not have a detailed error message.  On the recommendation of another post I have added this at the top of my script to set global ajax on the page:

$.ajaxSetup({
    cache: false,
	error: function(xhr, status, error) {
    alert("An AJAX error occured: " + status + "\nError: " + error);
  },
  async:false
});

Open in new window


I get no errors on FF (Mac and Windows) and Safari but I get this error in IE:

Error: [object Error]

Again, if I manually copy and paste the url from the "alert(myurl1);" statement then it executes fine in IE.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
If you read the text in the link I posted, you'll see that the 'latest' jQuery does not support IE6/7/8.
That'll do it :)
Avatar of 1Cougar

ASKER

Hello,

I have changed the code to use jquery 1.9.0 which was recommended from someone else for IE 6/7/8 support.  It still doesn't work in IE.

I checked out the validator and it highlights the "&" in the urls being sent.  However, when I tried to encode it then the script stopped working in FF, so I put it back to the way it was.

It is true that I am on a Mac primarily and only use IE (old version) when absolutely necessary.  Is there a place where I can enter the URL to see if it will function in a higher version of IE?  Maybe I am tearing my hair out getting it to work in an old version of IE when it is not necessary.

Many thanks,
Can you post a link to the site or is it internal?  I"m happy to test it for you
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 1Cougar

ASKER

The code is a mess as I have been learning as I go...so you would be very kind to agree to this!  It is also connected to a live database....can I send you private message with the link?

Many thanks,
Avatar of 1Cougar

ASKER

@ChrisStanyon:  Your code works.  And, when I adapt it to my code all I get is Error:error.  I have done extensive research on this and many many people have had similar issues with IE.  Some it was a cache issue (so I have set cache to false) and others said to change .htaccess to use the correct charset (but our site is hosted on Windows Server).  Others said to check for IE and then handle the ajax request differently for it.  I have changed my code to use a lower version of jQuery (1.9.0).  

I am going nuts trying to figure this out and while there must certainly be something wrong with my code that is causing IE to not execute the Ajax call I am at my wits end trying to figure out the work around.

?
Avatar of 1Cougar

ASKER

Hello again,

I have found an issue and it is not related to Ajax but I find it very strange:

This is a snippet of my code before the Ajax call:

var startdate = new String(e.start_date);
		alert(startdate);

Open in new window


The alert in Safari and FF (Mac and Windows) is:  
Thu Jul 18 2013 14:30:00 GMT +0200 (Central Europe Standard Time)

And, the alert in IE is:
Thu Jul 18 14:30:00 UTC +0200 2013

After the alert the code takes substrings of the "startdate" to create a date in this format:

yyyy-mm-dd hh:mm

However, since the startdate variable is somehow different in Windows the substrings that work in FF/Safari yield garbage in IE.  I have no idea why this is occurring.

Can anyone think of a cross browser code to correctly reformat these strings before passing the date to the ajax call?  Can I use browser.msie to check and then take different substrings?  Would this be the right approach?

Many thanks,
do you have comma or quotes (simple or double) in your data?
if theses chars are not encoded for any reason your query fail and voila
Avatar of 1Cougar

ASKER

Hi,

Fixed date issue so I am sure the correct date is getting through.  Would there be an issue with a space (there is a space between the date and time in startdate and enddate)?

This is what is getting sent and it works in FF/Safari but fails in IE:

data/script.php?thisTeacher=25&startdate=2013-07-17 14:30&enddate=2013-07-17 16:00&activityid=1639&thisid=37428&what=2&dummy=423.3199209415336
try this with ie (put it directly in address bar) :
http://youwebserveraddress/data/script.php?thisTeacher=25&startdate=2013-07-17%2014%3A30&enddate=2013-07-17%2016%3A00&activityid=1639&thisid=37428&what=2&dummy=423.3199209415336
Avatar of 1Cougar

ASKER

OK,

I put "%20" where the spaces were and I still get the same error when trying the page in IE.
there's the << : >> too (%3A)
that's why I asked you to put it in the address bar...
The fact that you get the Error message means the AJAX call failed. Post your code so we can see it.

If my code works and yours doesn't then build on mine. Keep adding information to the 'data' variable. One other thing to look at - at no point have you shown us how you are populating the variables and you say your php script is giving an error saying you can't insert a record with a NULL value, so you may want to check your values. So, in the following code:

var data = { thisTeacher: myTeacher, startdate: startdate, enddate: enddate, activityid:activityid, thisid: thisid, what:2 };

Open in new window

Where and when are the variables being set.

If your script bombs because of null values, then you should make your script more robust by checking for those values and giving the user a suitable error message.

There are literally millions of users out there using jQuery's AJAX functions across all browsers without problems so rather than looking at JQuery or IE as the problem, you need to be looking at your own code.
Avatar of 1Cougar

ASKER

Ok, I replaced the ":" and this is my correct url:

data/AddDeleteUpdateEvents.php?thisTeacher=25&startdate=2013-07-18%2014%3A30&enddate=2013-07-18%2016%3A00&activityid=1639&thisid=37428&what=2&dummy=932.8770099493197

I added a rawurldecode to the php to get the dates back as everything stopped working at first (in FF too)

The resulting code works again in FF but not in IE.  I get the same error.
Avatar of 1Cougar

ASKER

But if I copy and paste the url directly in windows then it executes fine.....which makes me go back to there is something with the Ajax call...
But if I copy and paste the url directly in windows then it executes fine

using the ChrisStanyon's last code snipet will ask jQuery to encode your data.
which are not done when you're building yourself the string with parameters
to encode parameters (and only parameters you may use the native encodeURIComponent javascript function)

the test you can do now is put the url direclty in your ajax call and NO data parameter (because there're already inside the URL) :
$.ajax({
type: "GET",
url: "http://youwebserveraddress/data/script.php?thisTeacher=25&startdate=2013-07-17%2014%3A30&enddate=2013-07-17%2016%3A00&activityid=1639&thisid=37428&what=2&dummy=423.3199209415336",
Avatar of 1Cougar

ASKER

Actually, if I paste this into IE, then a pop up appears with "File download" and it says it cannot reach the site (which is our site):

http://www.ourwebsite.com/data/AddDeleteUpdateEvents.php?thisTeacher=25&startdate=2013-07-25%2014%3A30&enddate=2013-07-25%2016%3A00&activityid=1639&thisid=37428&what=2

Why would IE try to download a file???
Avatar of 1Cougar

ASKER

I had already tried that yesterday (though I suppose the date was not formatted correctly).  So, I put this back in and it works with FF and not with IE:

 $.ajax({
                   url: myurl1,
                   cache: false,
                   type: "GET",
                   success: function(result) {
                       alert("yes!");
                   }
           });
ok, I think you need to share the link now...

It's not allowed to send it by message because everyone need to have the same chance to resolve your issue
You can tinyfy the url if needed (http://goo.gl/, http://tinyurl.com/, ...) and ask a moderator to remove it later
Avatar of 1Cougar

ASKER

My apologies in advance for the mess the code is in but I have been trying now for days to resolve this:

http://tinyurl.com/n4bgvrw

Thanks to all!

Cheers,
I clicked on an event in the calendar, made a change with IE10 and get an alert : yes!
Avatar of 1Cougar

ASKER

I am in IE6...so you think it is related to the IE version?  If you refresh is it saved?
Avatar of 1Cougar

ASKER

BTW you have to drag and drop the event to calendar.  We don't allow events other than the ones in the tree
Avatar of 1Cougar

ASKER

I see you changed the time to 14:45.  Hmmmm.....I wonder what versions of IE run correctly then?  Like I said I am on a Mac and only use IE occastionally via Parallels so have not upgraded for a long time.
IE6... loool
forget this... who still work on IE6 apart me and you?
Avatar of 1Cougar

ASKER

but what about IE7, IE8?  And, did you also get an error on IE6?
DO NOT WASTE TIME ON IE6 - Seriously - It's DEAD!!!! IE7 is also questionable..

If you want a modern, dynamic responsive app / web page, then code it for the latest browsers, using the latest standards (HTML5 / CSS3 etc). Trying to be all cool and modern with 10 year old technology will only give you headaches ;)
No it fail on IE6...
User generated image
I see you added a better error handler
User generated image
see difference for dates here :
User generated image
the first one is IE10 compat. mode (fail)
the second chrome (work)
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 1Cougar

ASKER

Hello,

I had noticed the date problem but had only fixed it (and not elegantly) in the onEventChanged event handler.  Thank you for the much cleaner code to do this which I have implemented in 'onEventAdded' event handler and will change for the other handler too.

What were you using to get the screen shot above with Chrome and IE output/error messages?

Thanks also for your feedback regarding IE6--so you think now that it should be ok for most people's browsers?  This is a small app for an intranet so not many people will be using it anyway.

Thanks again,
Avatar of 1Cougar

ASKER

Hello to you experts who assisted me....thank you!  I am not sure I am 100% there but your assistance was invaluable in helping me correct some of the issues I was experiencing.  It is very difficult to assign points and given that you all gave input I will share the points amongst you.  I wish I had more points to give out....

Best to you all,
Avatar of 1Cougar

ASKER

Excellent and prompt help from all of the experts--and great suggestions for tools to help me in the future.
I give you a copy of the javascript date routine I have used on my pages for years that works the same in all browsers that I know of including Firefox and Chrome on Windows, Mac and Linux, Safari on Mac, and IE on Windows.
<div style="font-size: 10pt; font-family: Arial; font-weight: bold;">
<script type="text/javascript">
<!--
/*Current date script credit: 
JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sept","Oct","Nov","Dec")
document.write(dayarray[day]+" "+montharray[month]+" "+daym+", "+year)
// -->
</script>
</div>

Open in new window

Avatar of 1Cougar

ASKER

Many thanks!  I will put this to good use!

Cheers,