CODEWITHSUNDEEP
javascriptjqueryajax
jangun
jangun

Reputation: 31

jQuery ajax issue with search

I'm working on the functionality of searching images in a ajax based div which is also loading the data in a div container.

I have the following code and it works fine, if I am not executing any search criteria. If I add search, it throws error in all browsers in jquery min.js file. I am using version 1.11.1 for this. Different browsers show different errors.

jQuery code:

$(document).ready(function() {
    $("#finder").blur(executeFunction);
    function executeFunction(page) {
        page = typeof parseInt(page) == "number" ? page : 1;
        $.ajax
        ({
            type: "POST",
            url: "find.php",
            data: {
                page: page,
                search: encodeURIComponent( $('#finder').val() )
            },
            success: function(msg)
            {
                $(document).ajaxComplete(function(event, request, settings)
                {
                    $("#container").html(msg);
                });
            }
        });
    }
    executeFunction(1);
});

HTML code:

<input type="finder" id="finder" />

Without search all work fine..

Here is the error I received in Firefox: 

TypeError: 'initUIEvent' called on an object that does not implement interface UIEvent.

...unction(a,b){var c,d=[],e=function(a,b){b=m.isFunction(b)?b():null==b?"":b,d[d.l...

Chrome Error: 

Uncaught TypeError: Illegal invocation jquery-latest.min.js:4e jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4m.param jquery-latest.min.js:4m.extend.ajax jquery-latest.min.js:4loadData (index):112m.event.dispatch jquery-latest.min.js:3r.handle

Opera Error: 

Uncaught RangeError: Maximum call stack size exceeded

every time i search, the error counter is increasing with same error message

IE 11 Error: 

Argument not optional

Upvotes: 0

Views: 1027

Answers (1)

Gnani
Gnani

Reputation: 465

I did not try recreating this issue just a hunch. 

typeof parseInt(page) == "number"

The above statement is always true. If page is event-object the parseInt of page is NaN which will return true for the above statement.

I think the following will be better

$("#finder").blur(function(e) {
   executeFunction(1);
});

Other things.

You are binding one instance of following ajaxCompleteEvent every time an ajax request complete. In other words the result is being written to the page multiple times.

      $(document).ajaxComplete(function(event, request, settings){
            $("#container").html(msg);
      });

Why don't you simply use 

$("#container").html(msg);

in its place?

Upvotes: 1

Related Questions