StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery UI dialog and sortable columns #dialog class issue
text
Body
copied!<p>I succeed in creating a sortable portlet system for a existing CMS. I also made a dialog popup where I can change true a form the title and in the future some more content within the dialog for each portlet.</p> <p>However, my issue is that the <code>#dialog</code> shows the form inside my page before I click the icon. When I click the icon, the form is removed from the page and shows nicely inside the dialog. I understand <em>why</em> it does that, but I can't solve it.</p> <p>Here's my JavaScript:</p> <pre><code> $('.column .portlet-header .ui-icon-wrench').click(function(e) { e.preventDefault(); var portlet_to_edit = $(this).parents('.portlet').attr('id'); //dialog // alert($(this).parents('.portlet').attr('id')); $("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, buttons: { 'Save block': function() { var bValid = true; allFields.removeClass('ui-state-error'); bValid = bValid && checkLength(name,"username",3,16); bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); if (bValid) { $.ajax({ type: "POST", url: "server_items_reorder.php", data: 'tid=' + portlet_to_edit + '&title=' + name.val() }); $(this).dialog('close'); $('.portlet').sortable('refresh') //not work? } }, Cancel: function() { $(this).dialog('close'); } }, close: function() { //allFields.val('').removeClass('ui-state-error'); } }) $('#dialog').dialog('open'); }); </code></pre> <p>I know that it should be something like this (jQuery sample):</p> <pre><code>$("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, buttons: { 'Create an account': function() { var bValid = true; allFields.removeClass('ui-state-error'); bValid = bValid && checkLength(name,"username",3,16); bValid = bValid && checkLength(email,"email",6,80); bValid = bValid && checkLength(password,"password",5,16); bValid = bValid && 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 && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\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 && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); if (bValid) { $('#users tbody').append('' + '' + name.val() + '' + '' + email.val() + '' + '' + password.val() + '' + ''); $(this).dialog('close'); } }, Cancel: function() { $(this).dialog('close'); } }, close: function() { allFields.val('').removeClass('ui-state-error'); } }); $(''.column .portlet-header .ui-icon-wrench'').click(function() { $('#dialog').dialog('open'); }) </code></pre> <p>But then the function does not update my <code>$.ajax</code>.</p>

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