Tell us what you are trying to do?
hey there,
my question is how to use jquery plugins probably with toolset.
i have tried to get this little one running but it is not working:
hidden link
this is my setup :
i copied the minified.js in the childtheme under the js directory
In a content template i have this:
html:
<script src="/assets/js/jquery-ensure-max-length.min.js"></script>
<input type="text" id="demo-1">
<textarea id="demo-2" rows="5"></textarea>
js:
$(document).ready(function(){
$(function(){
$( '#demo-1,#demo-2' ).EnsureMaxLength({
separator: ' of '
});
});
});
but this don´t work. what have i done wrong. can toolset work with jquery plugins?
Thanks for your help
Hi, you should not include script tags in a Content Template (or anywhere else in wp-admin, really). Instead, you should enqueue this plugin file using WordPress's wp_enqueue_scripts function. This is part of WordPress best practices:
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
Since it's a jQuery plugin, you should be sure to include jquery as one of the dependencies. Then you can make a small adjustment to the initialization code and add it in the Content Template's JS panel:
$(document).ready(function($){
$( '#demo-1,#demo-2' ).EnsureMaxLength({
separator: ' of '
});
});
hey christian thanks for your tip.
i have added this one in my childs function:
(the plugin is located in the childs theme directory js/jquery-ensure-max-length.min.js)
// limit-character-ensure-max-length plugin
function my_theme_scripts() {
wp_enqueue_script( 'limit-character', get_stylesheet_directory_uri() . '/js/jquery-ensure-max-length.min.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
and this in the content template:
html
<input type="text" id="demo-1">
<textarea id="demo-2" rows="5"></textarea>
[php]
js
[php]
$(document).ready(function(){
$(function(){
$( '#demo-1,#demo-2' ).EnsureMaxLength({
separator: ' of '
});
});
});
but it does not work.
cheers
Check the syntax. You probably don't need both document.ready and $(function().... You can also try logging some things to the browser console to see what the problem could be.
$(document).ready(function($){
console.log('document ready');
$( '#demo-1,#demo-2' ).EnsureMaxLength({
separator: ' of '
});
console.log('ensuremaxlength initialized');
});
Check the browser console for any errors.
