JQM 1.4.3 everything about flip switches does not work for me

JQM 1.4.3 everything about flip switches does not work for me

To whom it may concern,

I'm testing out the flip switch feature of JQM 1.4.3 but for some reason everything I know about them data-wise is not working for me.

What I'm testing is on flip switch change, I want to get the current value, but no matter how many times I change the flip switch, the value does not match the state displayed.

I'm also trying to toggle the flip switch on a button press. Value wise, it is toggling between on and off but the flip switch does not show the correct state even after calling the refresh method recommended from the JQM 1.4.3 API documentations.

The documentations for refreshing a flip switch that I'm looking at is: link

My HTML code:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Flip switch test</title>
  6.   
  7.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
  8.   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  9.   <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  10.     
  11. </head>
  12. <body>

  14.   <div data-role="page" class="myPage">
  15.     <a data-role="button" class="toggleFlipswitchBTN" data-inline="true">TOGGLE FLIP</a>
  16.     <input type="checkbox" data-role="flipswitch" class="flipswitchTest" data-on-text="Online" data-off-text="Offline" data-wrapper-class="flipswitchTestWrapper" />
  17.   </div>

  19. </body>
  20. </html>

My JavaScript code:
  1. $(document).on("pagebeforecreate", ".myPage", function(){
  2.   $(".toggleFlipswitchBTN").on("click", toggleFlipSwitch);
  3.   $(".flipswitchTest").on("change",flipswitchChange);
  4. });

  6. function toggleFlipSwitch(){
  7.   var currentStatus = $(".flipswitchTest").val();
  8.   var toggleTo = {
  9.     "on" : "off",
  10.     "off": "on"
  11.   };
  12.   var toggleToStatus = toggleTo[currentStatus];
  13.   alert("CURRENTLY: " + currentStatus + " CHANGING TO " + toggleToStatus);
  14.   $(".flipswitchTest").val(toggleToStatus).flipswitch("refresh");
  15. }//toggleFlipSwitch
  16.   
  17. function flipswitchChange(e){
  18.   var currentStatus = $(".flipswitchTest").val();
  19.   alert("FLIPSWITCH CHANGED TO: " + currentStatus);
  20. }
My CSS code:
  1. .flipswitchTestWrapper.ui-flipswitch .ui-btn.ui-flipswitch-on {
  2.   text-indent: -3.6em;
  3. }
  4. .flipswitchTestWrapper.ui-flipswitch .ui-flipswitch-off {
  5.   text-indent: 0.3em;
  6. }

I've made a JS Bin example which can be found at: link

The HTML and CSS coding is basically a copy and paste from the demo source for flipswitch found at: link

Can someone please help explain to me what I'm doing wrong and if possible, the correct methods.

Thank you.