jQuery Append/Add Hidden div to jQuery Dialog
15,441
Try
function deliveryServiceClick() {
var dialogDiv = $('#dialogDiv');
$("#dialogDiv").dialog("open");
if (dialogDiv.length == 0) {
dialogDiv = $("<div id='dialogDiv'><div/>").appendTo('body');
$('#deliveryMethod').appendTo(dialogDiv).removeClass('hide')
dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Process",
class : 'large',
click : function() {
//
}
},
{
text : "Cancel",
class : 'large',
click : function() {
$(this).dialog('close');
}
} ]
});
}else{
dialogDiv.dialog("open");
}
}
Demo: Fiddle
Author by
Oam Psy
Updated on June 16, 2022Comments
-
Oam Psy almost 2 years
I'm trying to append/add a div element within my HTML file to a dialog box (which currently has some buttons). The div is hidden on page load with a CSS class 'hide'
HTML DIV:
<section> <div id="deliveryMethod" title="Delivery Method" class="hide"> <p>Please select delivery method and special requirements.</p> <ul> <li> <label>Method:</label> </li> <li> <div> <select for="deliveryService"> <option value="">Please select...</option> <option value="FedEx">FedEx</option> <option value="UPS">UPS</option> </select> </div> </li> <li> <label>Special Requirements:</label> </li> <li> <textarea id="specialRequirements" type="text" value="" maxlength="220"></textarea> </li> </ul> </div> </section>
CSS for class = hide
.hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
jQuery when a buttion is clicked, below function i called:
function deliveryServiceClick() { $("#dialogDiv").dialog("open"); if ($('#dialogDiv').length == 0) { $('body').append("<div id='dialogDiv'><div/>"); } var dialogDiv = $('#dialogDiv'); dialogDiv.attr("Title", "Please select your chosen delivery service."); dialogDiv.html("<div id='deliveryMethod'><div/>"); $('body').append("<div id='deliveryMethod'><div/>"); dialogDiv.dialog({ modal : true, buttons : [ { text : "Process", class : 'large', click : function() { // } }, { text : "Cancel", class : 'large', click : function() { $(this).dialog('close'); } } ] }); }
As you can see, i have tried to append/show my hidden div using:
dialogDiv.html("<div id='deliveryMethod'><div/>"); $('body').append("<div id='deliveryMethod'><div/>");
The buttons defined in my jQuery would then appear below the div.
Any help would be appreciated.
Thanks