bootstrap tooltip trigering on focus - javascript

I want to show a message using bootstraps tooltip when the user enters more than 50 000 in an input.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(this).tooltip("hide");
$("#myInput").on("keyup", function() {
console.log(this.value);
if (this.value > 5000) {
$(this).tooltip("show");
$(this).val(50000);
} else {
$(this).tooltip("hide");
}
}).tooltip({
placement: "right",
trigger: "focus"
});
});
</script>
</head>
<body>
<input id="myInput" title="You cannot enter more than 50 000" />
</body>
</html>
or see http://jsfiddle.net/Ljxz2/
The problem is that tooltip is triggering the message on focus (I think), so the message is shown when the user clicks (or focuses) the input. How do I turn that off?

Just change the value of "trigger" in the options sent in the tooltip function call to "manual".
tooltip({
placement: "right",
trigger: "manual"
};
http://jsfiddle.net/YcQat/

Related

Why do I need to click several times on "Yes" button to close the Jquery dialog popup?

I have a web form with a checkbox to enable or disable something.
When users click on the checkbox to enable it, I need to display a dialog popup Yes/No.
I use a jquery UI code to display this kind of "Yes/No" popup.
After the user enables the option by enabling the checkbox, and clicking on the "Yes/No" dialog box, he has the possibility to uncheck it.
And in this case, I don't want to show the "Yes/No" dialog popup.
So my script needs first to check if the checkbox is "checked" or not before to display the popup.
PROBLEM
It works fine for the first "checked" action.
But if the user unchecks and rechecks the checkbox, the popup dialog is showing up, and this time, the user needs to click several times on the "Yes" button to close the dialog popup.
You can easily reproduce this issue with my code below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label><input data-toggle="collapse" href="#mycheckbox" role="button"
aria-expanded="false" aria-controls="mycheckbox"
type="checkbox"
name="mycheckbox_enable"
id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
<div>
<div></div>
</div>
</label>
<script type="text/javascript">
function EnableTestB(message) {
$("#mycheckbox_enable").on('change', function() {
if ($("#mycheckbox_enable").is(':checked')){
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).dialog("close");
},
No: function() {
$(this).dialog("close");
}
},
});
}
else {
// If user uncheck the checkbox, we don't do anything.
}
});
};
</script>
</body>
</html>
This happens because after each click, a div is appended to your body element. In order to fix it, you can do something like this..
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label><input data-toggle="collapse" href="#mycheckbox" role="button"
aria-expanded="false" aria-controls="mycheckbox"
type="checkbox"
name="mycheckbox_enable"
id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
<div>
<div id="checkbox_message"></div>
</div>
</label>
<script type="text/javascript">
function EnableTestB(message) {
$("#mycheckbox_enable").on('change', function() {
if ($("#mycheckbox_enable").is(':checked')){
$('#checkbox_message').html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).dialog("close");
},
No: function() {
$(this).dialog("close");
}
},
});
}
else {
// If user uncheck the checkbox, we don't do anything.
}
});
};
</script>
</body>
</html>
In the above code, a div with id #checkbox_message is already present in the DOM and the html is manipulated inside this div only, so multiple pop-ups are not appended in the dom.

pickmeup plugin of jquery not working

I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Append extra row to jqueryui autocomplete (even if autocomplete doesn't have any matches)

How should an extra row be added to the jQueryUI Autocomplete results? I've implemented Add additional link to jquery ui autocomplete list as shown below, but it will not display the extra row if autocomplete doesn't have any matches.
What I have tried...
To append an extra row to the jQueryUI autocomplete results, I came up with the below script. The extra row is added using the following:
open: function( event, ui ) {
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
I have three problems with my implementation:
If no results match the selected text, the new row isn't displayed. Type "On" in the input and you will see it. Type "xx" in the input and it isn't displayed. I suppose I could just have the server populate it, but seems like a waste, and would rather do it client-side.
Maybe problems if I have two ul.ui-autocomplete on the page?
The added row doesn't have the same appearance as the autocomplete rows.
The first item is the most critical. How should an extra row be added to the jQueryUI Autocomplete results even if Autocomplete doesn't have any results?
Please see http://jsbin.com/quyexu/1/ for a live demo of the below script. You could ignore the part regarding the dialog as it seems to be working. Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');
},
open: function( event, ui ) {
console.log(event,ui,this);
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>
To add an extra row, use the response event. http://api.jqueryui.com/1.10/autocomplete/#event-response
http://jsbin.com/wokuma/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
if(ui.item.id===0){$("#dialog-add-new").dialog("open");}
else {$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');}
},
response: function( event, ui ) {
console.log(event,ui,this);
ui.content.push({value:"Add New", id:0, label:"Add New"});
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>

Dialog box error in jquery

I have this code to add an image in dialog box. When I click on button it adds the image to the dialog box the first time, but when I click the button second time the image is not displayed in dialog box. What is the problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link
href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default,ui-button {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
//Button function
$("#button").click(function(){
$('<div id="dialog" title="title">Imageselected</div>').dialog({
resizable:false,
buttons: {"Enrol": function(){
$(this).dialog('close');
},
"CancelEnrol": function()
{
$(this).dialog('close');
}
}
});
$('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html());
});
});
</script>
</head>
<body>
<input type="button" id="button" value="Reset"/>
</body>
</html>
it happens because you are creating the dialog on every click and after it you are making the .append
You can make the append before create the dialog:
$(function() {
//Button function
$("#button").click(function(){
$('<div id="dialog" title="title">Imageselected</div>').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html()).dialog({
resizable:false,
buttons: {"Enrol": function(){
$(this).dialog('close');
},
"CancelEnrol": function()
{
$(this).dialog('close');
}
}
});
});
});
the fiddle:
http://jsfiddle.net/nfhLjkv7/
If you does not need create the dialog on every click , just open the dialog on the click function

jQuery dialog: How to use?

I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Categories