jQuery - запустить функцию при фокусировке на поле ввода

Question

У меня есть поле для ввода текста, в котором при нажатии json-запрос срабатывает, и некоторые данные извлекаются.

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

Как это сделать, этот запрос запускается только один раз, а некаждый раз, когда я фокусируюсь на текстовом поле?Но я все еще хочу, чтобы data был доступен, когда я фокусируюсь во 2-й, 3-й раз и т. Д.

Answer 1

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

Answer 2

Если ваши элементы input не используют одни и те же данные, сделайте следующее:

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);
    }
});

Если они имеют общий доступ к данным, это почти тот же код, но с общей переменной вместо использования 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);
    }
});

Вы также можете создать небольшой плагин jQuery для обработки любого из вышеуказанных сценариев, который также поддерживает несколько событий:

(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);

Использование для этого плагина будет:

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

И только для ударов, улучшенная версия принятого ответа:

$('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')); });
});

Answer 3

Что-то вроде этого поможет:

//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');
        });
    }
);

Answer 4

Назначьте другую функцию по первому щелчку или сохраните некоторое значение в атрибуте alt, указывающее, нужно ли вам запустить запрос или нет