JQuery autocomplete not working until after page refresh and/or a random event

Apologies for the title.

I have a page using two scripts, both acting upon the same form.

This is an autosave script (as there is a lot of typing on the form, I don't want users to lose data).

<script rel="text/javascript">
    $(function () {
        $.post("autosave.php", "json");
        setInterval(function () {
            $.post("autosave.php", $("form").serialize());
        }, 2000);
    });
</script>

Which works well. autosave.php is nothing more than a simple db query updating the various fields from the POST data its getting from the form.

I am also using an autocomplete script for the email field in my form.

<script rel="text/javascript">
    $(function() {
        var availableTags = <?php include('view-job-q-em-search.php'); ?>;
        $("#sendy_to").autocomplete({
            source: availableTags,
            autoFocus:true
        });
    });
</script>

This also works well, the PHP script in this again is just a simple db query returning a json array.

However, they don't work well together, well they do, to a fashion.

Interestingly if I type even so much as a single character into one of the text boxes on the form, then refresh, the autocomplete starts working, but it wont when the page loads for the first time. It is like it is stuck waiting for the autosave to perform its first action before the autocompete kicks in.

I am versed enough in Jquery to make these things work, but not good enough yet to spot the anomaly's, so any help or ideas to make this work would be great.

I'm also using generic external scripts jquery.min, jquery,ui which are loaded at the start of the page in the <head>

Solution

By the looks of it (and without running too many tests), you're running your code in a synchronous way. What I mean is that this statement:

var availableTags = <?php include('view-job-q-em-search.php'); ?>;

is preventing the execution of the rest of the code since your server is parsing a PHP script. Instead of including a script for your availableTags, use AJAX to request the tags available, for example:

var availableTags;
$.get( "tags/getAvailable", function( data ) {
    availableTags = data;
    $("#sendy_to").autocomplete({
        source: availableTags,
        autoFocus:true
    });
});

that should solve the issue. Could you elaborate on the contents of view-job-q-em-search.php?