CODEWITHSUNDEEP
javascripthtml
MadMaxa
MadMaxa

Reputation: 92

Different window.onload events in IF statement

I'm trying to have different onload events for different options. For example:If my variable $var==1 it triggers one window.onload event,and if the variable $var==2,then the other window.onload event tiggers. But my code doesn't work.I'm taking the variable value from a hidden input with id='alert'Is there another way to do this kind of coding,and what I'm doing wrong here?
Thx guys

Here is my code

JavaScript :

<script type="text/javascript">

            function Onload(){

            var variable=document.getElementById("alert").value;

            if(variable.value=="1"){

                window.onload = function()
                {
                    swal({
                    title: "Example",
                    text: "Example123!",
                    type: "success",
                    showCancelButton: false,
                    confirmButtonClass: 'btn-success',
                    confirmButtonText: 'Close'
                    }); 
                };

            }
            if(variable.value=="2"){
                window.onload = function()
                {
                    swal({
                    title: "Example",
                    text: "Example1234",
                    type: "error",
                    showCancelButton: false,
                    confirmButtonClass: 'btn-danger',
                    confirmButtonText: 'Close'
                    }); 
                };
            }
            if(variable.value=="3"){

                window.onload==function(){

                    false;

                }

            }

            }       

</script>

HTML

<body onLoad='Onload();'>   
<input type='hidden' id='alert' name='alert' value="<?php echo $alert;  ?>">

Upvotes: 1

Views: 3577

Answers (2)

raina77ow
raina77ow

Reputation: 106385

There's no need to use hidden input when you can put your variable right into <script> section with json_encode. For example:

<script type="text/javascript">
(function() { // grouping the code into IIFE to prevent global scope pollution
  var modalIndex = <?php echo json_encode($alert); ?>;
  var modalOpts = {
    1: {
      title: 'Example1',
      text: 'Example1234',
      type: 'success',
      showCancelButton: false,
      confirmButtonClass: 'btn-success',
      confirmButtonText: 'Close'
    }, 
    2: {
      title: 'Example2',
      text: 'Example2341',
      type: 'warning',
      showCancelButton: false,
      confirmButtonClass: 'btn-danger',
      confirmButtonText: 'Close'
    }, 
  };
  if (modalIndex in modalOpts) {
    window.onload = function() {
      swal(modalOpts[modalIndex]); 
    } 
  }
})();

Note that I 1) removed Onload function, so that the code will be executed immediately; 2) grouped options into a single object; 3) made the transient check for existing of the configuration section set by server.

Upvotes: 2

James Thorpe
James Thorpe

Reputation: 32202

window.onload is triggering your Onload function. Assigning it again within that function will not re-trigger it. Instead, just call those functions directly:

function Onload() {
    var variable = document.getElementById("alert").value;
    if (variable == "1") {

        swal({
            title: "Example",
            text: "Example123!",
            type: "success",
            showCancelButton: false,
            confirmButtonClass: 'btn-success',
            confirmButtonText: 'Close'
        });
    }
    if (variable == "2") {

        swal({
            title: "Example",
            text: "Example1234",
            type: "error",
            showCancelButton: false,
            confirmButtonClass: 'btn-danger',
            confirmButtonText: 'Close'
        });

    }
    if (variable == "3") {
        //just do nothing
    }

}

Upvotes: 0

Related Questions