JQuery UI: How to pass values to dialog - javascript

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();
}
});

Related

How to prevent k-window-titlebar from absorbing click events

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>

Opening a url inside a popup element (get new title and address bar)

I am looking to create something like this:
post 23
once a user click on this element
I want to fadein a popup div and load page post/23 html to it.
I want to title and address bar to change accrodingly to the new post page title and address bar.
Once I close the popup div, I want the title and address bad to be changed back.
I am sorry I don't have any code for you guys, I am looking for this for quite some time, and unable to find anything certain.
my best guess was using
http://dimsemenov.com/plugins/magnific-popup/documentation.html
can someone with experience performing something similar help me please?
1.
Include jQueryUI Dialog JS :
http://jqueryui.com/dialog/
2.
Append class, data-title attribute to your a link elemenets.
HTML:
<a class="alink" href="post/23" data-title="post23" >post 23</a>
<a class="alink" href="post/24" data-title="post24" >post 24</a>
3.
Javascript:
$(".alink").click(function () {
var dialog = $('<div title="' + $(this).attr('data-title') + '"></div>').dialog({
autoOpen: false,
hide: 'fade',
show: 'fade',
open: function (event, ui) {
$.ajax({
url: $(this).attr('href'),
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
Now, Eachtime when you click on your link, a popup will open with fade effect, the title of dialog will come from your data-title attribute, and the dialog will get html from your post.
You can try the following:-
In the first html page, you'll have a link/button to open the popup, so first thing is we can't open the popup with bootstrap's attributes, because in that case can't catch the event when the modal will be opened or closed. So we'll add a click event. And in the modal, we'll have a iframe to open a separate page. So the page will be:-
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h2>Bootstrap 3.1.0 - Modal Demo</h2>
<div class="row text-center">
<h3>The Basic Modal</h3>
</div>
<hr>
</div>
<a class="btn btn-lg btn-success" data-btn-name="basic_modal" data-src="demo.html">Click to open Modal</a>
<div class="modal fade" id="basicModal">
<div class="modal-dialog">
<div class="modal-content">
<iframe id="frame" src=""></iframe>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="test.js"></script>
</body>
</html>
Now we'll have another html file, that'll be opened in the popup, and we'll fire an event to the parent window when the iframe will be loaded, so that we can get the title of the iframe.
<html>
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function onLoad(){
var event = new parent.CustomEvent('print:page:loaded', {detail : window});
parent.dispatchEvent(event);
}
</script>
</head>
<body onload="onLoad()">
<div>TODO write content</div>
</body>
</html>
Now in the javascript we'll listen to the event fired by the iframe and change the window title depending on it.
$(document).ready(function(){
var originalTitle,originalUrl;
$('[data-btn-name="basic_modal"]').click(function(evt){
if($('#basicModal').hasClass('in')){
window.document.title = originalTitle;
window.history.pushState('test', originalTitle, originalUrl);
}else{
$('#frame').attr('src',$(evt.currentTarget).attr('data-src'));
window.removeEventListener('print:page:loaded',function(){},false);
window.addEventListener('print:page:loaded', function(e){
originalTitle = window.document.title;
originalUrl = window.location.href;
window.document.title = e.detail.document.title;
window.history.pushState('test', e.detail.document.title, $(evt.currentTarget).attr('data-src'));
})
}
$('#basicModal').toggleClass('in');
});
})
Thank you all, I figured how to do it myself using history.js
this is how I did it:
var urlPath;
$('.post-image').on('click',function(){
urlPath = $(this).attr('href');
History.pushState({ action: 'show_popup' } , 'POST TITLE', urlPath);
return false;
});
History.Adapter.bind(window,'statechange',function() {
var State = History.getState();
if(State.data.action == "show_popup"){
//show dimmer
$("#lightbox").load(urlPath, function() {
//show content
});
}else{
// hide popup
}
});
$(document).on('click', function(event) {
// hiding popup if dimmer is clicked
if ((!$(event.target).closest('.post-info').length && !$(event.target).closest('.post-user').length)) {
History.back();
}
});`

How to create a popup box where users can copy text?

In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.
You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.
with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>

Enter Key Behaviour in JQuery UI Dialog

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).

Modal dialogs from within a tabbed UI (Improved example)

(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");
}
}
});
}

Categories

Resources