How can I call 2 different URLs with 2 inputs using Ajax

How can I do short JS coding that ? I would like to write value and data-sutun's result with a Ajax.

<input autocomplete="off"
       data-sutun="namedata"
       type="text"
       id="form-name"
       name="gonkod"
       class="form-control input-data typeahead" />

<input autocomplete="off"
       data-sutun="countrydata"
       type="text"
       id="form-country"
       name="gonkod"
       class="form-control input-data typeaheadtwo" />

$( document ).ready(function() {
  $('input.typeahead').typeahead({
    source: function (query, process) {
      var verim = $('#form-name').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

$( document ).ready(function() {
  $('input.typeaheatow').typeahead({
    source: function (query, process) {
      var verim = $('#form-country').data('sutun');

      return $.post("{{ URL }}{{ dil }}/ajax/autogkod", { query: query, verim :verim }, function (data) {
        data = $.parseJSON(data);
        return process(data);
      });
    },
    showHintOnFocus:'all'
  });
});

2 answers

  • answered 2018-01-11 19:47 charlietfl

    Whenever you need to pass element specific data to individual instances of a plugin use an each loop so you can access the element instance inside each as this

    $('#form-name, #form-country').each(function(){
       var $input = $(this),
            // store verim here since `this` might be different in source callback
            verim = $input.data('sutun');
    
       $input.typeahead({
           .....
    
    }) 
    

  • answered 2018-01-11 19:47 Louys Patrice Bessette

    If the {{ URL }} is different for the two inputs...

    Have the {{ URL }} in a data attribute for each.

    <input autocomplete="off"
           data-sutun="namedata"
           data-url="{{ URL }}{{ dil }}/ajax/autogkod"
           type="text"
           id="form-name"
           name="gonkod"
           class="form-control input-data typeahead" />
    
    <input autocomplete="off"
           data-sutun="countrydata"
           data-url="{{ URL }}{{ dil }}/ajax/autogkod"
           type="text"
           id="form-country"
           name="gonkod"
           class="form-control input-data typeaheadtwo" />
    

    Then, in the typeahead instantiation, use $(this).data("url").

    $( document ).ready(function() {
      $('input.typeahead, input.typeaheadtwo').typeahead({
        source: function (query, process) {
          var verim = $('#form-name').data('sutun');
    
          return $.post($(this).data("url"), { query: query, verim :verim }, function (data) {
            data = $.parseJSON(data);
            return process(data);
          });
        },
        showHintOnFocus:'all'
      });
    });
    

    Notice that you can have more than one selector... You can coma separate them like this: $('input.typeahead, input.typeaheatwo')