Question

I’ve dug around for a while on Google and here on stack Overflow and can’t find anything related to this.

I’ve got multiple input textfields that when blurred calls a jQuery AJAX function to the server. It works beautifully, almost.

The problem is if I have focus on one text input and then click on another one (making it in focus). The blur event keeps getting fired with AJAX calls to the server and alerts.

Any ideas how to calm blur down so it isn’t constantly firing? There is probably something very simple that I’m not doing that might fix this.

Here’s the code (ignore the {{}} and {%%} tags, this is a django template).

The inputs:

    <td class="tracking-text">CK Req:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.checkreq|default_if_none:"&nbsp"}}" size="10"></td>
    <td class="tracking-text">LPD:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.lpd|default_if_none:""}}" size="10"></td>
    <td class="tracking-text">PR#</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prnumber|default_if_none:""}}" size="10"></td>
    <td class="tracking-text">DATE:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prdate|default_if_none:""}}" size="10"></td>

The jQuery:

        $('.tracking-input').blur(function(){

            $.post( "{% url buy.views.update_purchase_ajax %}",
                {pr_pk: $('span#pr_pk').html()},
                function(data){
                    alert(data.message);
                }, 'json');


        });

Any ideas would be greatly appreciated.

Answer 1

The alert is causing you to again lose focus, firing off another AJAX request.

Maybe fix it by only sending the AJAX request if the input is not empty?

Is this alert really needed or is it just for debugging? This is a prime example why you shouldn’t use alert for debugging. Use console.log.