JQuery Issue with all browsers but IE 6.0/7.0 :)

Question

Never thought I'd have this problem :)

The following snippet of code works in IE 6.0/7.0 but none of the other browsers (well, IE 8.0 in "compatibility view"):

$(document).ready(function(){

    // Search button code
    $('#btnSearch').click(function() { //start function when button is clicked
            var sid = $('#search_id').val();
            $.ajax({
                    method: "get",url: "controller.php",data: { search_id:sid, action:'search'} ,
                    beforeSend: function(){$("#loading").show("slow");}, //show loading just when link is clicked
                    complete: function(){ $("#loading").hide("slow");}, //stop showing loading when the process is complete
                    success: function(html){ //so, if data is retrieved, store it in html
                            $('.main_content').html(html); //show the html inside .main_content div
                            $('.main_content').show("slow"); //animation
                    }
            });

            $("form").each(function() {
                    this.reset();
            });
    });
});

HTML looks like (only relevant parts included):

<div>
<form id="srchForm" method="post" action="">
<p><abbr title="Search ID"><label for="search_id">Search ID:</label></abbr><input   type="text" name="search_id" id="search_id">
<button id="btnSearch" value="search">go</button>
</p>
</form>
<div id="loading">LOADING!!!!!!!!!!!!!!!!<br></div>
<hr>
<div id="main_content" class="main_content"></div>
</div>
<div>
<div class="add_content"></div>
</div>

Can anyone spot what I'm doing wrong?

Answer 1

From a quick look it looks like:

The data property of the ajax method allows both JavaScript Objects and Strings, but I have never had any luck using anything other than a JSON String. In IE you can use JSON.Stringify() but you should take a look at some of the JQuery Plugins. For example this one jquery-json:

data: { search_id:sid, action:'search'} ,

would become:

data: $.toJSON({ search_id:sid, action:'search'}) ,

Secondly:

$('.main_content').html(thml);

It looks like you wrote 'thml' instead of 'html'.

Otherwise the code looks fine to me.

Answer 2

Just a wild guess, could you try to define your button as 'input' tag instead of 'button' tag?

<input id="btnSearch" value="search" type="button" /> //Use this
<button id="btnSearch" value="search">go</button> //instead of this

Try it and see if it changes anything.