jQuery - run a function when focusing on a input field

I have a text input field, on which when you click a json request fires off, and some data gets retrieved.

$("input").focus(function(){
 var thefield = $(this);
 $.getJSON("http://www.blabla.com/bla",
    function(data){
      alert(JSON.stringify(data));  
          thefield.val('blabla');
    }
   );  
});

How can I do so this request only gets to run once and not every time I focus on the tex开发者_StackOverflow社区t field? But I still want data to be available when I focus the 2nd, 3rd time etc.

$('input').one('focus', function() {
    // load data using ajax
    $(this).data('ajax-data', data);
});
$('input').focus(function() { $(this).val($(this).data('ajax-data')); });

Assign another function on the first click or store some value in alt attribute indicating whether you need to fire a request or not

Something like this will do the trick:

//have this line outside any function to make it global:
var _globalData = "";

$("input").focus(function(){
    if ($(this).attr("focused") == "1") {
        alert("already focused before, data is: " + _globalData);
    }
    else {
        var thefield = $(this);
        $.getJSON("http://www.blabla.com/bla",
        function(data) {
            _globalData = JSON.stringify(data);
            alert(_globalData);  
            thefield.val('blabla');
            thefield.attr('focused', '1');
        });
    }
);

If your input elements do not share the same data do this:

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            field.data("ajax-data", response).val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if ($this.data("ajax-data")) {
        $(this).val($this.data("ajax-data"));
    } else {
        loadData($this);
    }
});

If they do share data, it's nearly the same code but with a shared variable instead of using data.

var data = null;

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            data = response;
            field.val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if (data) {
        $(this).val(data);
    } else {
        loadData($this);
    }
});

You can also create a small jQuery plugin to handle any of the above scenarios, and that also support multiple events:

(function($){

    $.fn.loadInputData = function(options){

        var defaults = {
            url: "http://www.blabla.com/bla",
            events: "focus",
            sharedData: false
        };
        var _data = null;

        options = $.extend({}, defaults, options);

        function loadData(field){
            $.getJSON(options.url,
                function(response){
                    if (options.sharedData) {
                        _data = response;
                    } else {
                        field.data("ajax-data", response);
                    }
                    field.val(response);
                }
            );
        }

        return this.each(function(){
            var $this = $(this);
            $this.bind(options.events, function(){
                if ((options.sharedData && !_data) ||
                    (!options.sharedData && !$this.data("ajax-data")) {
                    loadData($this);
                } else {
                    $this.val(options.sharedData ? _data : $this.data("ajax-data"));
                }
            });
        })
    };
})(jQuery);

Usage for this plugin would be:

$("input").loadInputData({ sharedData: true });

And just for the kicks, an improved version of the accepted answer:

$('input').one('focus', function() {
    var $this = $(this);
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            $this.data("ajax-data", response).val(response);
        }
    );
    $this.focus(function() { $this.val($this.data('ajax-data')); });
});