jQuery, Get HTML and open code within dialog box... not working

stellaartois
stellaartois used Ask the Experts™
on
Hello,

I am tryiing to load some HTML from another file and add it to the DOM.  From then, I want to open this as a dialog box.

It's successfully adding the code to the <body> tag, but it's simply not opening it as a modal box.

	// Menu add button click, show dialog
	$('#header_menu .add').bind('click', function() {
		
		// Add the modal box to the DOM
		$.get("ajax/gethtml.php", function (modalHTML) {
			
			$(modalHTML).appendTo('body', function() {
				
				// Set dialog options
				var dialogOpts = {
						modal: false,
						width: 'auto',
						height: 'auto',
						draggable: true,
						resizable: false,
						title: false
				};
				
				// Show the dialog
				$( "#addNitDialog" ).dialog(dialogOpts);
			});
		});
	});

Open in new window


Thanks for your help,

Luke

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014
Commented:
What about :
	// Menu add button click, show dialog
	$('#header_menu .add').bind('click', function() {
	
		// Add the modal box to the DOM
		$.get("ajax/gethtml.php", function (modalHTML) {
			$(modalHTML).appendTo('body');
			// Set dialog options
			var dialogOpts = {
				modal: false,
				width: 'auto',
				height: 'auto',
				draggable: true,
				resizable: false,
				title: false
			};			
			// Show the dialog
			$( "#addNitDialog" ).dialog(dialogOpts);
		});
	});

Open in new window

Author

Commented:
Fantastic.

But for some reason a link that is within the HTML does not work, it does not close the dialog... it's as if in both cases, it can't see the newly appended classes and ids.

The link within the loaded HTML, showing in the dialog:

<a class="close_addnit" href="#">Close window</a>

Open in new window


	// Close addNitDialog button
	$('#addNitDialog .close_addnit').click(function(e) {
		
		// Close the addNitDialog dialog window
		$( "#addNitDialog" ).dialog('close');
		
		// Prevent # on end of url
		e.preventDefault();
	});

Open in new window


Thank you again,

Luke
Multitechnician
Top Expert 2014
Commented:
replace : $('#addNitDialog .close_addnit').click(function(e) {
by : $('#addNitDialog .close_addnit').live("click",function(e) {

or put the code inside your .bind('click', function() {

Author

Commented:
Thank you, you have aided the furthering of my knowledge.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial