lI would like to add a Toolbar or nav bar with a dropdown button instead of the title "?ToolbarHTMLCodeHere?" in my JQuery Dialog window. There should be drop down button with the name "File" in the toolbar when the drop down openes there should be a button inside called "Save".
Does anybody know how to do that?
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("?ToolBarHTMLCodeHere?");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
<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>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
What i have until now is this (but its so ugly, hopefully somebody has a better solution):
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("<div class='actions'><a id='TakeAction'>File</a><ul id='actions'><li>Save</li></ul></div>");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
ul#actions
{
display:none;
}
.actions:hover ul#actions
{
display: block;
}
<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>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
Related
Two problems with jquery-ui dialog:
it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the
dialog is opened.
When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.
Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.
The function for opening a specific web page in a jquery-ui dialog looks like this:
function openNewEvent() {
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 1020,
minHeight: 1020,
width: 1200,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
You can test it with this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Both things working, check jQuery version you're using is 3.3.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
}
},
create: function(event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
I want to generate a dialog box that gets password from user, here's a bit my code.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<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>
</head>
<body>
<input type='button' id='btnDelete' name='btnDelete' value='Delete' onclick='deleteRecord(".$row['ID'].")'/>
<div id="delete-dialog" style="display: none;" title="Delete Record">
<label>Please type in admin's password:</label></br>
<input type='password' size='25' id='inpAdminPassword'/>
</div>
</body>
</html>
JS
function deleteRecord(ID){
var answer = confirm("Are you sure you want to delete this record?");
if(answer == true){
$( "#delete-dialog" ).dialog( "open" );
}
}
$(document).ready(function() {
$( "#delete-dialog" ).dialog({
autoOpen: false,
});
Somehow, the dialog box doesn't show, what must be missing?
I have also tried and included this code, but still it doesn't work.
$(document).ready(function() {
$( "#delete-dialog" ).dialog({
autoOpen: false,
});
$("#delete-dialog").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Delete": function() {
var password = document.getElementById('sessionPW').value;
var adminpw = document.getElementById('inpAdminPassword').value;
alert(password);
if(password == adminpw){
window.location = "deleteThreat.php?threatID="+ID;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
I just was trying your first solution and making the confirmation like this works for me:
js:
$("#delete-dialog").dialog({
autoOpen: false,
});
$("#open").click(function () {
if (confirm("are you sure?")) {
$("#delete-dialog").dialog("open");
}
});
html:
<div id="delete-dialog" style="display: none;" title="Delete Record">
<label>Please type in admin's password:</label></br>
<input type='password' size='25' id='inpAdminPassword'/>
</div>
<button id="open" >Open</button>
I am trying to use the jQuery UI Dialog. But it will not open first time. Consider:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="dialog.js"></script>
</head>
<body>
<p>Hello</p>
<div id="dialog" title="Alert" style="display: none;"></div>
</body>
</html>
where dialog.js is:
$(document).ready(function(){
showAlert("1");
showAlert("2");
});
function showAlert(str) {
$( "#dialog" ).html(str);
$( "#dialog" ).dialog({
modal: true,
title: "Alert",
buttons: {
"OK": function() {
document.getElementById("submit").value="Submit";
$( this ).dialog( "close" );
}
}
});
}
This will only show the second dialog, the first dialog (with text "1") seems to be simply ignored..
See also jQuery UI Dialog - Won't open the first time.
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>
Problem:
The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.
Code:
Includes:
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
Css:
<link rel="stylesheet" type="text/css" href="css/jquery.ui.autocomplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />
Buttons: <a class="phoneadder">Stuff</a>
Scripts:
<script>
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
}
);
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
return false;
});
</script>
Dialog:
<div id="dialog-form" title="Create new phone">
<p>All form fields are required.</p>
<form>
<fieldset>
...some html here
</fieldset>
</form>
</div>
Place the initializer in your document.ready, or as shorthand:
$(function() { $("#dialog-form").dialog(autoOpen... ); } );
Alternatively, make sure your scripts are run after the div is created, so like, in the footer.
Try putting your jQuery code in the $(document).ready function like this:
$(document).ready(function () {
/// your code here
});
Try this,
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: xxx,
width: xxx,
modal: true
});
return false;
});
});
Why don't you just put the dialog function in the click event handler?
<script>
$(function()
{
$( ".phoneadder" ).click(function() {
$( "#dialog-form" ).dialog({
height: 300,
width: 350,
modal: true
});
return false;
});
});
</script>