Remove From My Forums

Hot Towel Spa with jquery UI

Question
0

Sign in to vote

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

0

Sign in to vote
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

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;
    }    
});

neo

Tuesday, July 9, 2013 9:27 AM

0

Sign in to vote

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

0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote
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

Answered by:

Hot Towel Spa with jquery UI

Question

Answers

All replies