i try to use selet2 jquery library (https://select2.github.io/) to get a Multiple select boxes but that is not working
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#js-example-basic-multiple").select2();
});
</script>
<g:select class="js-example-basic-multiple" id="js-example-basic-multiple" name="tags" from="${tags}" optionValue="name" optionKey="id" multiple="true"/>
i don't know if i have to download something ?
thx
Related
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I want to add a JQuery TimePicker to my Razor View and i have spent two days on it by adding Js files and script on front end and calling that TimePicker class in my TimePicker control but all in vain.Please tell me step by step that how can i add TimePicker to my Razor View.Following is the code that i have tried..
<link rel='stylesheet' type='text/css' href='css/timepicki.css' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/timepicki.js'></script>
<script type='text/javascript' src='js/jquery.js'>
$('#timepicker').timepicki();
</script>
calling TimePicker in my control
#Html.TextBoxFor(m => m.DueTime, new { #id = "timepicker" })
Try this:
$(function(){
$('#timepicker').timepicki();
}
or
$(document).ready(function(){
$('#timepicker').timepicki();
});
Hope it works....
A few issues with the code:
1) It is not timepicki. change it to timepicker()
2) There is no need to provide the id attribute in the html helper. The model property itself is the id.
http://jsfiddle.net/man_luck/w18qmmgt/
JS:
$(document).ready(function(){
$('#DueTime').timepicker();
});
HTML:
<input class="form-control" id="DueTime" name="DueTime" type="text">
use:
#Html.TextBoxFor(m => m.DueTime)
I want to have a JqueryUI date picker with both its input text area and the calendar opened.
I know the two following options:
Use an input element and then the calendar is opened after the input field is clicked.
Use a div element and then there is no input field at all.
How can I get option 1, but with the calendar opened by default?
jsfiddle
$(function() {
$("#inputDatepicker").datepicker();
$("#divDatepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
<input type="text" id="inputDatepicker">
</p>
<p>Date with div:
<div id="divDatepicker">
</p>
I can't show you with a fiddle (somehow, this feature does not work) but try to set the focus to the input-field.
Like this
$(document).ready(function() {
$(function() {
$("#inputDatepicker").datepicker();
$("#inputDatepicker").focus();
});
});
Cheers
R
You can use the altField to do it
$(function() {
$("#divDatepicker").datepicker({
altField: '#inputDatepicker'
});
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>
Using altField and onchange event:
http://jsfiddle.net/sexaw2po/
function inputDatepickerChanged(val) {
$("#divDatepicker").datepicker("setDate", new Date(val));
}
I have a text input with an id of auto_change_date and i am trying to hide it on page load using:
$(document).ready(function(){
$("#auto_change_date").hide();
});
but its just not hiding it
i am then using this code to make it display (.show) when a select option is selected:
<script type="text/javascript">
$('#status').on('change',function(){
if( $(this).val()==="Auto Change"){
$("#auto_change_date").show()
}
else{
$("#auto_change_date").hide()
}
});
</script>
<input type="text" name="auto_change_date" onclick="ds_sh(this);" />
you are missing here id
put it as follows
<input type="text" name="auto_change_date" id="auto_change_date" onclick="ds_sh(this);" />
now your jquery will work fine
See Fiddle
Nothing is wrong with Your jQuery. But I would suggest you to use Pure CSS
<style>
#auto_change_date {
display:none;
}
</style>
OR, Simple JavaScript
document.getElementById('auto_change_date').style.display = 'none';
Add html input type = "text" with id = "auto_change_date"
<input type="text" id="auto_change_date" />
Now add following javascript function:
$(document).ready(function(){
$("#auto_change_date").hide();
});
Its Working fine for me.
With vanilla Javascript
var input = document.getElementById('auto_change_date');
input.style.display = 'none';
or
input.style.visibility = 'hidden';
<style>
.hidden{
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#auto_change_date').addClass('hidden');
$("#auto_change_date").hide();
});
</script>
the div should be made display:none at first inorder to apply this
You are not defining id to element and you should add jquery js to work this.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Html :
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
simply try something like this
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
your javascript code should be like this
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#status').on('change',function(){
if(this).value ==="Auto Change" ){
$("#auto_change_date").show();
} else {
$("#auto_change_date").hide();
}
});
});
</script>
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...