I'm trying to style an HTML select menu with JQuery UI; but it simply isn't working. Here is a JSFiddle.
Below are stripped down examples of what I'm trying to accomplish.
Here's my HTML code:
<form action="#">
<fieldset>
<label for="parameterSelectMenu">Select a Parameter</label>
<select name="parameterSelectMenu" id="parameterSelectMenu">
<option value="volvo">Temperature Actual</option>
</select>
</fieldset>
</form>
<!-- A button to show JQuery is working... -->
<button id="clicker">A button element</button>
Here's the JavaScript:
$("#clicker").button();
$("#parameterSelectMenu").selectmenu();
In Firefox "selectmenu" is reported as not a function...
Updated FIDDLE
The problem is that you are using older version of jquery-ui in jsfiddle demo you have created which does not have support for the selectmenu plugin.
so you have to add the latest version plugin files as shown below:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
Related
I am quite new to JS and trying to add datetimepicker to my web-demo. The tutorial works properly with bootstrap 3.3.7, but when I change it to version 5, the calendar is not showing anymore.
Minimal working html is the following
<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon\">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script>
$(".date").datetimepicker({locale: "ru"});
</script>
I use bootstrap#5.1.3 in the project and don't want to change it because of one datetimepicker. I've already tried many variants, but none worked. How can I get it to work?
As https://stackoverflow.com/a/68683409/8900030 stated, https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js is for Bootstrap 3, not Bootstrap 5.
What version should I use instead? (and how do I know that?)
Also note that I need {locale: "ru"} parameter, which is not available at bootsrap 3 AFAIK.
The successor is here: https://getdatepicker.com/
It no longer requires Bootstrap, jQuery or Moment. Checkout the installation documentation https://getdatepicker.com/6/installing.html here.
You can use plain html to get a date and time pick this seems to work well for me
<input type="datetime-local">
Yah, adding "datetime-local" in input field, seems to work. I does magic for me also.
<input type="datetime-local">
I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)
Update -- Replaced with working code
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
EDITED TO INCLUDE .focus()
Try
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
Mobile devices, in particular iOS can be quite funny about select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
EDIT: A note on input focus without user interaction
As found by #zappullae
It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.
https://medium.com/#brunn/autofocus-in-ios-safari-458215514a5f
SelectBoxIt allows you to replace ugly and hard-to-use HTML select boxes with gorgeous and feature rich drop downs.
I implemented the SelectBoxIt and the <select> inside my render(return()) method didn't recognize it.
I searched the web and found almost only one source on Github that I didn't understand its recommendation, you can help me on this point.
In brief, I concluded that SelectBoxIt naturally doesn't support ReactJS.
Hence we need a solution or trick for that.
Below is sample code from their website and used it completely in my project:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>SelectBoxIt demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
</head>
<body>
<select name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin">a jQuery Plugin</option>
<option value="a Select Box Replacement">a Select Box Replacement</option>
<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
var selectBox = $("select").selectBoxIt();
});
</script>
</body>
</html>
The following select was not affected:
<select
id="sel1"
// ref={s => { this.selectBox = s; }}
onChange={ event => this.onSelectChange(event.target.value) }
>
{options}
</select>
The <select name="test"> has worked when put it inside render(return()) but the <select id="sel1" > inside render(return()) has not been changed to be a SelectBoxIt shape. Note that I commented the ref={s => { this.selectBox = s; }} just to prevent the error to display.
Since this is a jquery plugin, you need to make sure to have it installed:
npm install -S jquery
Then you need to import this in your script :
import * as $ from 'jquery';
Now in your react component, apply the jquery initialization in componentDidMount. The only catch is that you need to use ref to find the node.
render() {
return <select ref={s => { this.selectBox = s; }} />
}
componentDidMount() {
$(this.selectBox).selectBoxIt();
}
Some reference here.
I found that reactJS didn't "catch" onChange of the select that is replaced with SelectBoxIt but it "catch" onClick. So for one project that use SelectBoxIt + ReactJS I've made onClick trigger from jQuery when select value is changed combined with react onChange event.
In script tag /index.html/:
$("select").on('change',function(){
$("select").trigger('click');
});
In reactJS /SelectBox.js/:
onClickHandled that check if value is changed.
Example here: https://github.com/gshishkov/selectBoxIt-reactjs
I know it is not very elegant solution, but it was fastest and working one.
I am new to bootstrap. I do not understand why these simple multiselect options are not clickable.
EDIT
The first multiselect on the test-site below is the one in question. I have tested using Chrome and Firefox.
EDIT-2
I am also using angularjs and think there may be a conflict somewhere. I am in the process of testing this hypothesis out.
HTML
<head>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script src="js/bootstrap-multiselect.js"></script>
</head>
<label for="work-type" class="fixed50">Type:</label>
<select id="work-type" name="work-type[]" multiple >
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
</select>
The only javascript referense:
JS
$("#work-type").multiselect();
Here is a link to my test-site.
You also need to introduce a js file and a css file.
See details：
http://davidstutz.github.io/bootstrap-multiselect/
I am trying to program what should be an easy concept: a webpage with a form (two textboxes) and when the form is submitted if the two textboxes do not have the same content, then an alert pops up.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Examples of using jQuery Alerts</title>
<link rel="stylesheet" type="text/css" href="jquery.alerts.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#myform').submit( function() {
var x = $('#mytext').val();
var y = $('#mytext2').val();
if ( x!=y) {
jAlert('Values do not match','Info!');
return false;
}
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="#">
<input type="text" id="mytext" />
<input type="text" id="mytext2" />
<input type="submit">
</form>
</body>
</html>
All file names are checked and they are correct, but I get nothing when I submit the form (same as when I do $.jAlert()) - if jAlert is replaced by alert everything works, but I get the standard Javascript alert). Where am I am going wrong?
Regards,
George
I have tested your code. The problem is in your jquery.alerts.js. Its using '$.browser' in 2 or 3 places inside the plugin.
The $.browser method has been removed as of jQuery 1.9.
jQuery.browser() removed
The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.
— jQuery Core 1.9 Upgrade Guide.
As stated in the Upgrade Guide you can try using the jQuery Migrate plugin to restore this functionality and let jQuery Tools work.
You have remove that from the plugin to work this otherwise you need to change the plugin or use the jquery version below Jquery 1.9