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>
Related
I've worked with JS a lot in school, but we never used libraries. There's so little info online as to how to succesfully add one with all the necessary external resources to a project.
I'm trying to add a library that uses jQuery to have a small window pop-up inside the page (http://jsfiddle.net/55DBx/1/) of a website I'm working on but no matter what I do, it doesn't work as it's supposed to. On jsFiddle, it says the library needs jquery-ui.js and jquery-ui.css which I've both linked to my HTML file as follows:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
and I've added the sample code from jsFiddle to my project, and it doesn't work. The pop-up window's content just shows up directly on the page.
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Test">
<img src="image.png" />
</div>
<script>$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
$( "#dialog" ).dialog( "open" );
});</script>
What am I missing? :(
You may place the library references in wrong places, you should place them within the <head></head> section.
And in your css reference, you are adding the link for rel attribute, which is used for specifies the relationship between the current document and the linked document/resource, you should add the link for href attribute.
$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
<img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>
The entire code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#btnExample").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
<img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>
</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 using this simple way to submit a form in a pop up window (which need to be done with vanilla JS)
<form onsubmit="CheckoutProducts.onSubmitForm(this);" action="/product/"
method="post" name="paymentForm" id="paymentForm">
and this is my JS code
var CheckoutProducts = CheckoutProducts || {
onSubmitForm: function(form) {
window.open('', 'formpopup','width=400,height=400,resizeable,scrollbars');
form.target = 'formpopup';
document.paymentForm.submit();
}
}
It is working fine in Chrome, but for some reason it is not working in Firefox and IE, it just opens the pop up with the blank page, What am I doing wrong?
Very simple would be to use tested component that works in all major browsers in the same way.
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
<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>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
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" >
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.