How to check if the data were loaded in the element before getting its value

Question

I have a select input, which is being populated by a value from the database using ajax-php-ajax to element, after the result was loaded it has now a value on the select,

before

  <select type="text" id="sys_type" name="" class="form_input" required/>
  </select>

after

  <select type="text" id="sys_type" name="" class="form_input" required/>
  <option value="2">Super Admin</option>
  <option value="3">Admin</option>                                                                          
  <option value="4">Encoder</option>                                                                         
  <option value="5">Office Staff</option>                                                                          
  <option value="6">Guest</option>-->                                                                           
  </select>

heres the part of the code function

<script type="text/javascript" language="javascript">
$(document).ready(function()
{

      objFunction["select_usertype"]($("#sys_type"), Base64.encode("select_usertype"));

      //objFunction[js_obj_function](selector, php_action )
      //objFunction is an object that holds some functions
      //var objFunction= { js_obj_function : function(){ //...ajax here//}  }

     //now the problem
     //============================================================
     var usertype= $("#sys_type").val(); //if i'm using this it returns null 
     //maybe this is executed when the above function is not done yet.

});
</script>

I can't get the value for that, i tried to use this as solution but didn't work

function looper()
    {
        if($("#sys_type").val() !=="" )//if($("#sys_type option:selected").val() !=="" )
        {
            console.log($("#sys_type").val()); //returned null
            clearInterval(int);
        }
   }

   var int = setInterval(looper(), 10);

Thanks for any help in advance,

 ///-------------------->Request Response
 var objFunction= 
 {
    select_usertype: function select_usertype(element, action,middlewaretoken)
  {
  if(middlewaretoken!=="")
    {
        $.ajax({
                type: "POST",
                url:  "private/process/request.php",
                dataType: "json",
                data:{action: action, middlewaretoken:Base64.encode(middlewaretoken)},
                success:function(data)
                {
                    if(data.error!==true)
                    {
                        if(element.length > 1)
                        {
                            for(var x=0; x < element.length; x++)
                            {
                              element[x].empty();
                              for(var i=0; i < data.length; i++)
                                {
                                element[x].append('<option value="'+data[i].sys_id+'">'+data[i].sys_usertype+'</option>');
                                }
                            }
                        }
                        else
                        {

                              element.empty();
                              for(var i=0; i < data.length; i++)
                                {
                                element.append('<option value="'+data[i].sys_id+'">'+data[i].sys_usertype+'</option>');
                                }
                        }

                    }
                    else
                    {
                        if(element.length > 1)
                        {
                            for(var i=0; i < element.length; i++)
                            {
                            element[i].empty().append('<option value="">Select...</option>'); 
                            }
                        }
                        else
                        {
                        element.empty().append('<option value="">Select...</option>');
                        }
                    }
                }
                });
    }
    }//, other objects.....

};

Answer 1

If you are using jQuery.ajax() you can write something like this

jQuery.ajax(...).done(function() {
    var usertype= $("#sys_type").val();
}).fail(function() {
    //some error handling
});

edited

You can modify your select_usertype function like this

function(...) {
    if(...) {
         return jQuery.ajax(...);
    }
}

And move your succes function

var oAjaxRequest  = objFunction["select_usertype"]($("#sys_type"), Base64.encode("select_usertype"));
if (oAjaxRequest) {
     oAjaxRequest.done(function(oData) {
         //all other staff
         ....
         var usertype= $("#sys_type").val();
     }.bind(objFunction["select_usertype"]));
}

Or you can pass some callback to select_usertype function and call it in the success function. For example:

function(element, action, middlewaretoken, successCallback) {
    if(...) {
         jQuery.ajax(
             ...,
             success: function(oData) {
                 ...
                 successCallback.call();
             }
         );
    }
}

And in document.ready pass it

function process() {
    var usertype= $("#sys_type").val();
}

objFunction["select_usertype"]($("#sys_type"), Base64.encode("select_usertype"), null, process.bind(this));