I am missing something simple, but can'T find it. In my asp.net MVC5 project, I want to use bootstrap-switch. This is what I've done:
BundleConfig.cs: added bootstrap-switch.css and bootstrap.switch.js as follows,
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-switch.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-switch.css",
"~/Content/site.css"));
(and made sure the files are at those locations).
Then, in a view I tried the following three checkboxes,
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" name="box" />
<input type="checkbox"
data-on-text="Option A"
data-off-text="Option B"
data-size="mini"
name="box2" />
and added, at the bottom of the view file,
<script>
$("[name='box']").bootstrapSwitch();
$("[name='box2']").bootstrapSwitch();
</script>
But when I run the project, the checkbox looks like the standard checkbox (no CSS, or functions have been added).
I've read a lot of posts on this (my code follows http://www.bootstrap-switch.org/ verbatim), but can't find my mistake.
Late and obvious, but perhaps useful for someone. The checkboxes need to be initialized when the document is ready.
<script>
$(document).ready(function() {
$("[name='box']").bootstrapSwitch();
$("[name='box2']").bootstrapSwitch();
});
</script>
The problem was that if you include the js files in the bundle, it is rendered last on the page. Hence, if you use javascipt on your view that references a .js library loaded in the bundle, it does not work to put it at the end of the view file, rather render the scripts section,
#section scripts{
<script>
$(".indent-1").css("background", "green");
</script>
}
This will then appear on the html file after the libraries are imported.
Related
Cshtml code.
#Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { #class = "datefield", type = "date" } })
#section Scripts {
#Scripts.Render("~/Content/css")
#Scripts.Render("~/Scripts/jquery")
}
Bundle.config code
bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
"~/Scripts/jqueryui1.12.s",
"~/Scripts/jqueryui-12.js",
"~/Scripts/DateTimePicket.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/jqueryui1.12.css"
));
code of DateTimePicker
$(function () {
alert("hi");
$(".datefield").datepicker();
});
where is the issue.
The code of these file "~/Scripts/jqueryui1.12.s", "~/Scripts/jqueryui-12.js", are from
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am just trying to add the datepicker and the code got messed up.
I think the Issue is you are trying to add css and javascript also please cross the spelling of the DateTimePicker js file
You render css in cshtml you need to use the below line
#Styles.Render("~/Content/css")
Hope this helps!!
if design is going messy then it will definitely shows the errors in browser console.First you should find out which js erros are coming..
and you have placed jquery file ~/Scripts/DateTimePicket.js. Is this "DateTimePicket" or "DateTimePicker" ?? If its spelling mistake then also it can create issue as well..
And if this is not spelling mistake then check with second scenario, you have created section scripts but have u used #RenderSection("scripts", required: false) in layout? Or you can try by adding your renders at the top of the cshtml code as below.
#Styles.Render("~/Content/css")
#Scripts.Render("~/Scripts/jquery")
with Not creating any section,try directly renders.
Im trying to add the datebox plugin,
from: http://dev.jtsage.com/
Im trying to follow the instructions on the website, but maybe Im missing something
because i keep getting the following error message on page load:
"Uncaught TypeError: Cannot read property 'prototype' of undefined"
Im using mvc 4,and added the plugin to my project using 'NuGet'
my bundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-core").Include(
"~/Scripts/jqm-datebox.core.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-flipbox").Include(
"~/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-en").Include(
"~/Scripts/jquery.mobile.datebox.i18n.en.utf8.js"));
bundles.Add(new StyleBundle("~/Content/jqm-datebox")
.Include(("~/Content/jqm-datebox.css")));
layout.cshtml:
#Styles.Render("~/Content/pangojquerymobilecss", "~/Content/jqueryMobileIconsCss", "~/Content/jqueryMobileStructureCss", "~/Content/Mobile/css", "~/Content/jqm-datebox")
#Scripts.Render("~/bundles/jquerymobile", "~/bundles/jqm-datebox-core", "~/bundles/jqm-flipbox", "~/bundles/jqm-datebox-en")
the cshtml:
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
and if that's any help, the header that created when i load the page:
<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate-1.13.0.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.mobile-1.4.2.js"></script>
<script src="/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"></script>
<style type="text/css"></style></head>
thanks
For what it's worth, you can actually create a combined js file if you prefer here:
http://dev.jtsage.com/jQM-DateBox/builder/
It allows you to tailor to which jQM version you are using, include the modes you are using, and include whatever number of language files you need as well.
If for some reason you need to use a version not listed there (although, the 1.4.4 version works for the entire jQM 1.4 branch, and the 1.4.0 version is backwards compatible with 1.3.0), another option is just to copy and paste the contents of all the js files into one - the only requirement is that the .core file has to appear first, and jQM must still be loaded prior to datebox.
i want to add my customer javascript file to my cshtml
i am working with mvc4
i tried these two ways
#Scripts.Render("~/Scripts/Register.js")
<script type="text/javascript" src="~/Scripts/Register.js"></script>
nothing works.
i want to do this because i want to check for select change.
$(document).ready(function () {
$('#selectRegisterType').on('change', function () {
alert("ddddddd");
});
});
also this is the code of the html
<select id="selectRegisterType">
<option value="None">Select One</option>
<option value="tenant">Tentant</option>
<option value="Apartment Owner">Apartment Owner</option>
</select>
any help would be appreciated
Using MVC4 is really good and you should take advantage of the BundleCollection in your App_Start folder you'll see the BundleConfig.cs and there you can add your javascript and styles and others.
now what you need to write is
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/Scrips/Register").Include(
"~/Scripts/Register.js"));
}
and in your footer tag inside your body tag
</footer>
#Scripts.Render("~/bundles/Register")
#RenderSection("scripts", required: false)
</body>
< /html>
You could otherwise use some script to link directly to your script url like
</footer>
<script type="text/javascript">
var e = document.createElement('script');
e.src = '#Url.Content("~/Scripts/Register.js")';
e.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(e);
</script>
</body>
</html>
WHERE do you put your script? As this looks like JQuery code, do you load JQuery before?
I put your code in JSFiddle, looks like it's working just fine as is:
$(document).ready(function () {
$('#selectRegisterType').on('change', function () {
alert("ddddddd");
});
})
http://jsfiddle.net/h2L6d/
(Duplicated your code here as I can't put a link to JSFiddle without some code)
It seems to me the only reason it would not be "working" is that you are not loading JQuery BEFORE calling your script. Usually, I load those js libraries below the footer of _Layout.cshtml:
</footer>
#Scripts.Render("~/bundles/js")
<script src="~/Scripts/jquery.slidePanel.js"></script>
#RenderSection("scripts", required: false)
</body>
and scripts specific to a page in a script section, at the bottom of the cshtml view:
#section scripts {
#Scripts.Render("~/bundles/jstree")
}
This way I am sure my js libraries are always loaded before my local page scripts. The script which is not in a bundle has been added later on, and should be bundled too.
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.
Okay so I am using cake PHP 2.0..just started using it so I am a total noob. I want to use dialog boxes to show some messages for an application so I am able to include the necessary javascript files and css for the jquery UI.
But when I define the function, It doesnot work instead when i look at the source code the script block in which i define the function looks incomplete as the closing tag '' is not highlighted. i hope i am making sense. here is the code snippet:
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
in 'index.ctp'.
I am certain that the js source files are loaded correctly
I picked it up from the jqueryUi site. I would be really grateful if some on could help me get started with writing javascript in cakePHP2.0. Thanks a ton
You should consider using cake's block or Element "mini-views." for that I'd use an element.
put something like this in app/view/Elements/loginDialog.ctp. I'll explain where the variable is decalred in the next section.
<div id="dialog" title="Basic dialog">
<?php echo $this->Form->create($ModelName); ?>
<?php
$this->Form->input('username');
$this->Form->input('password');
?>
<?php $this->Form->end('Login'); ?>
</div>
In your app/View/ControllerName/action_name.ctp, include something like this. Note that i'm able to pass in variables (Like the one that i used for the 1st Form parameter).
//in the view file
echo $this->element('loginDialog', array('ModelName'=>'User'));
Lastly you'll need to add the js. You could put this in your app/View/Layout/default.ctp. let's just say for instance you have a login link inside your navigation that you want to trigger this dialog:
<script>
$(document).ready(function(){
$("#loginNavLink").on("click", function(event){
$('#dialog').dialog();
});
})
</script>
Hope this helps!