如何使用 JQuery UI 创建表单对话框？

发布于 2024-12-23 03:01:55 字数 1436 浏览 2 评论 0原文

这似乎是显而易见的，但我整晚都在研究这一点，但毫无结果。我喜欢 JQuery，但 JQuery UI 我无法掌握。也许我错过了一些基本的东西。我试图在屏幕上弹出一个包含表单的框，当我单击“提交”时，我需要执行一些 Ajax 魔法将用户输入提交到数据库中。这一切都很好，但实际上让盒子出现则是另一回事了。我遵循了数十个教程，但它讨厌我。基本上，这是细分：

我的网站（在 Linux 上开发）有一个绝对根路径 /mysite

我将 JQuery 和 JQuery UI（除其他外）保存在 /mysite/includes/jquery.js 和 /mysite/includes/jquery- ui/... 其中“...”是所有 JQuery UI 源文件。

页面的主要“主体”有点复杂。基本上，所有内容都通过我在名为“content”的 div 中使用 Ajax 制作的选项卡系统进行交换。该 div 包含可点击的链接，我需要按下该链接才能弹出对话框输入表单，如 JQuery UI 示例站点上所示。

我尝试以多种方式执行以下操作...以下所有代码都在“contents”div 元素中：

    <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 引用主窗口而不是“内容”元素？

任何帮助将不胜感激。谢谢！

原文

this may seem obvious, but I've been researching this all night to no avail. I like JQuery, but JQuery UI I cannot master. Maybe I'm missing something fundamental. I am trying to get a box to pop up on the screen that contains a form, and when I click Submit I need to do some Ajax magic to submit the user input into the database. This is all fine, but actually getting the box to appear is another story. I followed dozens of tutorials, and it hates me. Basically, this is the breakdown:

My website (being developed on Linux) has an absolute root path /mysite

I keep JQuery and JQuery UI (among other things) in /mysite/includes/jquery.js and /mysite/includes/jquery-ui/... where "..." is all of the JQuery UI source files.

The main "body" of the page is a bit complicated. Basically, everything is being swapped via a tab system that I made using Ajax in a div called "content". This div contains the clickable link that I need to press to popup a dialog input form as demonstrated on the JQuery UI sample site.

I tried doing the following in several varieties... all of the following code is in the "contents" div element:

    <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" />

At this point, I've tried virtually every example to get the popup that I have found online, and none worked. How can I actually get it to open? Do all of the JQuery UI scripts have to be included in the "head" tag or something? Or do I have to somehow tell JQuery to reference the main window instead of the "contents" element?

Any help would be greatly appreciated. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不离久伴 2024-12-30 03:01:55

我知道这不是一个 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 对话框的更轻量级解决方案。

I know this isn't a jQuery dialog, but it tons less bloated: http://jsfiddle.net/cadkJ/125/

If you want it to popup after a form is submitted, you can just add this code inside $(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;
    });

Hopefully this helps you, or at least someone looking for a much more lightweight solution to the jQuery UI dialogs.

回复收藏 0 原文