Develop Reference

After clicking on popover several times, it does not work and even hide button does not work properly

I want to create a search input with button in popover, and when someone click outside of popover get close(not next click, because we need click on input and button in popover).
Because of that I need a function in java script for closing popover to put it on budy (then when user click on budy popover got close)
So here we are, I created this but after several click its not work and even some time it open two time.
And hide button some time working and a lot of time not work.
HTML & source code
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<br>
</i>
<schelps.src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<br><br><br><br>
<button class="btn btn-danger" onclick="hidebtn()">Hide</button>
JavaScript code
const popover = new bootstrap.Popover
(
document.querySelector
(
'[data-toggle="popoversearch"]'
),
{
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content: `
<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" aria-label="seach popover" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popoversearch" data-placement="bottom" data-html="true">
<i class="fas fa-search"></i>
</button>
</div>
</div>`
}
);
function hidebtn() {
popover.hide();
popoversearch.hide();
}
I put the code here
https://jsfiddle.net/Alireza07/fot8mbg6/28/
Thanks for your helps.

HTML/JQuery: Disable span / button click (greying it out and disable click)

I have two spans that display certain information upon click, and I was unsure how I can grey out the spans to look like a disabled button when the other one is clicked. My code is below. I thought I could do something like $("#toggle-odd").attr("disabled", true") or $("toggle-odd").unbind("click") but neither seemed to give me the desired result.
$("document").ready(function(){
$("#odd").hide();
$("#even").hide();
});
$("#toggle-odd").click(function(){
$("#even").hide();
$("#odd").toggle();
});
$("#toggle-even").click(function(){
$("#odd").hide();
$("#even").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<span class="btn btn-contrast" style="background-color: green" href="#" id="toggle-odd"> Show Odd Objects </span>
<span class="btn btn-contrast" style="background-color: red" href="#" id="toggle-even"> Show Even Objects </span>
<p id="odd">
Odd
</p>
<p id="even">
Even
</p>

The span tag is made to display text. Here you should use buttons. If you want to disable the other button "graphically", just add a class ( I named it disabled). If you want to really disable it, add $("#your-button").attr("disabled","disabled");
In the following example I made sure that we can reactivate a button but if you want to keep it deactivated, you just have to extract the code of the first condition.
$("document").ready(function(){
$("#odd").hide();
$("#even").hide();
});
$("#toggle-odd").click(function(){
if($("#odd").css("display") == "none"){
$("#toggle-even").attr("disabled","disabled");
$("#toggle-even").addClass("disabled");
}else{
$("#toggle-even").removeAttr("disabled");
$("#toggle-even").removeClass("disabled");
}
$("#even").hide();
$("#odd").toggle();
});
$("#toggle-even").click(function(){
if($("#even").css("display") == "none"){
$("#toggle-odd").attr("disabled","disabled");
$("#toggle-odd").addClass("disabled");
}else{
$("#toggle-odd").removeAttr("disabled");
$("#toggle-odd").removeClass("disabled");
}
$("#odd").hide();
$("#even").toggle();
});
.disabled{
background-color: grey;
}
#toggle-odd{
background-color: green
}
#toggle-even{
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<button class="btn btn-contrast" id="toggle-odd"> Show Odd Objects </button>
<button class="btn btn-contrast" id="toggle-even"> Show Even Objects </button>
<p id="odd">
Odd
</p>
<p id="even">
Even
</p>

Add Text to TextArea Where Cursor is currently in position Trigger By Shortcut Key?

I have to two textarea each with same button class .addText. I am trying insert word hello world to the textarea where the cursor in, this event would trigger via shortcut key ctrl + i.
$(document).ready(function() {
$(window).keydown(function(event) {
console.log(event.keyCode);
if (event.ctrlKey && event.keyCode == 73) {
$(".addText").trigger("click");
event.preventDefault();
}
})
$('.addText').click(function() {
// Add Text 'hello world' to input textarea that curssor currently in
$(this).next().val('hello world');
})
});
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa1"></textarea>
</div>
</div>
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa2"></textarea>
</div>
</div>
</div>
</div>
However, Currently, the word hello world is inserted into both textarea when shortcut key ctrl + i is pressed.
I could not differentiate which textarea cursor is currently in, I found one source here: Insert text into textarea at cursor position (Javascript), but it does not apply to my case.
How can I check which textarea that has cursor in and apply an action to it? Thanks.

You could just do the reverse of your button click.
Instead of doing next, do prev on the target element.
eg.
$(document).ready(function() {
$(window).keydown(function(event) {
console.log(event.keyCode);
if (event.ctrlKey && event.keyCode == 73) {
event.preventDefault();
$(event.target).prev().trigger("click");
}
})
$('.addText').click(function() {
// Add Text 'hello world' to input textarea that curssor currently in
$(this).next().val('hello world');
})
});
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa1"></textarea>
</div>
</div>
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa2"></textarea>
</div>
</div>
</div>
</div>

Is there maybe a <select></select> popup Jquery Plugin

Hy,
my Picture describes very good what iam searching for..Its ap popup/modal box with 2 select option...only 1 can be choosen
What iam serching for is a popup Window with different select options....maybe in buttons....or as Pictures...i dont want to use the Standard select Element...
Is/are there any nice Example...Codepen....Jquery plugin/plugins that can be used to solve this easily?
Thank You very much

This can be done with fancybox and jQuery.
https://jsfiddle.net/axanj0n5/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css"/>
<div style="display: none; width:500px;" id="hidden-content">
<h2>Lightbox</h2>
Select me 1
Select me 2
</div>
<div class="container">
<a data-fancybox data-src="#hidden-content" href="javascript:;" class="btn btn-lg btn-success">
Open Lightbox
</a>
<p>
Selected Value<br>
<input type="text" name="selected_value" id="selected_value"/>
</p>
</div>
<script src="//code.jquery.com/jquery-3.2.1.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/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<script>
$(function () {
$('body').on('click', '.select-btn', function () {
$selectBtn = $('.select-btn');
$selectBtn.addClass('btn-default');
$selectBtn.removeClass('btn-success');
$(this).removeClass('btn-default');
$(this).addClass('btn-success');
$('#selected_value').val($(this).data('value'));
})
})
</script>

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.