Question

I want to create a functionality similar to what http://www.redfin.com has on their search page. A search form is opened as a user clicks in the text box.

I am using MVC and jQuery but am not sure how to go about it. I tried using the Dialog plugin but for some reason the dialog only opens once.

<input id='txtSearch' type='text' /> <div id='searchForm' title='Dialog Title'>I am a dialog</div>  $('#txtSearch').click(function() {     // Show form     $('#searchForm').dialog(); }); 

However, in a regular web site the dialog does not even open.

$('#txtSearch').click(function() {         // Show form         $('#searchForm').dialog();     }); 

Using focus or click seem to have the same effect. The dialog only opens once. When I close it and click in the text box again there is no dialog.

Am I using the right approach to accomplish this task? Are there any samples? Suggestions welcome.

The dialog might not be best choice, since it creates the title. I was wondering what else I can use since I will also want to post the form via ajax and display results on the same page.

Thanks

Answer 1

and you want to make sure you are wrapping the event binding in a document ready script (you may already be doing this, but i’m just pointing it out because it wasn’t in your sample code, just in case)

$(document).ready(function() {     $('#txtSearch').click(function() {         // Show form         $('#searchForm').dialog();     }); }); 

EDIT

$(‘#searchForm’).dialog(); only registers the dialog to the search form I think

I think you may need to call a dialog show() and hide() to get it to appear and disappear. I have used the jqModal before and had to do it this way

$(document).ready(function() {     $('#searchForm').jqm({modal: true}); //register this div as a modal      $('#txtSearch').click(function() {         // Show form         $('#searchForm').jqmShow(); //show div     }); }); 

later on, to close the modal, you call

$('#searchForm').jqmHide();