Databases
StackOverflow2013
Postsdbo
POHelp with 'hello world' jquery-ui modal-form?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHelp with 'hello world' jquery-ui modal-form?
    text
    copied!<p>I'm trying to display a modal form using jquery ui. I've adapted an example but I cannot get the dialog to launch. I'm sure it's very simple but can someone tell me what I'm doing wrong ?</p> <p>The page displays initially but when I click on 'Create New User' nothing happens.</p> <p>The code is below - also (easier to read) at <a href="http://pastie.org/1000263" rel="nofollow noreferrer">http://pastie.org/1000263</a> .</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;jQuery UI Example Page&lt;/title&gt; &lt;link type="text/css" href="jquery-ui-1.7.3.custom/css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" /&gt; &lt;script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-ui-1.7.3.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#dialog-form").dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { 'Create an account': function() { var bValid = true; allFields.removeClass('ui-state-error'); if (bValid) { alert(name.val()); $(this).dialog('close'); } }, Cancel: function() { $(this).dialog('close'); } }, close: function() { allFields.val('').removeClass('ui-state-error'); } }); $('#create-user') .button() .click(function() { $('#dialog-form').dialog('open'); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Welcome to jQuery UI!&lt;/h1&gt; &lt;p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;"&gt;YOUR COMPONENTS:&lt;/p&gt; &lt;div id="dialog-form" title="Create new user"&gt; &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt; &lt;form&gt; &lt;fieldset&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /&gt; &lt;label for="email"&gt;Email&lt;/label&gt; &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /&gt; &lt;label for="password"&gt;Password&lt;/label&gt; &lt;input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;button id="create-user"&gt;Create new user&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload