jQuery AJAX with IE8

Question

I am attempting to implement a get request via $.ajax upon the user submitting a form.

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

My result is that the content div is filled properly in FF/Chrome, but IE it is not. IE seems to be submitting the form and reloading the page entirely.

In addition, I really do think I need to "submit" the form, because I want to take advantage of jQuery validate(); which does not work with the below implementation (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>

change your `dataType : json` to `dataType: 'json'` (with the quotes around json) — Ayush, Jun 15 '12 at 18:34
also, you have a `,` missed after `type: 'get'`,not sure if that is a typo when you pasted the code here — Claudio Redi, Jun 15 '12 at 18:35
You should also handle the case of submitting the form by hitting Enter!! — frictionlesspulley, Jun 15 '12 at 18:36
I'm returning JSON, myData is a structure of params I am sending, I didn't include it as it wasn't relevant. — Jason Wells, Jun 15 '12 at 18:53

Josh Mein · Answer 1 · 2012-06-15T19:20:45.660

3

You should change your submit button to be of type button. Inputs of type submit automatically post the page and in your case this is not necessary.

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

Otherwise you can prevent the default action of the button 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 back from the server, it is best to specify the dataType that you are expecting is actually html. Note, you previously had json to be the dataType. You can also specify the type of data you are passing to the server using contentType which in your case is json so you should use application/json.

Per your comments, your dataType should be json.

I just noticed that it seems your $(document).ready(function() {}); does not seem to be closed. You seemed to have forgot the );. Is this a copy paste issue?

After your most recent code edit, you seem to be missing a 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);
    }
});

edited Jun 15 '12 at 19:20

answered Jun 15 '12 at 18:34

Josh Mein

28,107
15
76
87

I am getting JSON back from the server – Jason Wells Jun 15 '12 at 18:54
Why are you putting straight json into a div? Are you just getting back a string? – Josh Mein Jun 15 '12 at 18:54
Josh, I'm just putting it there for testing. Going to format it later. Point is, IE is submitting the form (page is refreshing) where as FF and Chrome are behaving as expected. – Jason Wells Jun 15 '12 at 18:58
Your $(document).ready(function() {}); does not seem to be closed. – Josh Mein Jun 15 '12 at 19:08
It seems closed on my end, I'd think FF or Chrome would complain / not work if that were the case. Sublime text also is aligning my brackets properly, so I can confirm the syntax is ok. – Jason Wells Jun 15 '12 at 19:11
@Jason Wells Must have been a copy paste issue. Did you try using event.preventDefault()? – Josh Mein Jun 15 '12 at 19:13
I did, no dice :( Is there additional debugging tools for IE that might help me? I am able to alert the "myData" variable in IE right before the start of the ajax call, so it definitely is getting to that point. – Jason Wells Jun 15 '12 at 19:16
@Jason Wells You are missing a comma after your success and before your error. – Josh Mein Jun 15 '12 at 19:19
Sorry, it's there on my page - I didn't copy and paste the exact code for privacy purposes. – Jason Wells Jun 15 '12 at 19:19
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12617/discussion-between-josh-mein-and-jason-wells) – Josh Mein Jun 15 '12 at 19:22

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

You should bind on the submit event of the form, and cancel the default event - which is submitting the form (either by event.preventDefault() or simply return false;, which will also stop propagation).

<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 notice that json should be the string 'json' in dataType. You could also consider using getJSON(). I also cleaned some unnecessary characters from the code.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 15 '12 at 18:35

kapa

77,694
21
158
175

Thanks, it still is working in FF, but IE is still reloading the page entirely, with no errors in the log. – Jason Wells Jun 15 '12 at 18:39
FWIW, it's not getting to the success attribute of my ajax call.. if I throw an alert() within success it comes up in FF, but not IE – Jason Wells Jun 15 '12 at 18:40
@JasonWells Could you set up some kind of demo or test case? This code should work. – kapa Jun 15 '12 at 18:46
Sure, let me see what I can do on jsfiddle – Jason Wells Jun 15 '12 at 18:46

score 0 · Answer 3 · answered Aug 13 '13 at 17:40

I finally tried calling a free-standing function:

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

I lost a couple of DAYS on this problem! Nightmare over. Maybe IE8 doesn't trust foreign content so disallows inserting new content from AJAX, while an already existing function has more power and less browser security issues?

Oh, yeh, also check out event.preventDefault() to keep the submit() action from taking over

jQuery AJAX with IE8

3 Answers3