wordpress - Jquery UI Dialog -
i try use jquery ui first time. here show code:
(in wordpress index file )
public function enqueue_admin_scripts() { wp_enqueue_script( $this->plugin_slug .'-admin-styles', plugins_url( 'js/jquery-1.9.1.js', __file__ ) ); wp_enqueue_script( $this->plugin_slug .'-admin-styles', plugins_url( 'js/admin.js', __file__ ) ); wp_enqueue_script( $this->plugin_slug .'-admin-styles', plugins_url( 'js/jquery-ui-1.10.3.custom.min.js', __file__ ) ); }
here admin.js
jquery(document).ready(function(){ jquery("#add_new_gallery").click(function(){ // alert (456); jquery(function() { var name = jquery( "#name" ), email = jquery( "#email" ), password = jquery( "#password" ), allfields = jquery( [] ).add( name ).add( email ).add( password ), tips = jquery( ".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 > max || o.val().length < min ) { o.addclass( "ui-state-error" ); updatetips( "length of " + n + " must between " + min + " , " + 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; } } jquery( "#dialog-form" ).dialog({ autoopen: false, height: 300, width: 350, modal: true, buttons: { "create 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_])+jquery/i, "username may consist of a-z, 0-9, underscores, begin letter." ); // jquery.validate.js (by joern), contributed scott gonzalez: http://projects.scottsplayground.com/email_address_validation/ bvalid = bvalid && checkregexp( email, /^((([a-z]|\d|[!#\jquery%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+(\.([a-z]|\d|[!#\jquery%&'\*\+\-\/=\?\^_`{\|}~]|[\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])))\.?jquery/i, "eg. ui@jquery.com" ); bvalid = bvalid && checkregexp( password, /^([0-9a-za-z])+jquery/, "password field allow : a-z 0-9" ); if ( bvalid ) { jquery( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); jquery( ).dialog( "close" ); } }, cancel: function() { jquery( ).dialog( "close" ); } }, close: function() { allfields.val( "" ).removeclass( "ui-state-error" ); } }); jquery( "#create-user" ) .button() .click(function() { jquery( "#dialog-form" ).dialog( "open" ); }); }); }); })
but getting such error:
uncaught typeerror: object [object object] has no method 'dialog' .
what can problem? how solve this?
thanks.
besides reordering of includes , obvious answer jquery included in wordpress admin see 2 more issues.
- 1 - "
$this->plugin_slug .'-admin-styles'
" on 3 files tell wordpress include 1 file, need define unique handle names not overwite previous ones. - 2 - might want consider define dependencies like:
wp_enqueue_script( $this->plugin_slug .'-admin-styles', plugins_url( 'js/jquery-1.9.1.js', __file__ ), array('jquery') );
jquery whatever unique handle give jquery file.
in conclusion should have:
public function enqueue_admin_scripts() { wp_enqueue_script( $this->plugin_slug .'-admin-styles-new-jquery', plugins_url( 'js/jquery-1.9.1.js', __file__ ) ); wp_enqueue_script( $this->plugin_slug .'-admin-styles-new-jquery-ui', plugins_url( 'js/jquery-ui-1.10.3.custom.min.js', __file__ ), array( $this->plugin_slug .'-admin-styles-new-jquery' ) ); wp_enqueue_script( $this->plugin_slug .'-admin-styles-my-admin-javascript', plugins_url( 'js/admin.js', __file__ ), array( $this->plugin_slug .'-admin-styles-new-jquery' ) ); }
Comments
Post a Comment