Modal dform example

261 views
Skip to first unread message

wolfnbasti

unread,
Apr 1, 2014, 2:08:10 AM4/1/14
to jquery...@googlegroups.com
I can't seem to produce a function modal form using dform - could someone provide a simple example?

<script type="text/javascript">
    $(function() {
      // Generate a form
        $("#myform").dform({
            "action" : "index.html",
            "method" : "get",
"title" : "A dialog form",
"dialog" :
{
"modal" : true,
"autoOpen" : false,
},
            "html" : [
                {
                    "name" : "username",
                    "id" : "txt-username",
                    "caption" : "Username",
                    "type" : "text",
                    "placeholder" : "whatever"
                }
            ]
        });
    });
</script>

</head>
<body>

  <button id="myform">Show form</button>
 
</body>

David Luecke

unread,
Apr 1, 2014, 10:32:51 AM4/1/14
to jquery...@googlegroups.com
Seems to work fine for me:


You just have to make sure to include the jQueryUI JavaScript *before* the plugin.


--
You received this message because you are subscribed to the Google Groups "jQuery dForm" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-dform...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

wolfnbasti

unread,
Apr 1, 2014, 12:42:09 PM4/1/14
to jquery...@googlegroups.com
Sorry. Clarification - I was able to generate the modal, as you did on jsfiddle, but my trouble was in connecting the action to a button click. Click the button, modal pops up. my typical solutions don't seem to work with dform.

David Luecke

unread,
Apr 1, 2014, 12:49:05 PM4/1/14
to jquery...@googlegroups.com
What is your typical solution? You can do everything you can normally do including changing the options later on $('#myform').dialog({ open: function() { /* open callback */ });

wolfnbasti

unread,
Apr 1, 2014, 11:51:16 PM4/1/14
to jquery...@googlegroups.com
Got it working: 


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>jQuery.dForm 1.0.1 example - jsFiddle demo</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/normalize.css">
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <script type="text/javascript" src="http://daffl.github.io/jquery.dform/release/jquery.dform-1.1.0.js"></script>

        <style type="text/css">
            body {
                font-family: sans-serif;
                padding: 10px;
            }

            label, input {
                display: block;
                margin-top: 10px;
            }
        </style>

        <script type="text/javascript">

            $(document).ready(function(){
                $("#myform").dform({
                    "action" : "index.html",
                    "method" : "get",
                    "html" :
                    [
                        {
                            "type" : "p",
                            "html" : "You must login"
                        },
                        {
                            "name" : "username",
                            "id" : "txt-username",
                            "caption" : "Username",
                            "type" : "text",
                        },

                        {
                            "type" : "submit",
                            "value" : "Login"
                        }
                    ]
                });
                $("#formdialog").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true
                });
                $("#show-login").button().click(function() {
                    $("#formdialog").dialog("open");
                });
            });

        </script>


    </head>

    <body>
     
        <button id="show-login">Login &hellip;</button>
        <div id="formdialog">
            <form id="myform"></form>
        </div>
    
      
    </body>


</html>

graydixon

unread,
Apr 8, 2014, 1:56:42 PM4/8/14
to jquery...@googlegroups.com
dForm subscribes the dialog functionality for you. See this fiddle, instead of initiating with autoOpen: false, hide the dialog after running .dform()

Hope that helps.
Reply all
Reply to author
Forward
0 new messages