We help IT Professionals succeed at work.
Get Started

difficulty in making jQUery UI modal dialog with text box

gbeaulac
gbeaulac asked
on
1,061 Views
Last Modified: 2012-05-11

I have an html page with a table with different stats, then I have created a button to save settings - it works with javascript.

I am trying to implement the cool jquery UI dialog  - I get the basic one to work, but I can't get the more complex one that would include a textbox and a yes and no button.

When I use the following format I can get the Basic dialog working:
var dlgFavSave = $("<div></div>")
		.html("My first basic jQuery modal dialog!")
		.dialog({ 
			buttons: { 
				"Yes": function() {
						
						
						$(this).dialog("close");
				}, 
				"No": function() {
						$(this).dialog("close"); 
				} 
			},
			autoOpen: false,
			modal: true,
			title: _dlgFavoriteTitle
		});

	$('#saveFave').click(function() {
		dlgFavSave .dialog('open');
	});

Open in new window


However, if I understand how the UI plugin would work, I thought I could create a Div somewhere on the html page and call it with a selector...for instance

HTML
<div id="dialog-form" title="Save settings" >
	<p>Please enter a name for your file</p>

	<form>
		<label for="name">File Name</label>
		<input type="text" name="name" id="dlgname" class="text ui-widget-content ui-corner-all" />
	</form>
</div>

Open in new window


And then in my javascript
$("#dialog-form").dialog({ 
			buttons: { 
				"Yes": function() {
						
						// just to see if we got the name I put an alert here
						var fNameText = Fname.val();
						alert(fNameText);
						// here I would actually put the code to save the settings with this name
						
						// then close
						$(this).dialog("close");
				}, 
				"No": function() {
						$(this).dialog("close"); 
				} 
			},
			autoOpen: false,
			modal: true,
			title: _dlgFavoriteTitle
		});

	$('#SaveFave').click(function() {
		$("#dialog-form").dialog('open');
	});

Open in new window


But that does not work - nothing pops up.

I need to be able to get input from user - like the prompt in javascript. I know it is possible, but the example on http://ui-dev.jquery.com/demos/dialog/modal-form.html but I can't get it to work.
Comment
Watch Question
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 14 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE