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.
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 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>
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>
I'm trying to create a dialog (on click) for feedback. I've tried simple things first.
Here's the fiddle
$("#feed_win").dialog({
autoOpen:false;
});
$("#feedback").click( function() {
$( "#feed_win" ).dialog( "open" );
});
But every time on load the dialog contains are shown before the button click event. Any help will be useful.
So, now i tried this.
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$("#feedback").button().click(function() {
$("#feed_win").dialog("open");
});
$("#feed_win").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 400
});
</script>
</head>
<body>
<button id="feedback">Delete profile</button>
<div id="feed_win">
<h2>This is feedback form</h2>
<p>You can add your feedback here</p>
</div>
</body>
But the dialog div is displayed on page load. why? It should be displayed after clicking button.
You need to include jQuery UI script in the head:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Here is fiddle: DEMO
Everything else you wrote is good, just add that line
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>