(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");
}
}
});
}
Related
I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>
Is it possible to prevent k-window-wtitlebar part of the Window class from absorbing click events?
I am inserting a form into the title of a window and find that I cannot click on any select boxes within the form, though buttons remain clickable. Is there any way to get the titlebar to let through click events but still allow the window to be dragged?
Here's a short sample that shows the problem -- the select box in the titlebar will flash a moment but then does not open. I'm not familiar enough with how Kendo is setup to figure this out easily, been bashing myself on this for a bit now. I know something is absorbing the click event and I've narrowed it down (I think) to k-window-titlebar. Any one have any ideas?
<link href="assets/ui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="assets/ui/styles/kendo.default.min.css" rel="stylesheet" />
<script src="assets/app/js/jquery.js"></script>
<script src="assets/app/js/jquery.form.min.js"></script>
<script src="assets/app/js/bootstrap.min.js"></script>
<script src="assets/app/js/bootstrap-toggle.min.js"></script>
<script src="assets/app/js/main.js"></script>
<script src="assets/ui/js/kendo.all.min.js"></script>
<style>
form {
display: inline;
}
</style>
<div class="shell">
<br><br><br><br>
<div id="window1" class="window">
<div class="client">
Test
</div>
</div>
<script>
$(document).ready(function() {
var myWindow = $("#window1");
myWindow.kendoWindow({
width: "400px",
height: "200px",
title: "Test window",
iframe: true,
visible: true,
actions: [
"Maximize",
"Close"
]
}).data("kendoWindow").center().open();
var $win = $('#window1');
console.log($win);
var $parent = $win.parent('.k-window');
console.log($parent);
var $title = $parent.find('.k-window-title');
console.log($title);
$title.append($('<form><select><option>one</option><option>two</option></select><button>test</button></form>'));
});
</script>
</div>
I seem to make a mistake in the following:
html: index.html, main.html, etc
js: jQuery, jQuery UI, own.js, own_main.js
The end result should be an index page that based on a menu choice loads a html in a div.
The HTML that loads has a button element that I want to use with jQuery UI.
Index.html
<html lang="us">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dev</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="css/kendo.dataviz.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/typ.css" rel="stylesheet" />
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typ.js"></script>
<script src="js/typ-persons.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
typ.js file
function currentLoc(goToLoc) {
if (CheckLogin() == 0) {
//Not logged in, go to main
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
if (goToLoc == '') {
console.log("No GoToLoc: " + goToLoc);
if (window.localStorage.globalLocation == '') {
console.log("No Global location");
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
console.log("Global Location " + window.localStorage.globalLocation);
$("#content").load(window.localStorage.globalLocation);
}
} else {
console.log("GoToLoc " + goToLoc);
$("#content").load(goToLoc);
window.localStorage.globalLocation = goToLoc;
}
}
}
persons.html
<script src="js/typ-persons.js"></script>
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button id="btnNew" ></button>
<button id="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
typ-persons.js
$(function () {
$("#btnNew").button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
})
.click(function () {
});
$("#btnSave").button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
})
.click(function () {
});
});
On the persons page there is also an autocomplete element with json data.
This works like a charm.
The problem is that the toolbar does not get the buttons applied from the typ-persons.js.
When I add the jQuery UI to the persons.html the buttons do work and get styled as they are supposed to.
The problem then is that jQuery UI loads twice and the autocomplete drowdown disappears on mouse over.
Kind of a paradox here and I would like both to work.
Thanks for your help,
Joris
I have the hunch that your persons.html file is the main.html addressed in the code. Otherwise I can't see where do you load persons.html or what are you loading when you load main.html.
Why are you adding typ-persons.js to persons.html, if you already have it in your main html file? In the way it's added, there's going to be double binding on button clicks. More than once, I believe. It would work on first load and then screw button behavior for good.
EDIT: After OP clarifications, these are my suggestions.
First: instead of putting new JS into persons html, make it just plain html. Make sure you don't use id attributes when that content is prone to be loaded several times. In that case, it's best to use classes.
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button class="btnNew" ></button>
<button class="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
Second: since you won't load new JS in that ajax call, you need to give the new buttons their behavior somewhere, right? Try to do that after they're appended, using jQuery's callback. I'd reccomend you use get method instead of load to have a bit more control on new content. Instead of
$("#content").load("/persons.html");
Try
$.get("/persons.html",function(responseText) {
var newElement=jQuery(responseText);
$("#content").append(newElement);
$(".btnNew", newElement).button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
}).click(function () {
});
$(".btnSave",newElement).button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
}).click(function () {
});
});
Third: whatever listener you need to be set on dynamic elements, delegate them to the document to avoid needing to redeclare it (with the risk of double binding). I see no examples of this in your original post, but if you have any case of click, focus, or blur listeners (to name a few) I'll include a practical example.
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).
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();
}
});