Why the AJAX function is not getting called and alert is not getting printed upon calling the function?

Question

I want to call the ajax function once user clicks on the select control or the select control gets focus to itself from keyboard.

HTML code is as follows :

<select id="scanner" name="scanner" class="form-control"></select>

The jQuery-AJAX function I wrote is as follows but the aler("Hello") is not getting printed. why so?

 $("#scanner").bind("change",function() { alert("Hello");

    var mod_url = $('#mod_url').val(); 

    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { alert(result);
        $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
  });

check in firebug or in developer console of browser ,is there any errors ? — Shailendra Sharma, Dec 16 '14 at 06:38
@Transformer:Tried still no alert from success function too. — PHPFan, Dec 16 '14 at 06:40
"focus" try with this instead of "change" or bind both like "focus change". select doesn't fire change event from keypress events in some browsers like firefox sometime back. — Jai, Dec 16 '14 at 06:44
change event triggers only when you change or select the options.Try with click or focus event — user3040610, Dec 16 '14 at 06:46

score 2 · Accepted Answer · answered Dec 16 '14 at 06:41

In your code i haven't seen any options for html select box

And, you have registered a change event on select box which will occur only on selecting the options in select box

Add few options in select box and try to select options which will fire the ajax call

See JS FIDDLE HERE

score 1 · Answer 2 · answered Dec 16 '14 at 06:50

I think you should do this instead:

 $("#scanner").bind("focus", function() { 
    alert("Hello");
    var mod_url = $('#mod_url').val(); 
    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "html",
      type: "GET",
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { 
          alert(result);
          $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
  });

And one suggestion about bind is, you can use .on() method instead if you are using jQuery version 1.7+.

What seems to me you want to generate your #scanner elements options by your ajax call, so the changes are:

remove the async:false because ajax has to be asynchronous.
change the dataType to html because it seems that you are returning options from there as $('#scanner').html(result); suggests.

Shailendra Sharma · Answer 3 · 2014-12-16T07:00:06.317

I Think This is what you want

  $("#scanner").bind('focus',function () {
            Myfunction(); // call what you want to call on focus 
        }).change(function() {
              Myfunction()      // call what you want to call on Change                    
      });



function Myfunction()
{
    var mod_url = "http://google.com"; 

    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { alert(result);
        $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
}

here js fiddle DEMO

Why the AJAX function is not getting called and alert is not getting printed upon calling the function?

3 Answers3

Linked