How to solve window load event issue in jquery?

Question

i have used $(window).load in my project, when my page got loads first time, it works fine. But when my page loads from cache or reload quickly then code written inside $(window).load function does not works. How to solve this issue?

code in window.load

$(window).load(function () {
    selectedfacode = '<?php echo isset($fmvrf_info)?$fmvrf_info["facode"]:''; ?>';
    if (selectedfacode > 0) {
        $('#facode option[value="' + selectedfacode + '"]').prop('selected', true);
    }
});
//also tried with
$("#facode").ajaxComplete(function () {
    selectedfacode = '<?php echo isset($fmvrf_info)?$fmvrf_info["facode"]:''; ?>';
    if (selectedfacode > 0) {
        $('#facode option[value="' + selectedfacode + '"]').prop('selected', true);
    }
});

Answer 1

You have a logic error where you compare if (selectedfacode > 0) because selectedfacode is defined as a string ( '' at a minimum, if no output returned from the PHP server script) and String > 0 will return false in JavaScript.

I suggest you check the string's length instead.

You code before the fix: it will never select a value in #facode

 $(window).load(function() { selectedfacode = 'br'; if (selectedfacode > 0) { alert("WILL NEVER GET HERE"); $('#facode option[value="' + selectedfacode + '"]').prop('selected', true); } console.log("Can a string be > 0 in JavaScript? Answer: " + ("a string" > 0) + ""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='facode'> <option value='bl'>Blondes</option> <option value='br'>Brunettes</option> </select> 

Your code after the fix: checking the string length > 0

 $(window).load(function() { selectedfacode = 'br'; if (selectedfacode.length > 0) { $('#facode option[value="' + selectedfacode + '"]').prop('selected', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='facode'> <option value='bl'>Blondes</option> <option value='br'>Brunettes</option> </select> 

Next steps: after you fix this issue (assuming it was not an error introduced while copying and pasting into the question) if you still are having problems that vary between full load and cache hit it may be a timing issue. For example, if you are loading the select element via AJAX you should obviously wait until it is loaded before trying to select an option, etc.

Answer 2

Change your technique as below to achieve what you want. First of all set your variable value same as you did but instead of '' string set it as 0 for minimum.

$(window).load(function () {
    selectedfacode = '<?php echo isset($fmvrf_info)?$fmvrf_info["facode"]:0; ?>';
});

Now your ajax code should run to get your data for drop down like:

$.ajax({
     type: "POST",
     data: "",
     url: "urlhere",
     success: function(result){
         //set your result as option list of your drop down as u explained above in comments.
         //here main work is call to a function which make an option selected as per the value you set in variable.
         setSelectedOpt();
     }
});

Your setSelectedOpt function here which will make an option as selected from options list based on your variable value.

function setSelectedOpt(){
    //put if condition inside this function like:
    if( typeof selectedfacode !== 'undefined' && selectedfacode>0)
    {
     $('#facode option[value="' + selectedfacode + '"]').prop('selected', true);
     selectedfacode = 0;
    }
}