We Keep Coding

small portion of my making my html website- I have a javascript section

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

JQuery UI Dialog shows on page instead of popup

I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?

Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.

Pop up email a friend window on site j query .dialog

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

Add a dialog using jQuery using html generated by jQuery

I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code.
$("#remove-post").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
$("body").delegate("a.delete-post", "click", function (e) {
e.preventDefault();
button = $(this);
remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').dialog("open");
});

You can simply change the html of this element.
$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');
jsFiddle Demo
Edit:
You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.
$('<div></div>')
.appendTo('body')
.html(htmlContent)
.dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
$(this).remove();
}
});
jsFiddle Demo

You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff).
What you have to do is that initialize dialog after adding the html to the DOM.
Just before $('#remove-post').dialog("open");

Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.
http://jsfiddle.net/8R7xA/1/
$("#remove-post").dialog({
autoOpen: false,
height:'auto',
width:'auto',
modal: true
});
$(document).ready(function(){
var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').html(remove_dialog_html);
$('#remove-post').dialog("open");
});

Please Refer this link link
Thanks!!
Edit: Try this:
$(document).ready(function () {
$("#divModifyDatesDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
position: "center",
width: 550,
buttons: {
"Yes": {
click: function () {
-------------
},
"No": {
click: function () {
------
}
}
}
});

To trigger every time with .click()?

I tried to have a .click() on a <a> to find out it wont trigger every time I click, what it suppose to do is open a dialog.
That is not the only problem I would need to pass a value to my jquery to. I just cant figure this one out.
I need it to be a <a> because it's gone be in a dropdown menu. Do you got any suggestions?
EDIT
this is the code I use and it workes
$(document).ready(function() {
$('#dialog').dialog({ autoOpen: false, bgiframe: true, modal: true, height: 600, width: 1000, Close: function() { $(this).dialog('destroy'); } });
$('a').live('click', function(evt) {
evt.preventDefault();
var ids = $(this).attr('id');
var first = "<iframe style='width: 100%; height: 100%;' src='" + "" + "'</iframe>'";
$('.iframe').html(ids);
$('#dialog').dialog('open');
});
});
This code intilise the dialog, open on every click and it work every time, trick for me here was the 'destroy' at the end and the inilise

This will trigger on every click. Whilst I doubt this will be the case, check you haven't got any other event handlers listening on the 'a', that are applying event.stopImmediatePropagation(). Try adding a return false to the end of the click handler, or even better:
$('a').click(function(evt) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + need to put value here + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
evt.preventDefault();
});
You might find that the page is reloading if you're not preventing the default action of the anchor tag, which would give the impression nothing is happening.
What sort of "value" are you thinking of? You can use jQuery's data() to store information, and of course you have access to all global variables in that scope.
EDIT:
To answer your comment, you can retrieve the ID of the a inside the click event as follows:
var theIdOfTheA = $(this).attr('id');
Note that this must be placed inside the handler.
EDIT2:
$('a').live('click', function(evt) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + $(this).attr('id') + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
evt.preventDefault();
});

DEMO: http://jsbin.com/olalu/edit
make sure you close the dialog before open it again!
<a href='javascript:;' id='my_unique_id' >click</a>
EDITED
$('a').click(function(evt) {
evt.preventDefault();
var theIdOfTheA = this.id;
var first = "<iframe style='width: 100%; height: 100%;' src='" +
"http://www.sf.se" + "'</iframe>'";
$('.iframe').html(theIdOfTheA);
$('#dialog').dialog({
bgiframe: true,
modal: true,
height: 600,
width: 1000,
//this
Close: function() { $(this).dialog('close'); },
//OR this OR both
Cancel: function() { $(this).dialog('close'); }
});
});

You can pass data into an event handler by doing the following (from jQuery docs):
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
So you could do this:
$(document).ready(function() {
$('a').bind("click", function(event, myValue) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + myValue + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
});
});
Note that you are now using bind() to bind the event handler, and the function is receiving a value (name it whatever you want). To show google in the iframe:
$('a').trigger('click', ['http://www.google.com']);