Stopped working with Jquery 1.4+

[pixelwiz]

Hi, this is a great plug-in, and I've been using it for a long while now with no issues. However, I had to upgrade to a later version of jQuery to take advantage of another feature, and as a result this stopped working. It works perfect for jQuery 1.3.2, but not with 1.4.4. Is there any chance you can fix that? I've actually contacted Jörn about it, and he first recommended to upgrade to the jQuery UI one, but then after I wasted a day and could not get it to do what this one does for me exactly, he suggested that I contact you and see if you can make it work with 1.4.4.

Thanks very much, the issue is when I start typing in the text field nothing happens...

[agarzola]

Hi, pixelwiz. When you say “nothing happens”, do you mean that the desired list of potential terms does not appear below the textfield, or does no text appear in the textfield whatsoever?

Are you sure you are using the latest version of the plugin? The version that I have here runs error-free with jQuery 1.4.2. Have you checked your console to see any errors that may pop up when using the plugin? Do you have an example site where I can view this problem you’re having?

I’ll look into this as soon as I get more information from you. Thank you!

[pixelwiz]

Heh, good question. I mean the desired list of potential terms does not appear below the textfield, and there are no javascript errors. It's like the keydown/keypress is not being detected (I'm in Firefox 3.6something if that matters), and is not triggering the list to show up. Thanks.

[agarzola]

Is this using Autocomplete 1.1 or 1.1.1?

[pixelwiz]

Originally 1.1, but then Jörn pointed me here to try yours, and the result is the same. Thanks for any help. Also, oddly enough, I also talked to the guy who posted another issue on here, and he said that it was working for him with 1.4.2, which I find very strange.

[agarzola]

OK. I’d like to see your implementation of the plugin. Can you show me where you’re using it? If it is on a private or sensitive project, would you mind trying to reproduce the problem in a test environment for me to review?

I can’t think of a more efficient way for me to address this. I don’t have much to go on right now.

[pixelwiz]

Ok, I'll have to setup a test scenario, it is protected. But even if I gave a login over private message, it's only in the dev environment, as prod is still jQuery 1.3.2 and it works there.

[agarzola]

Great, let me know. (Also, please make sure to publish without closing the issue ticket in future comments. Thanks!)

[dk1]

I experienced what could be the same issue myself, turns out I was sending a "Content-type: application/json" header even though my output from the server wasn't json (for the autocomplete output)

I added in:

complete: function (a, b) { console.log(a); console.log(b) },

just above line 373 and it showed I was a parseError - jQuery 1.4 must be stricter about using Content-type headers

[pixelwiz]

Hi, thanks for getting back to me about this. I haven't had a chance to recreate the issue in a publicly accessible place yet. However I think you may be right. I am indeed sending JSON object back, but without any header. Maybe I need to add a header? What did you do to fix it?

[agarzola]

Thanks for your input, dk1. I’m not terribly experienced with jQuery (or Javascript, for that matter), so I’m glad you took the time to debug this. I’ll take a look at your fix and see where that takes me.

pixelwiz, it seems adding a header may be one way to address the problem you were having.

[agarzola]

Sorry, I didn’t mean to close this issue. It is still open until we have confirmation that specifying a correct header fixes it.

[pixelwiz]

Hi, I tried to add your suggestion above like 373, I'm guessing you are talking about that autocomplete.js file. But nothing happened, Maybe I put it in the wrong spot, but I'm not seeing any output in the console. Is there anything else I can do to test it? I tried adding the header but nothing changed, except now I do see a JSON tab in Firebug.

[pixelwiz]

Ok, I've setup a publicly accessible page so you guys can see. (type in King, or just K and the list should be displayed) jQuery 1.3.2 works: http://scoring.pgalinks.com/jquerytest_old.cfm jQuery 1.4.4 does not work: http://scoring.pgalinks.com/jquerytest.cfm

[pixelwiz]

Oops, those links should be .net http://scoring.pgalinks.net/jquerytest_old.cfm http://scoring.pgalinks.net/jquerytest.cfm

[agarzola]

Hey, pixelwiz. I haven’t had a break to take a look at this yet, but wanted to thank you for taking the time to make it available for me to try out. I expect to have some time to look into it by the end of the week.

[dk1]

Hmm - I can't seem to get either to work here, tried Firefox and Safari

[agarzola]

pixelwiz, the url from which you’re loading your autocomplete terms into the data variable is incorrect. It’s pointing to .com instead of .net, thus the list is not loading at all. Looking at your addresses for these test environments makes me think that perhaps in your haste when first testing the plugin with jQuery 1.4.x, you overlooked this typo, which naturally crawled its way into the jQuery 1.3.2 version of the test when you cloned and renamed the test files for a quick comparison.

