Databases
StackOverflow2013
Postsdbo
POJquery UI modal form example button click not working
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery UI modal form example button click not working
    primarykey
    data
    text
    <p>Im using the JqueryUI modal form and since im new to Jquery I figured the first part would be to integrate the demo modal form into the application im working on and then progress from there.</p> <p>I have managed to get other simpler examples working, such as the basic modal popup box, but when I try to work with this modal form popup nothing happens.</p> <p>The CSS / .js files are in their correct place and linked properly:</p> <pre><code> &lt;link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="Stylesheet" /&gt; &lt;script type="text/javascript" src="../js/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt; </code></pre> <p>I took the CSS provided and have placed that within my own CSS file which I know is working correctly, I can see the style applied to the button etc.</p> <p>CSS is:</p> <pre><code>/* Ticket Detail Popup */ label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </code></pre> <p>I have included the code from this demo exactly <a href="http://jqueryui.com/demos/dialog/#modal-form" rel="nofollow">http://jqueryui.com/demos/dialog/#modal-form</a> like so:</p> <pre><code> &lt;script&gt; $(function () { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! $("#dialog:ui-dialog").dialog("destroy"); var name = $("#name"), email = $("#email"), password = $("#password"), allFields = $([]).add(name).add(email).add(password), tips = $(".validateTips"); function updateTips(t) { tips .text(t) .addClass("ui-state-highlight"); setTimeout(function () { tips.removeClass("ui-state-highlight", 1500); }, 500); } function checkLength(o, n, min, max) { if (o.val().length &gt; max || o.val().length &lt; min) { o.addClass("ui-state-error"); updateTips("Length of " + n + " must be between " + min + " and " + max + "."); return false; } else { return true; } } function checkRegexp(o, regexp, n) { if (!(regexp.test(o.val()))) { o.addClass("ui-state-error"); updateTips(n); return false; } else { return true; } } $("#dialog-form").dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "Create an account": function () { var bValid = true; allFields.removeClass("ui-state-error"); bValid = bValid &amp;&amp; checkLength(name, "username", 3, 16); bValid = bValid &amp;&amp; checkLength(email, "email", 6, 80); bValid = bValid &amp;&amp; checkLength(password, "password", 5, 16); bValid = bValid &amp;&amp; checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid &amp;&amp; checkRegexp(email, /^((([a-z]|\d|[!#\$%&amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com"); bValid = bValid &amp;&amp; checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); if (bValid) { $("#users tbody").append("&lt;tr&gt;" + "&lt;td&gt;" + name.val() + "&lt;/td&gt;" + "&lt;td&gt;" + email.val() + "&lt;/td&gt;" + "&lt;td&gt;" + password.val() + "&lt;/td&gt;" + "&lt;/tr&gt;"); $(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; </code></pre> <p>I have then added this code which is a cut down version of the code supplied on the page i linked earlier:</p> <pre><code>&lt;div class="demo"&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;/div&gt;&lt;!-- End demo --&gt; </code></pre> <p>The final thing I have done is to implement the button in the place I wanted it on my UI:</p> <pre><code>&lt;button id="create-user"&gt;Notify&lt;/button&gt; </code></pre> <p>The strange thing is even if i copy the example exactly into my page I get nothing happening when I click the button, just as nothing happens if i click the button with my own code.</p> <p>Does anyone know why this might be happening? Since im fairly new to Jquery and web development in general im not really seeing what could be happening here.</p> <p>Any advice would be great Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPurplegoldfish
    1. USPurplegoldfish
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery UI modal form example button click not working
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJquery UI modal form example button click not working
      1. This table or related slice is empty.
      1. VTUpMod
    1. COcheck in the code behind see if you will find the element with class ui-dialog. here is your code and it works ok. http://jsfiddle.net/BANbv/3/
      singulars
      1. POJquery UI modal form example button click not working
      1. USzdrsh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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