Develop Reference

How to reset a jQuery UI slider to null with multiple jQuery libraries

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.

Error "Uncaught TypeError: $(...).datetimepicker is not a function"

I am trying to display two datetimepickers but i'm getting the error "Uncaught TypeError: $(...).datetimepicker is not a function" .
I've installed :
Install-Package Bootstrap.v3.Datetimepicker
Install-Package Bootstrap.v3.Datetimepicker.CSS
Here is the code :
#model MVCGreenhouseMonitoring.Models.Plotting.PlottingCalendarDropDownList
<head>
<title></title>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/scripts/moment-with-locales.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />
</head>
<script>
$(function () {
$("#txtdatepicker1").datetimepicker();
$("#txtdatepicker2").datetimepicker();
});
</script>
#using (Html.BeginForm("IntervalReports", "Greenhouse", FormMethod.Post))
{
<table>
<tr>
<td>
<p>
Start Date: #Html.TextBoxFor(m => m.StartDateCalendar, new { #id = "txtdatepicker1", #style = "width:200px;" })
</p>
</td>
<td>
<p>
End Date: #Html.TextBoxFor(m => m.EndDateCalendar, new { #id = "txtdatepicker2", #style = "width:200px;" })
</p>
</td>
</tr>
</table>
<input type="submit" name="btnSubmit" value="Submit" />
}
I have all the necessary scripts in the Scripts folder.

Just include this on top of the other js files:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
And wrap your script like this:
jQuery(document).ready(function($){
jQuery("#txtdatepicker1").datetimepicker();
jQuery("#txtdatepicker2").datetimepicker();
});

Make sure you included the right path of jquery script and must be the first in the head tag of the html you can get the latest jquery script here https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

You need to include the jQuery library before you can use jQuery UI n your page.
How to use jQuery UI
Like this
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

jQuery UI is dependant on the jQuery library.
jQuery UI is a widget and interaction library built on top of the
jQuery JavaScript Library that you can use to build highly interactive
web applications.
https://learn.jquery.com/jquery-ui/getting-started/
Make sure you include a reference to it before jQuery UI:
<head>
<title></title>
-- jQuery.js reference here --
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="~/scripts/moment-with-locales.min.js"></script>

Foundation Accordion not loading if not declared in HTML

I am fairly new to JS and i thought i understood the order in which the components of the page are loaded but this puzzles me.
I'm working with foundation 5 and i am using an accordion component. In my js script i load data and put it into an accordion which then becomes the inner html of the mainContainer div.
<link rel="stylesheet" href="css/foundation.complete.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/myCss.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<body onload="iniciarPg()">
<div id="principal" class="mainContainer">
<dl class="accordion" data-accordion > </dl>
</div>
function iniciarPg()
{
$(document).foundation({
accordion: { toggleable: true }
});
loadData();
}
</script>
<!--SCRIPTS -->
<script src="js/classie.js"></script>
<script src="js/foundation.min.js"/>
<script src="js/foundation/foundation.accordion.js"/>
</body>
The part i cannot comprehend is that although all the inner HTML of the mainContainer gets replaced, if i delete <dl class="accordion" data-accordion > </dl> from my html, then when the JS loads, the page does no display the accordeon correctly, it does not expand when clicked.

You need to reflow your foundation plugin as the data comes later through ajax.
function iniciarPg()
{
$(document).foundation({
accordion: { toggleable: true }
});
loadData();
//make sure the ajax has been finished and the HTML is properly set, otherwise move following line to you ajax success handler end.
$(document).foundation('reflow');
}
</script>

Javascript prettyPrint an external java file

I'm really new to web development and I'm kind of lost here.
I'm using Bootstrap, and I'm trying to display java code (in a file called test.java) that's on my local machine on the webpage. The file is displayed, but it doesn't get syntax coloured. Please help!
I have in the header:
for prettify:
<link rel="stylesheet" type="text/css" href="../localfile/prettify.css"/>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="../localfile/prettify.js"></script>
and for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And this is the script
<script type="text/javascript">
$(document).ready(function() {
jQuery(function($) {
$.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
prettyPrint();
}, "text");
});
});
</script>
and this for the div:
<div class="panel-body" >
<pre id="sourceCodeDestination" class="prettyprint linenums lang-java">
</pre>
</div>

I finally figured out what the problem was after reading the answer to this question, here.
So, I changed the script to this and it works just fine. I just removed the prettyprinted class before calling prettyPrint.
<script type="text/javascript">
jQuery(function ($) { $.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
$('#sourceCodeDestination').removeClass("prettyprinted");
prettyPrint();
}, "text");
});
</script>

Error in date picker "undefined is not a function"

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>