Open window on click in textbox using jQuery

Question

Hello,

I want to create a functionality similar to what 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

You probably want to use the focus event instead of the click event.

As far as what to use for the dialog, I recommend checking out BeautyTips. Check out the "Customizing triggers" example in that page, it is precisely what you are trying to do.

Answer 2

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();