How can the code be modified below such that when the enter key is also pressed, the jQuery date picker will react and set the variable (datePickerValue) to the date thats automatically highlighted anyway that being the present date when jQuery is opened up. Id like to be able to open the datepicker, hit the enter key quickly and it will just take the present day and store it into the var.
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
var datePickerValue = ""
$("#d1").show().unbind().datepicker().datepicker("show").change(function () {
//$('#d1').datepicker({onSelect:datePickerValue = $(this).val() }).hide();
$('#d1').datepicker({onSelect:datePickerValue = $(this).val() })
alert("You picked: " + datePickerValue);
$("#dd").dialog("close")
});
}//end of window.onload
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</body>
</html>
The active element has the class .ui-state-active so you can simulate a click on that element when the enter key is pressed, like this:
$(document).on('keypress', function (e){
if(e.which == 13)
{
$('.ui-state-active').click();
}
});
Here's a fiddle. Focus has to be on the document for it to work there (click anywhere on the output, then press the enter key).
Related
I am trying to open a dialog box in html page on click of a link but its showing me an error like-Object doesn't support property or method 'dialog' on click in ie.
Please check my code below
source files
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
Dialog code
$("#link").click(function(c){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});
});
Replace the "c" with an "e" and remove the closing brackets at the end. You had one too many.
$("#link").click(function(e){
e.preventDefault();
var dialog = $('<p>Are you sure?</p>').dialog({
buttons: {
"Yes": function() {alert('you chose yes');},
"No": function() {alert('you chose no');},
"Cancel": function() {
dialog.dialog('close');
}
}
});
});
You need a div set up that will be the dialog, like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Here's a jsbin with a working example with buttons
I have a problem to integrate a Jquery UI dialog box in an other script. What i want to do is to detect user inactivity and after a certain inactivity time showed a dialog box to ask to continue or close session. My code :
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div id="dialog-confirm" title="Session expirée">
<p><span style="float:left; margin:0 0px 0px 0;"></span>Session expire, continue ?</p>
</div>
<script>
var theTime;
document.onmousemove=stockTime;
function stockTime() {
currentTime=new Date();
theTime=currentTime.getTime();
}
function verifTime() {
currentTime=new Date();
var timeNow=currentTime.getTime();
if (timeNow-theTime>10000) {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:190,
modal: true,
buttons: {
"Continue": function() {
$( this ).dialog( "close" );
},
"End": function() {
$( this ).dialog( "close" );
}
}
});
}
}
window.setInterval("verifTime()",2500);
</script>
My console send me that message : " TypeError: $(...).dialog is not a function ". I have no idea of where is the problem ...
Thanks for your help, and sorry for my bad english !
Check if all files are loaded in proper order
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Your remaining code is working fine.
Tested in JSBIN
where u added jquery? If u haven't added it, added it above it your script, and if you added it, then I think you added it below your script, move your script after jquery. and after doing this, load your script after dom loads as
$(function(){
//Put your Script here
})
I need your help,
How can the code below be modified such that when a date is selected, that it will store the selected date into (var z) and then its value can be called back later. I can't seem to figure this out, it should be simple, and right by eyes. What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$('#d1').datepicker({
onSelect:function(){
z = $(this).val()
alert(z)
$("#dd").dialog("close")
}
});
}//end of window.onload
function callback() { alert(z) }
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<p><input onlick="callback()" type="submit" value="Submit" name="B1"></p>
</body>
</html>
There are too many missing semicolons in your code. Plus , In spite of putting in window.onload put your code in $(document).ready(function() { }); .
I made some changes in your code. Its working now.
Have a loot at This.
I think this is exactly what you are asking for.
There seem to be a few things going on. The onclick was mispelled, and as was pointed out - semicolons were missing. This should work.
<script type="text/javascript">
var z;
$(document).ready(function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$("#B1").click(function(){
callback();
});
$('#d1').datepicker({
onSelect:function(){
z = $(this).val();
alert(z);
$("#dd").dialog("close");
}
});
});//end of window.onload
function callback() {
alert(z);
}
</script>
I also modified the input button to:
<input type="button" value="Submit" name="B1" id="B1">
And you can also play around with the fiddle, here: http://jsfiddle.net/jE8tL/
I am very new to JQuery UI.
I am facing issue while loading modal dialog window using JQuery.
Here I am trying simple example that will open dialog and will load a new page on onClick event of radio button.
The new page thats getting loaded in to dialog is dynamic page which takes some values from database based on user in put provided through text box of main page.
I am not sure how to pass the value
of text box from main page? Alsosd
I tried to pass the value of text
box by appending url attributes to
url.. but no luck:(. i.e. my url is
regressionTestCustomMetadataSelection.action
and I am trying to pass it as
regressionTestCustomMetadataSelection.action*?consumer*
where consumer is value from text
box.Is this the right way?
Provinding code below
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="JS/jquery-1.6.1.js"></script>
<script type="text/javascript" language="javascript" src="JS/jquery-ui-1.8.14.custom.min.js"></script>
<style type="text/css" title="currentStyle">
#import "css/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript">
$(document).ready( function(){
$("#CUSTOM").click( showDialog );
//variable to reference window
myWindow = $('#dialog');
}
);
//function to show dialog
var showDialog = function() {
//instantiate the dialog
myWindow.load("regressionTestCustomMetadataSelection.action?consumer").dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
//if the contents have been hidden with css, you need this
myWindow.show();
//open the dialog
myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
myWindow.dialog("close");
}
</script>
<script>
function setSession()
{
$(document).ready(function() {
$("#dialog").load("regressionTestCustomMetadataSelection.action?as").dialog({ modal: true, resizable: false, draggable: false, width: 515, height: 245 });
});
$("#dialog").dialog('open');
}
</script>
</head>
<body style="font-size:62.5%;">
<div>
<input type="radio" name="submittedMetadataSelection" id="DEFAULT" value="DEFAULT" checked/>
<label for="DEFAULT">DEFAULT</label>
<input type="radio" name="submittedMetadataSelection" id="CUSTOM" value="CUSTOM" "/>
<label for="CUSTOM">CUSTOM</label>
</div>
<div id="dialog" title="Dialog Title"></div>
</body>
</html>
Instead of "load", try to use the $.ajax method and send the parameters with "data" object:
$.ajax({
url: "regressionTestCustomMetadataSelection.action",
data: ({customer: "John"}),
traditional: true,
success: function(loadedData) {
// assuming that the contents of loadedData is html
myWindow.html(loadedData);
myWindow.dialog();
}
});
(I have tightened up my original example)
I'm trying to invoke modal dialogs from within a tabbed UI, and I'm confused about the behavior I'm seeing. The first time I display the UI, my dialog behaves as expected, I can pull the data out of the fields, everything's wonderful.
tabtest2.html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabtest 2</title>
<link rel="stylesheet" type="text/css" href="js/css/smoothness/jquery-ui-1.7.2.custom.css" media="screen"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var tabs = $('#tabs').tabs({
load: function(event, ui)
{
initializeUI();
}
});
});
function initializeUI()
{
jQuery("#button1").click(function()
{
$(initializeUI.win).dialog("open");
});
$(initializeUI.win) = jQuery("#window1");
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
$(initializeUI.win).dialog("close");
}
}
});
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Google</li>
</ul>
</div>
</body>
</html>
And tab1.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tab 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<button id="button1" class="ui-button ui-state-default ui-corner-all">Button 1</button>
<div id="window1" style="display:none">
<form>
<fieldset>
<label for="text1">Text 1</label>
<input type="text" name="text1" id="text1" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
This allows the dialog to (apparently) work on repeated tab selections, but when I try to change the contents of the text field and examine it, I get the old value (the value from the first invocation)!! It's as if I have created a new copy of the dialog and it's fields, but the original text field is sitting there unseen in the original dialog window, returning it's old results.
Obviously, there's a paradigm for handling these dialogs, divs and tabs that I haven't grasped yet. Anyone care to point out my errors?
In your example you are using the same remote content twice and more importantly, using the same ID in both tabs. After the content of the second page is loaded into the DOM, you will have two divs with the same ID. Since an ID is supposed to be unique on a page, the "old" values may simple be the values of the first div that javascript happens to find in the DOM.
You also appear to have two buttons with the id "button1"; one inside the modal div and one outside. This may also cause problems.
Using FireBug, I see that I create a new 'dialog' DIV element everytime I call InitializeUI(). So deleting the old DIVs seems to give me the desired results:
function initializeUI()
{
jQuery("#button1").click(function()
{
initializeUI.win.dialog("open");
});
initializeUI.win = jQuery("#window1");
// remove old 'dialog' DIV elements
$('div[role="dialog"]').each(function() {
$(this).remove();
});
//instantiate the dialog
$(initializeUI.win).dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Create Agent',
overlay: { opacity: 0.5, background: 'black'},
buttons:
{
"Check Text 1": function()
{
var t1 = $("#text1");
alert("text 1 = " + t1.val());
},
"Close": function()
{
initializeUI.win.dialog("close");
}
}
});
}