trouble loading javascript on html page load from jquery .load()

Question

Working on a personal project with a navigation bar. I am using jquery x.load() to load html pages into a specific div. The pages load correctly into the div. However, one of the is using a jquery flipswitch. I am trying to read the state of this flipswitch, to no prevail. I have a main javascript file that loads the individual pages, which is basically my x.load(). I have a working jquery script for reading the switch state, that works when placed directly into the developers console. I have attempted this code both inline in the individual page as well as my main javascript file. When I place it inside the individual page, it will at times cause a race condition to develop.

I am looking for any suggestions, advice, or direction on being able to read the status of the flipswitch from the individual pages.

The first section of code is my javascript file. The second section of code, is both my individual page, as well as my main html page that loads the individual html page, respectively.

jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
    NavTrigger = $('.nav-trigger'),
    Content = $('.content'),
    ApartmentAlarm = $('#Alarm'),

$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})

NavTrigger.on('click', function(event) {
    event.preventDefault();
    alert("click works");
    $([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
    //event.preventDefault();
    Content.load('alarm.html');
    $([SideNav, NavTrigger]).toggleClass('nav-visible');
});



<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <form>
            <label for="LeftSwitch">Left Light:</label>
            <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
            <br>
            <label for="RightSwitch">Right Light</label>
            <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                console.log('hello');
                $('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
                    alert('me')
                });
                //$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
            })
        </script>
    </body>
    </html>



<html>

<head>
    <title>

    </title>
    <link rel="stylesheet" href="apt.css">
</head>

<body>
    <header class="page-header">
        <div class="apartment-name">Carlson Casa</div>
        <div class="data-top">
            <ul class="top-data">
                <li>Time</li>
                <li>Outside Temp</li>
                <li>Inside Temp</li>
                <li><a href="#0" class="nav-trigger">Menu<span></span></a></li>
            </ul>
        </div>
    </header>
    <main class="main-content">
        <nav class="side-nav">
            <ul>
                <li><a href="#">Apartment</a></li>
                <li class="nav-label">Living Room</li>
                <li><a href="#" id="Alarm">Alarm control</a></li>
                <li><a href="#" id="Chandelier">Chandelier</a></li>
                <li class="nav-label">Bedroom</li>
                <li><a href="#" id="BedroomLights">Lights</a></li>
                <li><a href="#" id="AlarmClock">Alarm Clock</a></li>
            </ul>
        </nav>
        <div class="content">
            Controls go here
        </div>
    </main>
    <script src="jquery-2.1.4.js"></script>
    <script src="main.js"></script>

</body>

</html>

score 1 · Accepted Answer · answered Aug 28 '17 at 08:51

As you are using jQuery Mobile Flipswitch of type checkbox, you can get the status by checking the property checked. Here is a jQuery Mobile Flipswitch playground:

var cases = {false: "Unchecked", true: "Checked"};
  
function getStatus() {
  $("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]);
  $("#statusRight").html(cases[$("#RightSwitch").prop("checked")]);
}

$(document).on("change", "#LeftSwitch", function(e) {
  var status = $(this).prop("checked");
  $("#statusLeft").html("Changed to "+cases[status]);
});

$(document).on("change", "#RightSwitch", function(e) {
  var status = $(this).prop("checked");
  $("#statusRight").html("Changed to "+cases[status]);
});

function toggleLeft() {
  var status = $("#LeftSwitch").prop("checked");
  $("#LeftSwitch").prop("checked", !status).flipswitch("refresh");
}

function toggleRight() {
  var status = $("#RightSwitch").prop("checked");
  $("#RightSwitch").prop("checked", !status).flipswitch("refresh");
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="pageone">
      <div data-role="content">
        <form>
            <label for="LeftSwitch">Left Light:</label>
            <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
            <span id="statusLeft">Unchecked</span>
            <br>
            <label for="RightSwitch">Right Light</label>
            <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
            <span id="statusRight">Unchecked</span>
        </form>
        <button class="ui-btn" onclick="getStatus();">Get Status</button>
        <button class="ui-btn" onclick="toggleLeft();">Toggle Left</button>
        <button class="ui-btn" onclick="toggleRight();">Toggle Right</button>
      </div>
    </div>
  </body>
</html>

By using the change event instead of click you will be notified of the flipswitch toggling also if you are setting the status in code.

Additional notes:

About what you are defining "race condition" i believe you are referring to one of the common mistakes when using jQuery Mobile, i.e. document.ready vs. page events. Please read this post here, and also take some time to read the whole story in deep in this great post of Omar here: jQuery Mobile “Page” Events – What, Why, Where, When & How? (you will find here some other useful posts about this topic).

Moreover: you are trying to update the flipswtches manually by setting the ui-flipswitch-active class by yourself, but i believe you will run into the problem of keeping the status and the ui consistent. So, you may better use the standard JQM way to set the flipswitch status by using flipswitch.refresh. There is already an example in my code snippet.

The last note: until you strongly need it - and you know how to versioning jQuery Mobile - please use the same version of these libraries in all your files, so in your case i believe the pair jQuery 2.1 + JQM 1.4.5 shall be just fine.

score 0 · Answer 2 · answered Aug 28 '17 at 03:03

jQuery(document).ready(function() {
        var SideNav = $('.side-nav'),
            NavTrigger = $('.nav-trigger'),
            Content = $('.content'),
            ApartmentAlarm = $('#Alarm');

        $('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')});

        NavTrigger.on('click', function(event) {
            event.preventDefault();
            alert("click works");
            $([SideNav, NavTrigger]).toggleClass('nav-visible');
        });
        ApartmentAlarm.on('click', function() {
            //event.preventDefault();
            Content.load('alarm.html');
            $([SideNav, NavTrigger]).toggleClass('nav-visible');
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <form>
            <label for="LeftSwitch">Left Light:</label>
            <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
            <br>
            <label for="RightSwitch">Right Light</label>
            <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                console.log('hello');
                $('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
                    alert('me')
                });
                //$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
            })
        </script>
    </body>
    </html>

trouble loading javascript on html page load from jquery .load()

2 Answers2