Let me know if this solves your problem. If not, let me know once you have that URL set up correctly in the jQuery 1.4.4 version of the test so I can see first hand the problem you’re having.

[pixelwiz]

Oops, it was still trying to access one of the protected resources. The links should load now.

http://scoring.pgalinks.net/jquerytest_old.cfm works

http://scoring.pgalinks.net/jquerytest.cfm doesn't

[agarzola]

Hi, pixelwiz.

Please try setting the option dataType: 'json' like this:

$.getJSON("qry_getPlayers_JSON.cfm?eventid=5001&round=1", function(data) {
        //$.dump(data);
        $("#player").autocomplete(data, {
            minChars: 0,
            matchContains: true,
            autoFill: false,
            dataType: 'json',
            formatItem: function(row, i, max) {
                return row.name;
            },
            formatResult: function(row) {
                return row.name;
            }}).result(function (evt, data, formatted) {
            //$.dump(data.id);
            $("#player_id").val(data.id);
        })
    });

Let me know if specifying the data type works for you as it seems to have worked for dk1. If it doesn’t, try adding the line suggested by dk1, complete: function (a, b) { console.log(a); console.log(b) }, right above line 372 in the autocomplete.js file, line this:

$.ajax({
            // try to leverage ajaxQueue plugin to abort previous requests
            mode: "abort",
            // limit abortion to this input
            port: "autocomplete" + input.name,
            dataType: options.dataType,
            url: options.url,
            data: $.extend({
                q: lastWord(term),
                limit: options.max
                complete: function (a, b) { console.log(a); console.log(b) }
            }, extraParams),
            success: function(data) {
                var parsed = options.parse && options.parse(data) || parse(data);
                cache.add(term, parsed);
                success(term, parsed);
            }

And then post whatever message you see in the console here.

Thanks!

[pixelwiz]

Thanks for trying to help, I tried both suggestions and got no further. I think the problem has something to do with the keydown event. If I try it in the old version I get this warning in the console: "The 'charCode' property of a keydown event should not be used. The value is meaningless."

However, if I try it in the new version, nothing happens. I get no messages in the console at all after the original request for data is received.

Any idea where this thing checks for the keydown event and how that could break?

[pixelwiz]

Any other suggestions?

[agarzola]

Hi, pixelwiz. Sorry I’ve been M.I.A., what with the holidays and all. I’ll be taking a closer look at this issue over the weekend and will get back to you with whatever I find.

Thank you for your patience.

[agarzola]

Hi, pixelwiz.

I see that for some reason no event listeners are bound to the input element on the 1.4.4 version. I also see that you’ve placed the script before the input element is declared in the html. The fact that it’s within $(document).ready(function(){ }); should make it irrelevant, but have you tried placing the script after the input?

I’ll be honest, I’m not sure what on earth is causing this on your case alone, so I’m trying to cover all the bases. Sorry I can’t be of more assistance.

[agarzola]

Hey, pixelwiz… Any updates on this issue?

[pixelwiz]

No, I'm still stuck on that and for the moment have to use the older jQuery to keep it working, which is preventing me from moving forward with some other stuff.

But like you said, something is up with the event listeners as of 1.4.4.

I might have to drop the use of this plug-in altogether and go with a combobox or something, but I really like how it works, and it was working perfect so far. So I wish there was a fix...

[agarzola]

OK, doing a bit of research on what has changed since v. 1.4.1, I see that .getJSON() (which you are using to grab and —presumably— parse the data) now uses the parseJSON method, introduced in 1.4.1. Before 1.4.1, I believe it used eval(), although I’m not sure.

I looked at the specs on .parseJSON(), and it is supposed to fail when a malformed JSON string is passed to it. I didn’t know this, but JSON is considered malformed when keys are not within quotes, so your JSON: [

    { name: "Blayne Hobbs", id: "10262" }, 
    { name: "Larry King", id: "10255" }, 
    { name: "Stuart Smith", id: "10449" } 
]

actually needs to look like this: [

    { "name": "Blayne Hobbs", "id": "10262" }, 
    { "name": "Larry King", "id": "10255" }, 
    { "name": "Stuart Smith", "id": "10449" } 
]

Please try adjusting your _qry_getPlayersJSON.cfm so that it returns your JSON string with the above modification. Let me know if that works.

References: http://api.jquery.com/jQuery.parseJSON/ http://api.jquery.com/jQuery.getJSON/

[pixelwiz]

Wow, nice find. I'll definitely give that a try and let you know. Thanks for digging that deep!

[agarzola]

No problem! I’m glad to help, as it allows me to learn as well. :)

I have a good feeling about that fix. I hope it hits the nail on the head.

[pixelwiz]

Yes, it's working again, thank you.

[agarzola]

Best news I’ve had all day, pixelwiz. Thank you for your patience!