I am trying to create tabs in my mvc application using jquery ui.
I tried the following code:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li>Exploded pie slice</li>
<li>Normal pie chart</li>
</ul>
<div id="tabs-1">#(Html.Partial("PartialView1"))</div>
<div id="tabs-2">#(Html.Partial("PartialView2"))</div>
</div>
I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.
Thanks,
Anandaraj
You haven't included the jQuery UI CSS file.
Either use the default skin, or pick one, or even build your own.
Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).
Related
I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div id="datetimepicker1" class="input-append date">
Date and Time Test
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.
Here is what I get:
Don´t know what to do.. I need help, please. Thanks.
The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.
I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:
http://eonasdan.github.io/bootstrap-datetimepicker/
http://www.malot.fr/bootstrap-datetimepicker/
And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.
This is the editor for the startdate #Html.EditorFor(model => model.startDate) and I have jquery blow, the code for the query is on the page and when I run the program the calender pop up does not come up, both code are on the dame cshtml page
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#startDate" ).datepicker();
});
</script>
Replace
#Html.EditorFor(model => model.startDate)
with
#Html.EditorFor(model => model.startDate, new { #class="startDate" })
because you have not giveen a class to that field and change your jQuery to
$(function() {
$( ".startDate" ).datepicker();
});
so # becomes . as we are using a class.
You need to verify that all your external scripts loaded properly. I suggest you install Fiddler and then watch your requests and see if all of them loaded. If that all is ok then you need to check that the scripts actually load before your call for the datepicker function. If you're using MVC 4 and sections feature that would mean that all you javascript code needs to go into the SCRIPTS section which is placed on your view AFTER the calls to load jquery and jquery-ui libraries. Use Goggle Chrome's console to verify that there are no javascript errors.
Looking at the code you posted here everything should be working. I've done this millions of times and every time I had a problem it was because I was missing a JQuery library reference or I wasn't loading them in proper order.
I'm deploying some code to a website and when I do the JavaScript does not run. I get the error:
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object.
The code it is using is
#model MVCMasterDetail.DataAccess.cwwoLoadCurrentWorkOrderActualsResult[]
<script type="text/javascript">
$(document).ready(function () {
$(".grid-toggle").click(function () {
$(this).closest("table").find("tbody").show();
});
$(".hide-rows").click(function () {
$(this).closest("table").find("tbody").hide();
});
});
</script>
#Html.Partial("MasterDetailMasterPartial")
And what calls uses it is:
<td colspan="4"> Details<br/>Show- Hide</td>
Any help is appreciated.
Based off your comment in Ashley Ross's answer, it looks like your trying to add jQuery using a relative path. it also looks like you're using MVC. In MVC, the way you want to reference a file in html is:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
Also, it doesn't matter if your script tag goes in the head tag or not. The only difference it makes is loading. By putting it in the head tag, you're telling the browser to download the js file before it begins to load the body, which can be nice, but can also increase page load times. For faster page download, you actually want to put your script tags towards the bottom of your body tag, which defers downloading the js file until after the rest of the page has loaded. This results in faster page load times, but can cause some funky behaviors if you aren't anticipating it.
You need to include jQuery before any other scripts. It sounds like you have something like
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
instead of
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
Check that it appears in your HTML source before any other scripts that use it.
you have to add reference to jquery lib in <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
My Code:
#using Telerik.Web.Mvc.UI;
#using Telerik.Web.UI;
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
<script type="text/javascript">
console.log($)
</script>
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>. The page features <mark>videos, tutorials,
and samples</mark> to help you get the most from ASP.NET MVC. If you have
any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC"
title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn
more</a></li>
<li class="two">
<h5>Add NuGet packages and jump start your coding</h5>
NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">
Learn more</a></li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn
more</a></li>
</ol>
I don't know what I have to do further for displaying the DatePicker when I am clicking the datepicker text field. Please Help. Thanks.
There's nothing wrong with
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
It works fine in my project (although the calendar opens when clicking the icon, not the textbox, but I don't think that's actually your question at this point).
Check to be certain that
#(Html.Telerik().ScriptRegistrar()
is being called. Noramlly this is in _Layout, but can be put directly in the file using a Telerik control.
On a side note (I don't think it's causing your problem, but certainly isn't helping anything), these lines are wrong:
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
.css files aren't scripts. They should be referenced like this:
<link href="~/Scripts/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" type="text/css"/>
And you don't seem to actually be using any jQuery on this page, so you probably don't need to import all those scripts and css files anyway. Telerik uses its own jQuery scripts, that's what the script Registrar is for.
Trying to get my head around how to integrate fancyBox with an aspx c# website.
For example where does this code go:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
the Site.master page? or each individual .aspx file?
How about this one:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I assume this goes in the html part:
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Put this between the <head> tags on the master page.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
I'd put this on your page
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
and then your link and images etc, where you need them.
You can place it on Master page one time, and there is no problem if you do not have any fancybox class on the page.
All the script code, go on master page, the html code can be anywhere (master or other pages that use the master).
When you have downloaded the fancybox it comes with a bunch of samples right click on the .html page and view the source that makes you easier how to use them.
Here is the demo for you