JQuery AJAX with IE8

Question

I am trying to fulfill a request to receive via $.ajax when a user $.ajax form.

I'm not sure what I'm doing is the most efficient method (linking a click to a form button), so if there is a more efficient way (or a standard way), suggest it!

My result is that the contents of the div fill correctly in FF / Chrome, but IE is not. IE seems to represent the form and reloads the page completely.

In addition, I really think I need to “submit” the form because I want to use jQuery validate(); which does not work with the implementation below (even in FF / Chrome).

Javascript

 $(document).ready(function(){ $("#theForm").submit(function(){ // build our data to send in our request var mydata = {method: "search", color: $('#color').val()}; $.ajax({ url: 'foo.php', data: mydata, type: 'get', dataType: 'json', success: function(data){ $("#content").html(data); } error: function(e){ console.log(e.message); } }); return false; }); }); 

HTML :

 <form id="search"> <input type="submit" /> </form> <div id="content"></div> 

Answer 1

You must change the submit button to the type button. Inputs of type submit automatically send the page, and in your case this is not necessary.

 <input type="button" id="search-button"> 

Otherwise, you can prevent the default button action by using event.preventDefault () .

 $("#search-button").click(function(event){ event.preventDefault(); $.ajax({ url: 'foo.php', data: mydata, type: 'get', dataType: 'json', contentType: 'application/json', success: function(data){ $("#content").html(data); } }); }); 

Since you are expecting html to return from the server, it is best to specify the dataType that you expect is actually html. Note that json used to have dataType . You can also specify the type of data that you pass to the server using contentType , which is json in your case, so you should use application/json .

In your comments, your dataType should be json.

I just noticed that your $(document).ready(function() {}); seems to be $(document).ready(function() {}); seems closed. You seemed to forget ); . Is this a problem with the copy?

After your last code edit, you seem to have no comma between your success and error.

 $.ajax({ url: 'foo.php', data: mydata, type: 'get', dataType: 'json', success: function(data){ $("#content").html(data); }, // <--- error: function(e){ console.log(e.message); } }); 

Answer 2

You need to bind the form event.preventDefault() event and cancel the default event - that submits the form (either event.preventDefault() or just return false; which will also stop the distribution ).

 <form id="theForm"> <input type="submit" id="search-button"> </form> $("#theForm").submit(function(){ $.ajax({ url: 'foo.php', data: mydata, type: 'get', dataType: 'json', success: function(data){ $("#content").html(data); } }); return false; }); 

Also note that json must be the string 'json' in dataType . You may also consider using getJSON() . I also cleared unnecessary characters from the code.

Answer 3

Finally, I tried calling a standalone function:

 $.ajax({ ... ,success: function(data){ updCont(data) } ... }); function updCont(htm){ $("#content").html(htm); } 

I lost a couple of DAYS on this issue! The nightmare is over. Maybe IE8 does not trust external content, so it prohibits the insertion of new content from AJAX, and the existing function has more power and less browser security problems?

Oh yeh, also check event.preventDefault() for submit() action to pass