Element value blank with $.autocomplete runs ...

[dalecosp]

Probably something stupid --- (the coder?)

This has been giving me fits all afternoon. I'm loading a page with this in it:

<script type="text/javascript">// <![CDATA[

   thisnamed = DK.thisname;

 $('#company_location').val($('#company_location').val().replace(/\s/g,"+")).autocomplete({
     url: "//www.work.com/white/data_server.php?name="+thisnamed+"&f=addr",
     minChars:2,
     maxItemsToShow:10,
     useCache:false
   //open: function(event, ui) { disable=true },
   //close: function(event, ui) { disable=false; $(this).focus(); }
   });
// ]]>
      </script>

Of course, it's not "work.com". jQuery and autocomplete are loaded and doing their thing elsewhere on the page.

DK is an object. Debugger doesn't show errors or anything like that.

The issue seems to be that although I can get the correct value for DK.thisname in the console, the Net panel shows $.ajax asking for its url without the name variable in the GET string:

Firebug wrote:

GET http://www.work.com/white/data_server.php?name=&f=addr&q=123

And ... it doesn't seem to matter if I do this:

DK.thisname = document.getElementById('element_name').value;

Or even this:

$('#company_location').val($('#company_location').val().replace(/\s/g,"+")).autocomplete({
         url: "//www.work.com/white/data_server.php?name="+document.getElementById('element_name').value+"&f=addr",
         minChars:2,
         maxItemsToShow:10,
         useCache:false
   });

Or just use "DK.thisname" in there ... doesn't seem to matter.

I can't tell if it's some sort of scoping issue, or a DOM event/firing/timing issue ... I'm thinking it should be working.

Can anyone give some light on this one?

Thank you ... 🙂

[johanafm]

Autocomplete isn't part of jQuery is it? And there are scores of plugins. Might be relevant.

Anyway, have you set a breakpoint to inspect the live data just before the call to autocomplete?
Have you stepped into autocomplete to see what happens there?

Have you tried replacing autocomplete({…}) with

.ajax({
   url : 'same-as-before'
})

and see what that produces?

[dalecosp]

Thanks, johanafm.

This is probably a noob thing. I hadn't set breakpoints, but I did, and they didn't fire.

That confused me at first, but led me to the solution ... I think.

I noticed that a partial refresh (FFox remembers the field values) would allow the .autocomplete() to fire, using whatever value was in the field at time of page load.

So, my theory is that .autocomplete was loading at page load, and fires as a result of its programming(?), but my script to call it couldn't be updated with new data. The solution, then, was to wrap it in a function attached to a keypress event in the field in question. That seems to be working now.

So, the reason the breakpoint wasn't firing was because it was only called at page load? Or, so I theorize....

[johanafm]

Ah yes you are correct. If this runs while the page is loading or on ready or on load, then it will indeed execute only once.

$('#company_location').val($('#company_location').val().replace(/\s/g,"+")).autocomplete({});

What you see is nothing other than function chaining, so if it was php, it'd be along the lines of

new jQuery('element')->val(urlencode(new jQuery('element')->val())->autocomplete(new Settings(…));

Do as you suggest and add a keyboard event. Something like this, alongside a few suggestions for improving your javascript code

        jQuery(document).ready(function ($) {
            $('#your-input').on('keyup', function(e) {
                /* thisnamed = DK.thisname;
                 * will set the propery window.thisnamed = DK.thisnames
                 *
                 * For function local variables, you have to use the "var" keyword
                 * or in this case, I'd simply skip the middleman "thisnamed" and
                 * use DK.thisname when building the url
                 */
                // var thisnamed = DK.thisname
                // and assuming DK is global, I'd usually recommend referencing it as such
                var thisnamed = window.DK.thisname, $cl;

            /*
             * $('#company_location') calls the jQuery constructor. It's considered bad form to call the
             * constructor repeatedly for the same set of elements, because it is inefficient. It also
             * drains cell power on mobile devices
             *
             * Either keep a reference to the constructed object for repeated use (probably customary)
             * $cl = $('#company_location');
             * $cl.val($cl.val().replace(/s/g,"+")).autocomplete()
             *
             * Or skip jQuery inside the first call to val() where this is the current DOM element
             * $('#company_location').val(this.value.replace(/s/g,"+")).autocomplete()
             * 
             * And if #company_location is your input, then
             * this.value = this.value.replace(…);
             * would do the trick
             */
            $cl = $('#company_location');
            $cl.val($cl.val().replace(/\s/g, "+")).autocomplete({
                /* Assuming the plugin handles this option objet just like jQuery does its ajax options
                 * you can assign data separately. Possibly more readable.
                 * This assumes it is sent as a GET request
                 */
                url: "//www.work.com/white/data_server.php",
                data: {
                    name: thisnamed,
                    f: 'addr'
                },
                minChars: 2,
                maxItemsToShow: 10,
                useCache: false
//open: function(event, ui) { disable=true },
//close: function(event, ui) { disable=false; $(this).focus(); }
            });
        });

    });

As for the actual implementation to initiate the request you may want to see how it's done elsewhere. Because it may be unnecessary to send a request on every keyup. I believe it's usually handled by a mix of

onkeyup
&&
(time_since_last_keyup > X)