views:

304

answers:

4

Hi everybody,

I have a problem with the jquery-autocomplete pluging and my django script. I want an easy to use autocomplete plugin. And for what I see this (http://code.google.com/p/jquery-autocomplete/) one seems very usefull and easy. For the django part I use this (http://code.google.com/p/django-ajax-selects/) I modified it a little, because the out put looked a little bit weired to me. It had 2 '\n' for each new line, and there was no Content-Length Header in the response. First I thought this could be the problem, because all the online examples I found had them. But that was not the problem.

I have a very small test.html with the following body:

<body>
<form action="" method="post"> 
<p><label for="id_tag_list">Tag list:</label> 
<input id="id_tag_list" name="tag_list" maxlength="200" type="text" /> </p> 
<input type="submit" value="Submit" /> 
</form> 
</body>

And this is the JQuery call to add autocomplete to the input.

function formatItem_tag_list(row) {
    return row[2]
}
function formatResult_tag_list(row) {
    return row[1]
}

$(document).ready(function(){
    $("input[id='id_tag_list']").autocomplete({
        url:'http://gladis.org/ajax/tag',
        formatItem: formatItem_tag_list,
        formatResult: formatResult_tag_list,
            dataType:'text'
    }); 
});

When I'm typing something inside the Textfield Firefox (firebug) and Chromium-browser indicates that ther is an ajax call but with no response. If I just copy the line into my browser, I can see the the response. (this issue is solved, it was a safety feature from ajax not to get data from another domain)

For example when I am typing Bi in the textfield, the url "http://gladis.org/ajax/tag?q=Bi&amp;max... is generated. When you enter this in your browser you get this response:

4|Bier|Bier
43|Kolumbien|Kolumbien
33|Namibia|Namibia

Now my ajax call get the correct response, but there is still no list showing up with all the possible entries. I tried also to format the output, but this doesn't work either. I set brakepoints to the function and realized that they won't be called at all.

Here is a link to my minimum HTML file http://gladis.org/media/input.html

Has anybody an idea what i did wrong. I also uploaded all the files as a small zip at http://gladis.org/media/example.zip.

Thank you for your help!

[Edit] here is the urls conf:

(r'^ajax/(?P<channel>[a-z]+)$', 'ajax_select.views.ajax_lookup'),

and the ajax lookup channel configuration

AJAX_LOOKUP_CHANNELS = {
    # the simplest case, pass a DICT with the model and field to search against :
    'tag' : dict(model='htags.Tag', search_field='text'),
}

and the view:

def ajax_lookup(request,channel):
    """ this view supplies results for both foreign keys and many to many fields """

    # it should come in as GET unless global $.ajaxSetup({type:"POST"}) has been set
    # in which case we'll support POST
    if request.method == "GET":
        # we could also insist on an ajax request
        if 'q' not in request.GET:
            return HttpResponse('')
        query = request.GET['q']
    else:
        if 'q' not in request.POST:
            return HttpResponse('') # suspicious
        query = request.POST['q']

    lookup_channel = get_lookup(channel)

    if query:
        instances = lookup_channel.get_query(query,request)
    else:
        instances = []

    results = []
    for item in instances:
        results.append(u"%s|%s|%s" % (item.pk,lookup_channel.format_item(item),lookup_channel.format_result(item)))

    ret_string = "\n".join(results)
    resp = HttpResponse(ret_string,mimetype="text/html")
    resp['Content-Length'] = len(ret_string)
    return resp
+1  A: 

You probably need a trailing slash at the end of the URL.

Also, your jQuery selector is wrong. You don't need quotes within the square brackets. However, that selector is better written like this anyway:

$("input#id_tag_list")

or just

$("#id_tag_list")
Daniel Roseman
No, I don't need the trailing slash. In fact it will not work with one. It is because of the url configuration. As I said above, when I'm coping the url and paste it into the browser everything works fine.But thanks for tip with the selectors!
HWM-Rocker
A: 

As an aside, assuming your document.ready is in your Django template, it would be a good idea to utilize the {% url %} tag rather than hardcoding your URL.

$(document).ready(function(){
    $("input[id='id_tag_list']").autocomplete({
        url:'{% url my_tag_lookup %}',
        dataType:'text'
    }); 
});

This way the JS snippet will be rendered with the computed URL and your code will remain portable.

Brian Luft
Sure, when I convert this to a django template, i will change it. But right now I want that this autocomplete will also work for my static version. If there is too much rendered, it will be hard to find the real error.
HWM-Rocker
Maybe you can post your relevant urls conf and view?
Brian Luft
+1  A: 

Separate answer because I've just thought of another possibility: is your static page being served from the same domain as the Ajax call (gladis.org)? If not, the same-domain policy will prevent Ajax from being loaded.

Daniel Roseman
no, right now I am just using it as a local file. And open it with file:///...I will upload my file and check it again. Thx
HWM-Rocker
I just uploaded the file and got a return. So this was the right direction!!! Unfortunately the autocomplete still doesn't work. I also put the format_item, and format_result functions back in.
HWM-Rocker
A: 

I found a solution, but well I still don't know why the first approach didn't worked out. I just switched to a different library. I choose http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. This one is actually promoted by jQuery and it works ;)

HWM-Rocker