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.
Related
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.
I have problem with mobile/tablet version of page which I create
I need this: When someone look at product detail and move him to right/left (touch/swipe) then I need load next/previous product detail (= Example: Now I on page with id=2 when I go right, then I load page with id=3, npw I on page with id=3 and I go left then I load page with id=2.. etc.. with different pages id).
I look in thread here, but this solution is not dynamic and I have problem applicate it. Next I inspirated in W3C here.
Now I have these codes which not work:
JS file:
$(document).on('pageinit', function() {
$('.epicFullscreen').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
});
$('.epicFullscreen').bind('swiperight', function()
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide");
});
});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });
HTML:
<script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="funkce/skripty.js" type="text/javascript"></script>
I need use old JQuery 1.7.1. because this site using it and everything works fine, with newer JQuery I can have new problems. For that I use older JQuery-mobile 1.3.2. which must work with JQuery 1.7.1. ("jQuery Mobile 1.3 supports jQuery 1.7 and newer") . I can´t include "jquery.mobile-1.3.2.min.css" because this styles not work together with my styles correctly.
HTML in body is like that:
<div class="epicFullscreen">
<img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
</div>
Now I have dynamic solution with arrows (right/left) and with adding correct urls with PHP, but on tablet/mobile user like using touch not clicking on arrows etc...
=> Where I have problem and why not work my current solution? And how I can change this static JS to dynamic JS?
try this simple code .....
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I found solution for that I make this answer. I simplify my problem and create simple page.
Code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).on("pageinit",function(){
var pathname = $(location).attr('href');
var leva = $('#le').attr("href");
var prava = $('#pr').attr("href");
$("body").on("swiperight",function(){
<!--alert("You swiped right!");-->
location.href=prava;
});
$("body").on("swipeleft",function(){
<!--alert("You swiped left!");-->
location.href=leva;
});
});
</script>
</head>
<body>
<div id="test_div" style="display: block;">
<img src="test.gif" width="100px">
<a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
<a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>
</body>
</html>
I have this one hack - in PHP I know on which page I am, which page is before and which is next, I add this links it to arrows (which have tag "a"). This function working perfect. But I use this functional code to get correct URL => I don´t need some big function in JQuery which can split actual url with RegEx, know on which page I am, know if exist next page etc... Now I must only style this code to my page, but this is working.
I thank Omar for his time and I close this topic.
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.
The problem is that placing a C# variable within a JS function within a #Section produces incorrect javascript (in MVC 4 only).
In a JS function in MVC 3, everything executes as expected.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
Take this exact same code and place it in an MVC4 app and you will get malformed JS.
The HTML on the page will actually render the following:
<script type="text/javascript">
$(function () {
alert(12/27/2011 11:04:04 AM);
and the html will emit
); }
Note the closing script tag is not produced.
It appears the closing curly brace in the JS function is confused the be the closing curly brace in Razor.
Note that I am also declaring a RenderSection("test",false") in my _Layout.cshtml file.
Slightly old reply, but I was experiencing the same issue, soI have submitted a feedback report on Microsoft.Connect hopefully it should get sorted before full release.
https://connect.microsoft.com/VisualStudio/feedback/details/720079/mvc-4-javascript-in-section-issue
I know have been a wile since the question was asked, but you can also try something like this.
#section test {
<script type="text/javascript">
$(function () {
alert(#(DateTime.Now));
});
</script>
}
Note the "()" after the #.
Hope this help.
Sorry, I just couldn't help but chime in here... I don't see how the syntax in the initial question would actually work. When I try it in MVC3, in VS2010, it puts a green squiggly line under the "DateTime", and when you hover over that, it says "Conditional compilation is turned off". But if I surround it in quotes, it does work, as in:
#section test {
<script type="text/javascript">
$(function () {
alert("#DateTime.Now");
});
</script>
}
And then when I run it (F5) it displays the JavaScript alert as expected, and when I view source it renders:
<script type="text/javascript">
$(function () {
alert("07/09/2012 10:41:26");
});
</script>
What I ended up doing for now was emitting the closing JS func in #Html.Raw().
Since this is so easy to recreate, I'm going to submit this as a bug to Microsoft.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
#(Html.Raw("});"))
</script>
}
I've seen problems like this. Wrap your alert statement in <text></text> tags
Definitely a bug. I prefer this workaround over the one you posted. For some reason, other razor elements seem to interpret the brackets correctly, so I simply wrap the script content in another set of braces.
#section test {
if (true) {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
}
I use this JavaScript code inside the head tag in order to populate the divs with a browse button so that users can upload images (swfupload).
<head>
...
<script type="text/javascript">
var swfu = function() {
return new SWFUpload({
// Backend Settings
// settings go here...
// Too long to display here
// Debug Settings
debug: false
});
}
window.onload = swfu;
</script>
</head>
....
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>
This works well, but the problem is when I try to put this code inside of a partial view. So far, I haven't be able to get this to work.
Is there anyone more experienced to the rescue?
Thank you
You can put your function like this:
<%= Ajax.ActionLink("YourAction",new AjaxOptions{ OnSuccess="swfu", UpdateTargetId = "spanButtonPlaceholder" }) %>
so your swfu function will be called if your update is successfull
The point of window.onload is to execute the given function once the page has finished... loading. That said, you should consider moving the onload to the bottom of the body. And I'm not the worlds biggest fan of keeping scripts in the head. :)
Partial views are rendered with Microsoft Ajax which does not evaluate JavaScript code. I would suggest looking at not using partial views in this case or look at other view engines like Spark....or put all required javascript in your parent view which kinda makes your code a bit sloppy