JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch RRS feed

All replies

  • Micheal and Jewel ,

    I am a huge fan of your blogs .They have helped me greatly in the past few months since I started work on the CTP4 product. I saw Jewel's response to my question about collapsible content yours too. They are extremely informative and thanks to both of you.

    I found that jewel's blog required that I upgrade to JQuery 1.3.2 .I did that using nugget.

    I also did the updates to my default.html .

    jquery 1.9.1

    jquery mobile -  1.3.0

    msls 1.0.0 to msls 1.0.1

    The problem I am having is with the jquery.mobile.structure 1.2.0.min.css  .As soon as I upgrade this to 1.3.0 the app starts looking like a very long single page that has just appended all the pages on a single long page.

    What am I doing wrong?

    Also if I leave everything at 1.8.2 as it came installed and use jewel's panel code below at the        div.panel();  lightswitch  errors out with object has no method panel.





    buildPanel(element, contentItem, dataAttributes) {


    function() {


    varpage = $(element).closest('.ui-page');


    vardiv = $('<div id = "'+ contentItem.name + '" data-role ="panel">');





        }, 0);



    Wednesday, November 20, 2013 10:10 PM
  • I have VS2012 apps using the tree where this works for me:

        <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>

        <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-light-1.0.1.css" />
        <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-1.0.1.min.css" />

    Unleash the Power - Get the LightSwitch HTML Client book


    Wednesday, November 20, 2013 10:46 PM
  • Thanks Micheal. This worked.

    <script type="text/javascript" src="Scripts/moment.js" charset="utf8"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.0.0.min.js"></script>
    <script type="text/javascript" src="Scripts/Common.js"></script>
    <script type="text/javascript" src="Scripts/toastr.js"></script>

    Also the css were at version: -

        <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
        <link rel="stylesheet" type="text/css" href="Content/APConfiguratorTheme_Green.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-light-2.0.0.css" />
        <link rel="stylesheet" type="text/css" href="Content/toastr.css" />
        <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-2.0.0.min.css" />

    Now my panel code isn't working. I need to tinker with that.


    Thursday, November 21, 2013 4:22 PM
  • I  got my panel working. yay.



    Thursday, November 21, 2013 9:14 PM