difficulty in making jQUery UI modal dialog with text box


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.
gbeaulacAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TheAmeobaCommented:
gbeaulacAuthor Commented:
Thank you but I had seen this page before asking the question - it is not much help.
Gurvinder Pal SinghCommented:
your jquery code is quite different than the jquery code of the link that you have shared int he original question. Is there a specific reason to it or you haven't tried checking it?
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Start Today!
gbeaulacAuthor Commented:
I am not sure what you mean, because if you look closely at the first entry of code I showed, it is exactly based on the link. The link served as what I referred to as the Basic dialog - and it worked - but the problem is that I need to have an input box in the dialog, and the link does not show that at all. Or am I missing something?
Gurvinder Pal SinghCommented:
you are not using fieldContainer
TheAmeobaCommented:
In the example code the Div is set in a variable (var dlgFavSave = $("<div></div>")) in the bit of code not working the div is not. Could this be the difference causing it not to work?
gbeaulacAuthor Commented:
@gurvinder372

I don't understand what you mean?
gbeaulacAuthor Commented:
@The Ameoba

The link I gave you shows that it can work the other way. In fact, how else am I supposed to get an input text box in the div if not by actually referring to a div - an existing div.

Gurvinder Pal SinghCommented:
Sorry, i meant fieldset.

example is using
      <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
            <label for="email">Email</label>

            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>


but you are simply putting fields under the form

this page is also doing the same only
http://ui-dev.jquery.com/demos/dialog/#modal-form

So, try using fieldset
gbeaulacAuthor Commented:

I tried the fieldset and it did not make a difference.
Gurvinder Pal SinghCommented:
can you share the live internet link so that i can simulate the same problem here?
gbeaulacAuthor Commented:

no unfortunatelly I can't at the moment. Can you try simulating with the code I provided?
Gurvinder Pal SinghCommented:
try this code. It is very basic though
abc11.zip

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gbeaulacAuthor Commented:
Thank you
I simply copied your html and then your re-written version of my code.

I am not sure I can see what was wrong with my code, yet... I must be blind....can you give me a hint please?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.