jquery - ajax request is not working

I'm using jQuery autocomplete http://jqueryui.com/demos/autocomplete/#remote-jsonp where the ajax request is not working (not sending request to the specified url)

Here is the jQuery code:

$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

The requesting url should be this http://127.0.0.1:8000/keywords_suggestions/ but it is sending to http://127.0.0.1:8000/information/?query=web (the jquery autocomplete feature is implemented on this page http://127.0.0.1:8000/information/)

UPDATE-1

I've checked /keywords_suggestions/ page in the browser, it shows the Django server code didn't return the HttpResponse. Is this the source of a problem? I couldn't understand, the request url from autocomplete itself is not correct. So how could this Django server code cause a problem?

Could anyone tell me the mistake I've done? Thanks!

Answers


Try giving the outgoing data a type and some manually manipulation of that:

$("#add-keywords").autocomplete({
    source: function(request, response) {
        var q = $("#add-keywords").val();
        var pString = '{"query":"' + q + '"}';

        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: pString,
            contentType: "application/json",
            success: function(data) {
                response(data);
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + 
        ui.item.label : "Nothing selected, input was " + 
         this.value);
    }
});

contentType will tell the server what to expect.


Seems like there are two potential problems here:

  1. As you've stated, the Ajax request is being sent to /Information/. I suggest you set url to 'http://localhost:8000/keywords_suggestions/'. I don't suggest leaving it this way, but just to see if you can get the request sent to the proper location.

  2. The Auto Complete plugin sends "term=theSearchTerm" as a GET parameter, not query. Did you make any changes to the plugin code to look for query, instead?

Also, what happens in your /keywords_suggestions/?


$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            },
            success: function(data) {
                // do something here with the returned data
                console.log(data);
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

As mentioned above, you need to define a "success" callback function in the data object that you pass into the $.ajax call which tells jQuery what to do with the data once it has been returned.

Of course, you may have to think about restructuring- AJAX requests execute asynchronously by default, which means that as the browser is waiting for the server to return the data from the AJAX call, it will continue to execute the remaining Javascript code. In this case, calling the "autocomplete" function likely happens BEFORE the data is returned from the server- and that's no good!

So if I'm not mistaken, you'll have to restructure this JS to:

1.) Bind, say, a "change" event to "#add-keywords"...

2.) ...so that when a user begins typing, the ajax call is executed

3.) Then, upon successful return of that data, do the autocomplete call that you're trying to stuff that ajax call into as it stands now.

I think this will work for you. Let me know how it goes.


Need Your Help

Cannot force install GD with cpan/cpanm

perl gd perl-module cpan

I have looked and seen similar issues posted but am unable to get GD working. the following error arises with libgd and libpng installed...

phonegap notification methods still use webview alert

javascript cordova webview phonegap-plugins cordova-3

I'm using phonegap CLI to check if default notifications work. I already added the notification plugin and I got this output when I ran :