Как я могу использовать JQuery UI для создания диалогового окна формы? - PullRequest
Новая
       0

Как я могу использовать JQuery UI для создания диалогового окна формы?

2 голосов
/ 27 декабря 2011

это может показаться очевидным, но я занимался этим всю ночь безрезультатно. Мне нравится JQuery, но JQuery UI я не могу освоить. Может быть, я упускаю что-то фундаментальное. Я пытаюсь заставить всплывающее окно на экране, содержащее форму, и когда я нажимаю кнопку Отправить, мне нужно выполнить магию Ajax, чтобы отправить пользовательский ввод в базу данных. Это все хорошо, но на самом деле появление коробки - другая история. Я следовал десяткам уроков, и это меня ненавидит. В основном это разбивка:

Мой сайт (разрабатываемый для Linux) имеет абсолютный корневой путь / mysite

Я храню JQuery и JQuery UI (среди прочего) в /mysite/includes/jquery.js и / mysite / includes / jquery-ui / ... где "..." - все исходные файлы JQuery UI .

Основное "тело" страницы немного сложнее. По сути, все поменяно местами через систему вкладок, которую я сделал с помощью Ajax в div, называемом «content». Этот div содержит интерактивную ссылку, которую мне нужно нажать, чтобы открыть диалоговую форму ввода, как показано на примере сайта JQuery UI.

Я попытался сделать следующее в нескольких вариантах ... весь следующий код находится в элементе div "contents": 

    <link rel="stylesheet" href="/mysite/includes/jquery-ui/themes/base/ui.all.css" type="text/css">
    <script src="/mysite/includes/jquery-ui/jquery-1.6.2.js"></script>
    <script src="/mysite/includes/jquery-ui/ui/ui.draggable.js"></script>
    <script src="/mysite/includes/jquery-ui/ui/ui.resizable.js"></script>
    <script src="/mysite/includes/jquery-ui/ui/ui.core.js"></script>
    <script src="/mysite/includes/jquery-ui/ui/ui.dialog.js"></script>
    <script src="/mysite/includes/jquery-ui/external/jquery.bgiframe-2.1.2.js"></script>
    <link type="text/css" href="/mysite/includes/jquery-ui/demos/demos.css" rel="stylesheet" />

В этот момент я попробовал практически каждый пример, чтобы получить всплывающее окно, которое я нашел в Интернете, и ни один из них не работал. Как я могу заставить его открыться? Все ли сценарии JQuery UI должны быть включены в тег "head" или что-то в этом роде? Или я должен как-то указать JQuery ссылаться на главное окно вместо элемента «содержимое»?

Любая помощь будет принята с благодарностью. Спасибо!

Ответы [ 2 ]

3 голосов
/ 27 декабря 2011

Я знаю, что это не диалоговое окно jQuery, но оно менее раздутое: http://jsfiddle.net/cadkJ/125/

Если вы хотите, чтобы оно появлялось после отправки формы, вы можете просто добавить этот код внутри $(document).ready();: 

    $("#form").submit(function(){
        $("#modal-background, #modal-content").toggleClass("active");
        $.ajax({
            type: "POST",
            url: "http://www.example.com/form.php",
            data: {name: "John Smith", address: "3 Tree Street"},
            success: function(data){},
            dataType: "json"});
        return false;
    });

Надеюсь, это поможет вам или, по крайней мере, кому-то, кто ищет более легкое решение для диалогов JQuery UI.

0 голосов
/ 27 декабря 2011

Документы, как правило, являются хорошим местом для начала ... тогда, возможно, прочитайте о DOM ("форма") в dom, кстати, если у вас слишком много запросов http, сожмите их в живом режиме, html5bolierplateсборка - хорошее место для начала

...