I wanted to use the date time picker like following
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
But the problem is that the I got error in JS undefiend is not a function
Im using bootstrap3 in MVC5 application what can be the issue here ?
I try to add the following librarys which doesnt help...
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
Please call jQUery top off the all script
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Have you tried putting your Datepicker instantiate script below HTML code?
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
Add jquery
<script src="~/Scripts/jquery.ui.datepicker-de.js"></script>
In my case, there was problem with jquery-s involved, i need jquery for my layout, and i was importing that part after
#RenderBody()
I fixed this by creating in BundleConfig script only for jquery and imported that script before RenderBody() part, of course in my Layout part.
bundles.Add(new ScriptBundle("~/bundles/jquerym").Include(
"~/Scripts/libs/jquery-{version}.js"));
After this, i didnt have problem that jquery is not ready, and i didnt have to import that part on page where i show datetimepicker. This is different datetimepicker from yours but it's basically same:
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css" />
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Related
I have a index.html file. I want to create a inline calendar using bootstrap.But I am getting an error called "VM1487:3 Uncaught TypeError: $(...).datetimepicker is not a function".I donot know good bootstrap, javascript.please help me someone,Here is my code:
/index.html
<div class="form-group all-forms">
<div class="col-sm-3 col-sm-offset-5 r-view">
<div id="datetimepicker"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
You are using datetimepicker while it should be datepicker. As per the docs. Try this and it should work. Make sure include right css and right js.
These are the css and js files for datetimepicker that must be included before use with jquery and bootstrap js:
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
// your options
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Hope this helps.
I tiered running bootstrap date & time picker locally by creating an html file but it doesn't worked although its working fine when i pasted the code in JSFiddle (link : https://jsfiddle.net/fuu1v2t0/10/).
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
<div class="well">
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
I included these files for the same.
bootstrap.min.js,
bootstrap-datetimepicker.min.js,
bootstrap-combined.min.css,
bootstrap-datetimepicker.min.css,
bootstrap.css,
Please make sure you have called jQuery files also.
"message": "Uncaught ReferenceError: $ is not defined",
could mean that you don't have the jQuery libraries called in the page.
Try adding this script link to your header. https://code.jquery.com/jquery-3.0.0.min.js
Here works with jQuery:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="well">
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
Reason it worked in fiddle even though you didn't include jQuery is:
Click on javascript settings tab and you will see jQuery is already there.
Add JQuery in the head tag:
Code:
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
:)
I am having trouble resetting jQuery UI sliders.
I get this error:
MyProject.OrderInfo.Search.js:187 Uncaught TypeError: $(...).slider is not a function
I think our problem has something to do with having multiple jQuery/Javascript libraries, stepping over each other, but I am uncertain. Everything my team has been trying has not worked. We simply need to reset our sliders to have NULL values. We need to use NULL, so that we know the user has not touched the slider. That way, we can exclude it from our API call parameters.
How can I reset the slider values to NULL?
Here is what the code looks like:
[OrderInfo.cshtml] (script area, top section):
<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>
[OrderInfo.cshtml] (body):
<div class="col-sm-7" id="divslider">
<div class="row filterHeader">
<div class="col-md-3 paddingZero">
<b>Tuition and Fees</b>
</div>
<div class="col-md-2 paddingZero">
<div class="input-group">
Min:
<span class="input-group-addon" id="MinOrderPrice"> </span>
</div>
</div>
<div class="col-md-5">
<div id="SliderOrderPrice"></div>
</div>
<div class="col-md-2 paddingZero">
<div class="input-group">
Max:
<span class="input-group-addon" id="MaxOrderPrice"> </span>
</div>
</div>
</div>
<!-- MORE HTML BODY CODE HERE, UI/search elements, DIVS, ETC ETC -->
<div class="row filterHeader">
<div class="col-md-3 paddingZero">
</div>
<div class="col-md-2 paddingZero">
</div>
<div class="col-md-4">
</div>
<div class="col-md-3 paddingZero">
<button class="btn btn-info" id="btnSearch" type="button">Search</button>
<button class="btn btn-primary" id="btnReset" type="button" style="min-width:71px">Reset</button>
</div>
</div>
</div>
<!-- END OF [OrderInfo.cshtml] BODY, ** NOTICE THE BOTTOM HAS A JS SCRIPT, EEEK!! ** -->
<script src="~/Scripts/MyProject.OrderInfo.Search.js"></script>
[MyProject.OrderInfo.Search.js] (a .JS file for searching Orders REST API):
//Declare slider variables as null and assign only in change function, to distinguish 'dirty' slider from a 'clean' slider
var minorderprice;
var maxorderprice;
//Tution and Fees slider
$("#SliderOrderPrice").slider({
range: true,
min: 0,
max: 50000,
values: [0, 50000],
step: 500,
slide: function (event, ui) {
$("#MinOrderPrice").html("$" + ui.values[0].toLocaleString());
if (ui.values[1] == 50000) {
$("#MaxOrderPrice").html("> $50,000")
}
else ($("#MaxOrderPrice").html("$" + ui.values[1].toLocaleString()))
},
change: function (event, ui) {
minorderprice = ui.values[0];
maxorderprice = ui.values[1];
}
});
$("#MinOrderPrice").html("$ 0");
$("#MaxOrderPrice").html("> $50,000");
$("#SliderOrderPrice").draggable(); //this is a hack to make the slider responsive on mobile devices (see touch-punch.js)
// Get the values of search checkboxes and sliders, after search button click
$("#btnSearch").click(function () {
//do a bunch of nifty things to produce a dynamic URL string, for REST API calls here. This works fine and is left out on purpose.
});
$("#btnReset").click(function () {
$('input:checkbox').removeAttr('checked'); //clear all checkboxes
$('#orderTerritory').prop('selectedIndex',0); //reset State/Territory dropdown to 'All States'
RenderJSGrid(); //re-draw grid
//how to reset slider values here?
$("#SliderOrderPrice").slider('values', 0, 50000); //this throws the error like the slider doesnt exist?
$("#SliderOrderPrice").slider('values', null, null); //would this work?
});
Notice there are references to:
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
We have to do this because our BackgridJS implementation uses jQuery 2.2.
The sliders want to use 'jquery-ui.js', which I believe depends upon 'jquery-1.10.2.js'.
When the user clicks the Reset button, the error occurs and javascript acts like the slider isn't loaded. But it is, I can see it working in the UI. Could it be that the Reset button event needs to move somewhere else?
Any ideas? Help?
UPDATE #1:
I tried #Noctane's suggestion, but I still get the same error, no matter where I put the Reset function. I can put it inline, I can put it in other scripts but it just never works unfortunately.
Here is what I tried:
<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>
I have prepared a demo using jsFiddle, that uses jquery UI while utilizing both jquery v2.2.0 and jquery version 1.10.2, please have a look, you will see that as you move the slider it will set its changed value to the console, when you click reset it will set the slider to null.
See DEMO
You can achieve this with the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style>
#resetButton {
margin-top: 15px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$( "#sliderTest" ).slider({
change: function( event, ui ) {
var s = ui.value;
console.log(s);
}
});
$("#resetButton").button({
icons: {
primary: "ui-icon-refresh"
}
});
$("#resetButton").click("click", function(event){
var s = $("#sliderTest").slider("value", null);
console.log(s);
});
</script>
<div id="sliderTest"></div>
<button id="resetButton">Reset</button>
You may need to re-arrange your includes in your application to get it to work. If you re-arrange the ones in the fiddle you will see the error you are getting, if you then switch them back to the way I have them arranged you will see it work.
what's wrong with this code ? i am a beginner
<link type="text/css" href="/css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.expander.js"></script>
<script type="text/javascript" src="/js/jquery.expander.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
here a call fancybox
$("a#select_button").fancybox();
and here is my html code
<p class="resp"><img src="logos/S7.png"><br>
<b>Title</b>
<span class="fprice">264 EUR</span>
<a id="select_button" href="book_air.php?type=typeval&origin=Val"><input class="selectt" value="Select" type="button"></a>
<span class="f_row">
<input name="first_row" type="radio">val-10:40 - val 11:40</span><br>
<span class="s_row">
<input name="second_row" type="radio">val-17:55 - val 21:10
</span>
<span class="buts"><input class="f_det" value="Details" type="button"> <input class="f_det" value="Share" type="button"></span>
</p>
i dont know where is my problem, could anybody help me please ?
You have to make sure that the script runs when the DOM is ready. There's two ways that you can accomplish this.
Either you wait for the document.ready event to be called from jQuery. To do that you would add this to your script:
$(function() {
$("a#select_button").fancybox();
});
or you would have to include the script last in your html-document (inside the body-tag).
(The script in this case refers to the line with the call to fancybox)
I'm working in a ASP.NET MVC 3 application, and I'm trying to use jQuery's Sortable. I already have a jQuery DatePicker working. In my View I have the following code:
<link href=#Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src=#Url.Content("~/Scripts/jquery.ui.core.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.datepicker.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>
Here is the initializer code:
<script type="text/javascript">
$(document).ready(function () {
$("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#MenuPages").sortable("enable");
});
</script>
The DatePicker work seamlessly. Here is the code:
<fieldset>
<legend>Search history</legend>
<p>
Begin: <br />
<input type="text" id="DateBegin" name="DateBegin" value="" />
<br />
End: <br />
<input type="text" id="DataEnd" name="DataEnd" value=""/>
<br />
</p>
<button>Search</button>
</fieldset>
But the Sortable does not work. The code:
<ul name="MenuPages" id="MenuPages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.
I don't know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there's also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).
Don't know where the source of the error could be.
Instead of
$("#MenuPages").sortable("enable");
try
$("#MenuPages").sortable();
to initialize the sortable.