I need help on a small javascript portion of my website assignment for class, filling in the blanks:
In the script section of your contact.html page, inside your document ready function but outside your submit function) add the following code to turn the dialog div (above) into a jQuery dialog box.
$(_______).dialog({
autoOpen: _____________,
modal: ________,
width: ________,
buttons: {
"_______": function() {
$(this).dialog("close");
}
}
});
Note, this is just the code you are given in the demos for creating a dialog box. I have added several blanks to the code that you will need to set as follows:
The dialog function needs to be called for the element with the id of dialog.
It should not auto open
It should be modal
It should have a width set that is less than 600 pixels
The button name should be OK or Accept or something like that.
Although this not the right forum to ask these kind of questions, here is the answer for your question.
$("#DivIdWhichWillBecomeADialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
Here is your answer:
$(function() {
$("#dialogDivId" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
},
width:550
});
});
I'm creating a form using javascript which is actually a modal dialog.
I'm having trouble figuring out how to attach an id tag when I try to set it up.
This is how I'm creating the line in js
tmpString += "<div id=\"dialog-modal\" class=\"widget-dialog-container\" title=\"Complete Your Order\">";
...
...
var handle = document.getElementById('content');
handle.innerHTML = tmpString;
Now I'm trying to access it this way
$(document).dialog( {
height: 800,
width: 800,
modal: true,
autoOpen: false
});
I do know that I have to have $(document) because the dialog is being created in code. but I don't know how to give it the #dialog-modal so I can access it. Any help would be greatly appreciated. Thanks
You need to call your popup like this
$("#dialog-modal").dialog( {
height: 800,
width: 800,
modal: true,
autoOpen: false
});
at any time use
$("#dialog-modal").dialog("open");
to open it.
Dynamic html popup append
$(document).ready(function () {
var tmpString = "<div id=\"dialog-modal\" class=\"widget-dialog-container\" title=\"Complete Your Order\">";
var handle = document.getElementById('content');
handle.innerHTML = tmpString;
$("#dialog-modal").dialog({
height: 800,
width: 800,
modal: true,
autoOpen: false
});
})
Can some please help me with this. I created a button where a user can click on and it opens a new window which allows the person to fill out the forms on the page and share a property with a friend...
instead i want it to be a pop up dialog box which will have the main page in the background .. here is my code can some one please help
$('.profileHeader').after('<div id="emailWrapper" class="right"/>');
$('#emailWrapper').prepend($('li.five'));
$('li.five').css({"width": 142,"height": 50});
$("li.five").addClass("nice medium orange radius button right headerEmailAFriend");
$(".five > .event-click").css({"border-style": "none"});
$(".five > .event-click").css({"color": "#ffffff"});
$('.#emailWrapper').click(function () {
$("#emailWrapper").dialog("open");
event.preventDefault();
href = $(this).attr('href');
console.log(href);
url.dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
I CHANGED UP MY CODE THE BOTTOM PART I REALIZED I NEEDED TO REMOVE THE DOT... NEW ERROR IS THAT WHEN I CLICK THE BUTTON NOW THE BUTTON GOES AWAY HERE IS THE CODE
$('#emailWrapper').click(function() {
event.preventDefault();
$('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
OK THIS IS WHAT I HAVE NOW BASED ON WHAT I GOT FROM THIS FORM... STILL HAVE AN ERROR
< div id = "emailWrapper" > < p > emailWrapper < /p>
</div > $('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: tue
});
$("#emailWrapper").dialog("open");
$('#emailWrapper > li > a').bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('body').prepend('<div id="loadEmailFriend" class=""/>');
$('#loadEmailFriend').load(url, function () {
$('#loadEmailFriend').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
$("#emailWrapper").dialog("open");
});
Here is the new code i came up with.. problem now is that nothing comes up in a dialog box. I am trying to take the information that comes up on another page (email a friend) and make it into a dialog box which just pops up on the same page.
Your error is here
$('.#emailWrapper').click(function () {
From the rest of your code, you appear to be referring to an element with an ID of emailWrapper. You want to remove the dot from your selector. Inside your function, you refer to an event object. You have to pass this in your function.
$('#emailWrapper').click(function (event) {
EDIT
You're second issue is that you're trying to make your button be the dialog. You really need to create a div that will contain your dialog content. For example
<div id="mydiv">
<p>Display some stuff here</p>
</div>
Then define it as
$('#mydiv').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
Then open it inside your click event
$("#mydiv").dialog("open");
Apologies if this is overly basic, but I couldn't find much info with my searches.
I have a simple link: delete.
Clicking the link deletes an item from my database.
How do I make the link show a popup (JavaScript alert box?) with a message:
Are you sure? [Yes] [No]
I'd like to use jQuery instead of inline JavaScript, if possible.
Start by giving your element an id.
delete
Then:
<script>
$(document).ready(function(){
$('#delbtn').click(function(){
return confirm("Are You sure");
});
});
</script>
give id/class to your anchor:
Delete
then on document load assign an event to clicking the link.
$(function(){
//on document ready
$('.btn_del').click(function(e){
return confirm('Are you sure?')
})
})
Use jQuery UI's modal dialogs they're infinitely better than alert.
$("a#delete").click(function() {
$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Really delete?': function() {
$(this).dialog('close');
delete();
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks
You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.
I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.
I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.
For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});
<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>
This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.
$(this).dialog('destroy');
works!
.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs
I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.
I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.
The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.