locked
Hot Towel Spa with jquery UI RRS feed

  • Question

  • User-893530883 posted

    I need your help in some topics.I m using hot towel spa from john papa.All UI components are decorated by bootstrap.I want Ui components to be decorated by Jqury UI Js and css. All time bootstrap is loaded after Jquery is loaded.I can not change the sequence.Let me give a simple Example:Lets say i want to use a Button set . for that i have code inside view file as bellow:

    <html>
    <script>
    $(function() {
    $( "#radio" ).buttonset();
    });

    </script>

        <form>
        <div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" />
        <label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
        </div>
        </form>

    </html>

    Now i would like to have the script code some where so that jquery decorates them and i get the api access and effects for jquery ui buttonset.
     Where should i put the above code and whats the best way of doing the things.

    Thanks in advance.

    Br
    Neo

    Tuesday, July 9, 2013 6:41 AM

Answers

  • User-893530883 posted

    Hi List,

    This had nothing to do with Hot Towel but conflict among jquery Ui css and Bootstrap css.

    Thanks.

    Br

    Neo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2013 10:05 AM

All replies

  • User1751268424 posted

    Hi,

    This sample may help you.

    First I am using bundling to arrange all .js and css, and then put the bundle of .js and bundle of .css into my Index.cshtml.

    Here my .js bundling and .css bundling under BundleConfig.cs at folder App_Start. You can write your .js inside custom.js, and .css inside custom.css:

    using System;
    using System.Web.Optimization;
    
    namespace Admin.HotTowel
    {
        public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.IgnoreList.Clear();
                AddDefaultIgnorePatterns(bundles.IgnoreList);
                
                bundles.Add(
                    new ScriptBundle("~/scripts/modernizr")
                        .Include("~/scripts/modernizr-{version}.js"));
                bundles.Add(
                  new ScriptBundle("~/scripts/vendor")
                    .Include("~/scripts/jquery-{version}.min.js")
                    .Include("~/scripts/bootstrap.min.js")
                    .Include("~/scripts/bootstrap-datepicker.min.js")
                    .Include("~/scripts/knockout-{version}.js")
                    .Include("~/scripts/sammy-{version}.min.js")
                    .Include("~/scripts/moment.min.js")
                    .Include("~/scripts/Q.min.js")
                    .Include("~/scripts/breeze.debug.js")
                    .Include("~/scripts/toastr.min.js")
                    .Include("~/scripts/custom.js")
                  );
    
                bundles.Add(
                  new StyleBundle("~/Content/css")
                    .Include("~/Content/ie10mobile.css")
                    .Include("~/Content/bootstrap.min.css")
                    .Include("~/Content/bootstrap-responsive.css")
                    .Include("~/Content/bootstrap-datepicker.min.css")
                    .Include("~/Content/font-awesome.min.css")
                    .Include("~/Content/durandal.css")
                    .Include("~/Content/toastr.css")
                    .Include("~/Content/app.css")
                    .Include("~/Content/styles.css")
                    .Include("~/Content/custom.css")
                  );
            }
    
            public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
            {
                if (ignoreList == null)
                {
                    throw new ArgumentNullException("ignoreList");
                }
    
                ignoreList.Ignore("*.intellisense.js");
                ignoreList.Ignore("*-vsdoc.js");
    
                //ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
                //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
                //ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
            }
        }
    }

    Here both bundlings on my index.cshtml. so you can see the sequence on bundling and also on Index.cshtml:

    @*@using System.Web*@
    @using System.Web.Optimization
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Perikanan Indonesia</title>
    	<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    	@Styles.Render("~/Content/css")
    	<script type="text/javascript">
    		if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    			var msViewportStyle = document.createElement("style");
    			var mq = "@@-ms-viewport{width:auto!important}";
    			msViewportStyle.appendChild(document.createTextNode(mq));
    			document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    		}
    	</script>
    	@Scripts.Render("~/scripts/modernizr")
    </head>
    <body>
    	<div id="applicationHost">
    		@Html.Partial("_splash")
    	</div>
        <hr />
    	@Scripts.Render("~/scripts/vendor")
        <script src="~/App/durandal/amd/require.complete.js" data-main="App/main"></script>
    </body>
    </html>

    Hope can help

    Tuesday, July 9, 2013 8:02 AM
  • User-893530883 posted

    Hi

    Thanks a lot for the quick help.

    I tried the way u adviced.No luck.

    Now i boiled down my smaple to just make a simple jquery ui Button but no luck.I also tried with viewmodel approach but nu luck still.

    here is what i used.

    Hi  I tried the way u adviced.The template does not work.Actually Nothing works.I i tried to use the view model as bellow 

    define(['services/logger'], function (logger)
    {
        var vm = {
            activate: activate,
            viewAttached: viewAttached,
            title: 'Manage Schedule View'
        };
         return vm;
        
        function activate() {
            logger.log('Manage Schedule View Activated', null, 'login', true);
            return true;
        }
        function viewAttached(view)
        {      
           
            $(view).find('#mb').button();
            console.log("activated Button module");
            return true;
        }    
    });

    Br

    neo

    Tuesday, July 9, 2013 9:27 AM
  • User-893530883 posted

    Hi jsiahaan

    In the sample u gave no where i see Jquery UI or css.

    Can do me a favour.can u pls zip n attach a smaple app which is only capable of rendering and displaying a button n check bos if possible.

    Br

    Neo

    Tuesday, July 9, 2013 9:29 AM
  • User1751268424 posted

    Hi,

    Here again the two items:

    .js and .css bundling:

    using System;
    using System.Web.Optimization;
    
    namespace Admin.HotTowel
    {
        public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.IgnoreList.Clear();
                AddDefaultIgnorePatterns(bundles.IgnoreList);
                
                bundles.Add(
                    new ScriptBundle("~/scripts/modernizr")
                        .Include("~/scripts/modernizr-{version}.js"));
                bundles.Add(
                  new ScriptBundle("~/scripts/vendor")
                    .Include("~/scripts/jquery-{version}.min.js")
                    .Include("~/scripts/jquery-ui-{version}.min.js")
                    .Include("~/scripts/bootstrap.min.js")
                    .Include("~/scripts/bootstrap-datepicker.min.js")
                    .Include("~/scripts/knockout-{version}.js")
                    .Include("~/scripts/sammy-{version}.min.js")
                    .Include("~/scripts/moment.min.js")
                    .Include("~/scripts/Q.min.js")
                    .Include("~/scripts/breeze.debug.js")
                    .Include("~/scripts/toastr.min.js")
                    .Include("~/scripts/custom.js")
                  );
    
                bundles.Add(
                  new StyleBundle("~/Content/css")
                    .Include("~/Content/ie10mobile.css")
                    .Include("~/Content/bootstrap.min.css")
                    .Include("~/Content/bootstrap-responsive.css")
                    .Include("~/Content/bootstrap-datepicker.min.css")
                    .Include("~/Content/font-awesome.min.css")
                    .Include("~/Content/durandal.css")
                    .Include("~/Content/toastr.css")
                    .Include("~/Content/app.css")
                    .Include("~/Content/styles.css")
                    .Include("~/Content/custom.css")
                  );
                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
            }
    
            public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
            {
                if (ignoreList == null)
                {
                    throw new ArgumentNullException("ignoreList");
                }
    
                ignoreList.Ignore("*.intellisense.js");
                ignoreList.Ignore("*-vsdoc.js");
    
                //ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
                //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
                //ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
            }
        }
    }

    Index.cshtml.

    @using System.Web.Optimization
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Perikanan Indonesia</title>
    	<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    	@Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
    	<script type="text/javascript">
    		if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    			var msViewportStyle = document.createElement("style");
    			var mq = "@@-ms-viewport{width:auto!important}";
    			msViewportStyle.appendChild(document.createTextNode(mq));
    			document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    		}
    	</script>
    	@Scripts.Render("~/scripts/modernizr")
    </head>
    <body>
    	<div id="applicationHost">
    		@Html.Partial("_splash")
    	</div>
        <hr />
    	@Scripts.Render("~/scripts/vendor")
        <script src="~/App/durandal/amd/require.complete.js" data-main="App/main"></script>
    </body>
    </html>


    You need to add all necessary jQuery-ui.*.js

    Have fun

    Tuesday, July 9, 2013 10:11 AM
  • User-893530883 posted

    Hi There

    Thanks for sharing the stuffs.

    I tried again but with no luck.

    I observed u r using individual css .U can use a single one instead.

    Can u ple help me to be up n running with this.

    Can u pls upload the zip version of entire project some where.

    so that i can download and see where is problem in my code base.

    Br

    Neo

    Thursday, July 11, 2013 1:44 AM
  • User1751268424 posted

    Hi,

    Actually I'm glad having someone discussing Hot Towel. I'll make a new thread for my DatePicker problem on my Hot Towel real project. I can not give you mine but you can get the real sample from John Papa, I do not remember the address, but you can have it from my public folder name PluralsightSpaJumpStartFinal-master.zip.

    Have fun, 

    Thursday, July 11, 2013 2:09 AM
  • User-893530883 posted

    Hi

    Thanks for sharing.

    I have the stuff with me PluralsightSpaJumpStartFinal-master.zip..

    I also checked the one in ur public folder.

    I did not find in any place its using jquery Ui components ,rather all are bootstrap Ui components.

    Its ok if u can not share ur project.My scope is very limited hote towel template with simple Jquery Ui button that has Jquery Ui look n feel and rendering.Thats what i m unable to do inside Hot Towel.Thanks a lot for your time

    Br

    Neo

    Thursday, July 11, 2013 2:26 AM
  • User1751268424 posted

    Hi,

    Actually putting .css and .js must be in oreder. The order can be arrange inside bundling or grouping in bundling. When using bundling group, also need the sequence in order. This is not HotTowel problem. Please make sure all .js files and .css file are in the correct sequence. You may choose jQuery.UI add to the existing bundling in a right order.

    Have fun

    Thursday, July 11, 2013 3:19 AM
  • User-893530883 posted

    Sorry Bro,

    I have tried in all possible way.

    I have taken care of order and sequence.

    Still no luck.

    I have been struggling for last 6 days to achive that.

    Br

    Neo

    Thursday, July 11, 2013 4:23 AM
  • User-893530883 posted

    Hi

    Would u mind helping me further with this.

    I m totally stuck

    Any sample,Link or pointer that uses Jquery UI in Hot Towel would help me.

    Br

    Neo

    Friday, July 12, 2013 1:49 AM
  • User-105429085 posted

    JQueryUI needs some special bindings in order to work with knockout.

     

    Take a look at this thread for how knockout and jqueryUI can work together:

    http://stackoverflow.com/questions/7537002/autocomplete-combobox-with-knockout-js-template-jquery

    I just made a basic MVC4 template project + hottowel, then added JQueryUI component to show how auto complete works.  The project is at :

    https://github.com/xqiu/xqiuSamples/tree/master/HotTowelWithJQueryUI

    The changeset to add JQueryUI autocomplete sample is at:

    https://github.com/xqiu/xqiuSamples/commit/d2bfcf2823fd02e10afa61921e225baef5a54ec6 

    Friday, July 12, 2013 2:57 PM
  • User-893530883 posted

    Hi List,

    This had nothing to do with Hot Towel but conflict among jquery Ui css and Bootstrap css.

    Thanks.

    Br

    Neo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2013 10:05 AM