Call a function after onload event

StackOverflow https://stackoverflow.com/questions/21847688

  •  13-10-2022
  •  | 
  •  

Question

I have the following problem which I don't know how to solve.

There are two select elements on the page. On the first one options are static and the second have a dynamic elements which are changed based on selection in the first one. On onload event function is called that is filling options in the second select elements.

Values from select element are inside form and these values need to be saved after form submit (page will be refreshed) so the selected options can be preserved. I'm saving previous values in $_POST variable and setting options with function that is called on form submit.

Problem is that the function for selecting options is called before onload event. Function called on onload event overwrites selected option and the first option is always selected.

Any idea how to solve this?

<!doctype html>
<html lang="en">
<head>    
    <meta charset = "utf-8">
    <link href="style/styleFTT.css" rel="stylesheet" type="text/css"> 

    <script type="text/javascript">
        //php code: echo "var operatorPositions = $jsonOperatorPositions; \n";


        function updateOperatorPositions(){
            lineId = document.getElementById("line");
            selectedValue = lineId[lineId.selectedIndex].text;
            var operatorPositionSelect = document.getElementById("operatorPositions");

            operatorPositionSelect.options.length = 0; //emprty previous options from selection

            // fill the selection with new options
            var j = 0;        
            for (var i = 1; i<operatorPositions.length; i++){
                if (operatorPositions[i]["line"] == selectedValue) {
                    operatorPositionSelect.options[j] = new Option(operatorPositions[i]["positionOfOperator"], operatorPositions[i]["positionOfOperator"]);
                    j += 1;
                }
            }
            console.log('Refreshed field in the SECOND select element');
        }    

        function showMenu(elmnt) {
            document.getElementById(elmnt).style.display="block";
        }
        function hideMenu(elmnt) {
            document.getElementById(elmnt).style.display="none";
        } 

        function setSelectOption(ElementID, Value){
            console.log('Setting the new option. '+'ElementID: '+ElementID+ " Value: "+Value);
            document.getElementById(ElementID).value = Value; 
        }
    </script>


</head>


<body onload="updateOperatorPositions()">
<div class="wrap">
    <?php include'includes/header.php'?> 
    <div class="main">
        <form method="post" >  

            <!-- --------------------------  TABLE FOR SELECTING POSITION ---------------------------------->    
            <h5>1. Step</h5>
            <table id="selectPosition">
                <tr>
                    <th>Select line</th>
                    <th>Select operators position</th>
                    <th></th>
                </tr>             
                <tr>
                    <td>
                        <select name="lineTitle" id="line" onchange="updateOperatorPositions()">
                            <option value="UP15" selected >UP15</option>
                            <option value="UP15 Rotor">UP15 Rotor</option>
                            <option value="UP15 Stator line 3">UP15 Stator line 3</option>
                            <option value="UP26">UP26</option>
                            <option value="UP26 Rotor">UP26 Rotor</option>
                            <option value="UP26 Stator">UP26 Stator</option>
                            <option value="Niro" >Niro</option>
                            <option value="Sololift">Sololift</option>
                            <option value="Composit">Composit</option>
                        </select>
                    </td>
                    <td>
                        <select name="opPos" id="operatorPositions" >
                               // filled with javascript function
                        </select>                    
                    </td>
                    <td ><input type="submit" name="submitPosition" value="Select" style="width:10em;"> </td>
                </tr>
            </table>
            <!-- ---------------------------------------------------------------------------------------->

            <!-- --------------------------  TABLE FOR REMOVING ERROR ----------------------------------->
            <h5 id="title2b" style="display:none;">2.b Step (in case that you want to delete exsiting one)</h5>
            <table id="ErrorList" style="display:none">

                    // This is called on submit button    
                    <script> 
                            showMenu("ErrorDetails"); showMenu("ErrorList"); showMenu("title2b"); showMenu("title2a"); 
                            setSelectOption("line", <?php echo $LINE; ?>);
                            setSelectOption("operatorPositions", <?php echo $OP_POS; ?>);                            
                    </script>

            </table>
        </form>
   </div>
</div>
</body>




</html>
Was it helpful?

Solution

I'd put the code from inline script to a function, and call it at the end of updateOperatorPositions(). If there's some variable(s), which is not defined at the first invoke, you can put the function call in an if(){}, and check everything needed is available.

OTHER TIPS

Try this

window.onload = function() { 
   // page loaded
};

Or in jQuery

$(window).load(function(){
    // page loaded
});

Or as an inline event on the body element

<body onload="runOnloadFn();">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top