CODEWITHSUNDEEP
jquery-mobileknockout.js
shadow-01
shadow-01

Reputation: 201

dynamic jQuery Mobile injection and knockoutJS

At first thanks to all that read my question.

I'm quite new to jquery JQM and knockoutJS and have some problems with a dynamic generated html code.

So I have the following example: I start my app with startPage.html where i load all the scripts(jquery, jqm, knockout) and with a link i go to secondPage.html where i want to load a dynamically generated array of checkboxes.

Now the problem is that i get the checkboxes but i don't have the jqm style for them.

My Code looks like this:

startPage.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>

<script type="text/javascript">
 //javascript code 
 var master = null; 
 var masterVM = function(){
     var startVM = new welcomeVM();
     var checkBoxHandler = new checkBoxVM();     
     return{
         startVM:startVM,
         checkBoxHandler:checkBoxHandler
     }
 } 
 $(document).ready(function(){   
 master = new masterVM();   
     ko.applyBindings(master);   
 });


 $(document).bind("pageload",function(event,data){
     ko.applyBindings(master);
 }); 
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
    <div data-role="content" id="content">
        <div>       
            <a href="secondPage.html" data-role="button" >      
        </div>
    </div>
    </div>
</body>
</html>

My View Model for Knockout looks like this, here i generate the HTML code and fill the array of checkboxes:

var checkBoxVM = function() {
    var cbArray = [ "One", "Two", "Three", "Four", "Five"];
    var htmlexampleCB = ko.observable();
    init();
    function init() {
        $.each(cbArray, function(index, item) {
            var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
                    + item + "\" value=\"" + item + "\">  ";
            var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
            var html = htmlCB + htmlLabel + "<br />";
            var all = "";
            if (htmlCompanyCB() != null) {
                all = htmlCompanyCB();
            }
                all = all + html;
                htmlCompanyCB(all);
        });
        alert(htmlexampleCB());
    };
    return {
        htmlexampleCB:htmlexampleCB
    };
};

secondPage.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>
</head>
<body>
    <div data-role="page" id="gasPage">
        <div data-role="content">
<!--                <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
    <script  type="text/javascript">
            $(document).ready(function(){
               var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
               $('.cbDiv').append(newSet);
               var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';            
               $(".cbGroup").append(newBox);
        });                 
    </script>
                <div data-role ="fieldcontain" class="cbDiv">
                    <fieldset data-role="controlgroup" class="cbGroup">
                    </fieldset>
                </div>
        </div>
    </div>
</body>
</html>

I tried several other solutions that i saw here but unfortunately non of them worked for me.

Could someone please give me a hint or tell me what i should do, i don't have any other ideas.

Thanks in advance and i hope that someone can help me.

Upvotes: 0

Views: 453

Answers (1)

anwith.ct
anwith.ct

Reputation: 663

This code after creating the checkboxes dynamically should do it,

$("input[type='checkbox']").checkboxradio("refresh");

Please check the following link to a similar question.

Dynamic controlgroup and checkboxes unstyled

Upvotes: 1

Related Questions