CODEWITHSUNDEEP
javascriptjquery-mobileradio-buttoncompatibility
secr
secr

Reputation: 644

JQuery Mobile - version conflicts, radiobutton JS refresh

I am getting back to developing with JQueryMobile, which proves fabulous for prototyping mobile apps, but there is a potential version issue I have bumped into: either the formatting works fine but js-checked radiobuttons do not refresh, or the formatting needs to go out of the window and then the same JS does manage to produce the refresh. I am working on dreamweaver CS6 and cross-checking with js-bin.

Here is the page with working JQM formatting, but the lack of radiobutton self-update functionality. http://jsfiddle.net/tearex/bh9szuer/

    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

Not sure if the checked status is updated but there is no refresh.

Here is a page with the most recent jqm - and it is not showing jqm formatting at all (the way, this is the case with the page being loaded into chrome, too - up-to-date, on windows 7 64 bit) http://jsfiddle.net/tearex/bh9szuer/2/

    <head> 
    <title>My Page</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

And here is the page making no reference to css at all, and the onload function works properly. http://jsfiddle.net/tearex/y4a369ps/1/

    <head> 
    <title>My Page</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1">

</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>
<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

I have some questions. 1. How to achieve the radiobutton status change and refresh and retain JQM? 2. Which version of jqm do you find optimal, or - ideally - how do you make the latest one work? 3. Side question what is the recommended most compatible web-based jsfiddle equivalent? Thanks a lot.

Upvotes: 0

Views: 68

Answers (1)

deblocker
deblocker

Reputation: 7707

It is time to switch to https:

<!-- JQM theme shall be loaded before structure -->
<link rel="stylesheet" href="css/my-custom-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/my-custom-styles.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* my custom settings */
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="js/my-custom-functions.js">

Regarding the refresh, please also don't forget that jQuery need the CSS-style selector:

function heja() {
  var id = 'WTEDY_0', el = document.getElementById(id);
  el.checked = true; 
  $('#' + id).prop('checked', true); /* The jQuery way */
  var isInstance = $.data(el, 'mobile-checkboxradio');
  if(isInstance) {
    $('#' + id).checkboxradio('refresh'); /* The JQM Widgets way */
  }
}

Here is a working example on Plunker: https://plnkr.co/edit/yLEB2XFlM8H4cqsZ?open=lib%2Fscript.js

Upvotes: 1

Related Questions