Открыть окно по клику в текстовом поле с помощью jQuery - PullRequest
Новая
       11

Открыть окно по клику в текстовом поле с помощью jQuery

2 голосов
/ 27 марта 2009

Я хочу создать функциональность, аналогичную функции www.redfin.com на их странице поиска. Форма поиска открывается при нажатии пользователем в текстовом поле.

Я использую MVC и jQuery, но не знаю, как это сделать. Я попытался использовать плагин Dialog, но по какой-то причине диалог открывается только один раз. 

<input id="txtSearch" type="text" />
<div id="searchForm" title="Dialog Title">I am a dialog</div>

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

Однако на обычном веб-сайте диалог даже не открывается. 

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

Использование фокуса или щелчка, похоже, имеет тот же эффект. Диалог открывается только один раз. Когда я закрываю его и снова нажимаю в текстовом поле, диалоговое окно отсутствует.

Использую ли я правильный подход для выполнения этой задачи? Есть ли образцы? Предложения приветствуются.

Диалог может быть не лучшим выбором, так как он создает заголовок. Мне было интересно, что еще я могу использовать, так как я также хочу опубликовать форму через ajax и отображать результаты на той же странице.

Спасибо

Ответы [ 2 ]

1 голос
/ 27 марта 2009

и вы хотите убедиться, что вы оборачиваете привязку события в готовый к скрипту документ (вы, возможно, уже делаете это, но я просто указываю на это, потому что это не было в вашем примере кода, на всякий случай) 

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

EDIT

.

$ ( "# searchForm") Диалог (); только регистрирует диалог в форму поиска я думаю

Я думаю, вам может понадобиться вызвать диалог show () и hide (), чтобы он появился и исчез. Я использовал jqModal раньше и должен был сделать это таким образом 

$(document).ready(function() {
    $("#searchForm").jqm({modal: true}); //register this div as a modal

    $("#txtSearch").click(function() {
        // Show form
        $("#searchForm").jqmShow(); //show div
    });
});

позже, чтобы закрыть модал, вы звоните 

$("#searchForm").jqmHide();
0 голосов
/ 27 марта 2009

Возможно, вы хотите использовать событие focus вместо события click.

Что касается того, что использовать для диалога, я рекомендую проверить BeautyTips. Посмотрите на пример «Настройка триггеров» на этой странице, это именно то, что вы пытаетесь сделать.

...