CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uimodal-dialog
Sefu
Sefu

Reputation: 2494

How can I use JQuery UI to create a form dialog?

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!

Upvotes: 2

Views: 4136

Answers (2)

Andrew Odri
Andrew Odri

Reputation: 9432

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.

Upvotes: 3

Philip
Philip

Reputation: 4592

The doc's are usually a good place to start...then maybe read about the DOM ("form") is in the dom, by the way you have too many http requests going on, compress them in live mode, html5bolierplate build is a good place to start

Upvotes: 0

Related Questions