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.

Can't change bootstrap Tooltip title

I've already looked over several posts on stack overflow asking virtually the exact same question yet none of what I found on those questions has helped. I'm very new to JQuery and Bootstrap so maybe I'm just missing some really simple thing.
I want to be able to to change the title of the tooltip on different elements after the first initialization(ideally multiple times after initialization.) A simplified version of what I'm dealing with:
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$(document).ready(function(){
$('#bag0').data('tooltip',false)
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip();
});
This method to change the title was given from posting: How to overwrite twitter bootstrap tooltip?
The tooltip always reads "test." I've tinkered with a few others things to no avail. I suspect I'm overlooking something obvious.

$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
Above code might help you.
$.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.
You can use the element id or class to make it more specific.
Help :)

Try this
$(element).tooltip().attr('data-original-title', "new title");
Source: github bootstrap issue

Bootstrap 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
border: 1px solid red;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>

Change Bootstrap 4 Tooltip title
$(document).ready(function() {
// initilizing Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Get the Tooltip
let btn_tooltip = $('#my-btn');
// Change Tooltip Text on mouse enter
btn_tooltip.mouseenter(function () {
btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
// Update Tooltip Text on click
btn_tooltip.click(function () {
btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>Click the button:</p>
<button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button>
</div>
</body>
</html>

This might help
$('[data-toggle="tooltip"]').attr("title","NEW TEXT");
If you want to for a particular element, say a <div>
$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");

Try following,
$(document).ready(function(){
$('#bag0').attr('title', 'new text')
.tooltip('destroy') // if you are using BS4 use .tooltip('dispose')
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip('show');
});
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

I have a solution for similiar case. I change the title in tooltip dynamicaly with ajax.
first just enable the tooltips:
$('[data-toggle="tooltip"]').tooltip()
Then change the title attribute, then re init the tooltip
$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()

I may be a bit too late but my solution to this was to change the data-original-title
$('.sample').attr('data-original-title': 'new title');
This changes the bootstrap tool tip title automatically.

Jquery Tool tip for HTML contents

1, I downloaded the all these three files(JS and CSS) in my local system and tried it is not working as it is directly referring from URLS.
2, Even If i use URL src and href it is not working with the IE.IE also not saying any error.
Please help me to know what am doing wrong.
PART 1 :
<link rel="stylesheet" type="text/css" href="jquery/css/jquery-ui-1.10.2.custom.css" />
<script src="jquery/js/jquery-1.9.0.js"/></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
PART 2 :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
HTML CODE :
![<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
<style>
.tooltip
{
background-color:#F8D2DA;
}
.tooltipqty
{
text-align:right;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age"
title="<table class='tooltip'><tr><td class='tooltipqty'>20.00</td><td>31-01-2013</td></tr>
<tr><td class='tooltipqty'>0.02</td><td>01-01-2013</td></tr></table>" />
</p>
</body>][1]

Replace $(this).prop('title') with $(this).attr('title').
jsfiddle
Didn't see it was IE related. Didn't know either that jsfiddle had problems in IE 8 ...

Displaying elements inside a Dojox DialogWidget

I'm having problems correctly displaying my dojox DialogWidget content.
I've created two toolbars and a ContentPane. The idea is to fix one toolbar on the top width fixed size, the other toolbar on the bottom and the ContentPane in the center. In my case I only see the top toolbar and the ContentPane which streches over the remaing space so the bottom toolbar is not seen. The content also displays different in different browsers. I am popping my code below.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main-demo.css" media="screen" />
<link rel="stylesheet" href="medview.css" media="screen" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="async:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.VerticalSlider");
dojo.require("dijit.form.VerticalRuleLabels");
dojo.require("dijit.form.VerticalRule");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.Dialog"
);
dialog = null;
dojo.addOnLoad(function()
{
container = dojo.create("div", {
class : "test",
id : "viewer"
}, dojo.body());
console.debug("Container ID: " + container);
var appLayout = new dijit.layout.BorderContainer({
design : "headline",
style:'width:100%;height:100%',
}, container.id);
content = new dijit.layout.ContentPane({
region:"center",
title : "Viewports",
class : "dhMedViewViewport"
});
appLayout.addChild(content);
viewportContainer = content.domNode;
var imgToolbar_zgoraj = new dijit.Toolbar({
region:"top",
}, "dhmv-toolbar");
imgToolbar_zgoraj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
var imgToolbar_spodaj = new dijit.Toolbar({
region:"bottom",
}, "dhmv-toolbar");
imgToolbar_spodaj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
appLayout.addChild(imgToolbar_zgoraj);
appLayout.addChild(imgToolbar_spodaj);
appLayout.startup();
dialog = new dojox.widget.Dialog({
sizeToViewport: true,
content : container
});
});
function showDialogTwo() {
dialog.startup();
dialog.show();
}
</script>
</head>
<body class="claro">
<p>
Test dialogBox
</p>
<button id="buttonTwo" dojoType="dijit.form.Button" type="button">
Show me!
<script type="dojo/method" event="onClick" args="evt">
showDialogTwo();
</script>
</button>
</body>

Need to click twice on jQuery UI button after enabling it

I've got this simple button made using jquery UI with a very simple click functionality:
$('#bewerkopslaan').button({
icons: {
primary: 'ui-icon-disk'
},
disabled: true
}).click(function() {
alert('test');
});
At some point I enable the button like this:
$('#bewerkopslaan').button("option", "disabled", false);
Then I can click the button but... nothing happens. Then I click it again and it works.
So I always have to click it twice.

I wrote exactly what you mentioned but, the code works great. Look here.

The code you provided will enable the button correctly from my testing, however, the button having a disabled state does not disable the click event you've added. If you want the button to be truly disabled you need to bind the event only when you enable the button and unbind the click when you disable the button.
example can be found here: http://jsfiddle.net/WmAQJ/1/
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type='text/javascript'>
$('#bewerkopslaan').button({
icons: {
primary: 'ui-icon-disk'
},
disabled: true
});
$('#enabler').click(function() {
$('#bewerkopslaan').button("option", "disabled", false).bind("click", function() {
alert('test');
})
});
$('#disabler').click(function() {
$('#bewerkopslaan').button("option", "disabled", true).unbind("click")
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
</head>
<body>
<div id="enabler">click me to enable button</div>
<span id="bewerkopslaan">button</span>
<div id="disabler">click me to disable button</div>
</body>
</html>