Custom field colResizable plugin not working but works in fiddle

Question

I got this fiddle: http://jsfiddle.net/2h4kLzgj/9/

Now I am trying to add this to a custom field in Joomla but for some reason it does not work at all in the administrator.

The table shows up but the functionality is not there. But because it shows up the link to the customfield is correct.

Here is the contents of the custom field:

<?php

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');
$document = JFactory::getDocument();
$document->addScript(JURI::root(true) .'/modules/mod_loginsecurepagemaker/models/assets/js/colResizable-1.5.min.js');
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js');
class JFormFieldColumnTwelve extends JFormField {

    protected $type = 'columntwelve';

    public function getInput() {

        return '<table id="tableResizable" border="0" cellpadding="0" cellspacing="0" >'.
                '<tbody>'.
                 '<tr>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                 '</tr>'.
                '</tbody>'.
               '</table>';
    }
}
?>
<style>
body {background:white;}
#tableResizable {
  width:100%;
}
td {border: 1px solid black;}
.JCLRgrip .JColResizer {
    cursor: col-resize!important;
}
.grip {
    width: 4px;
    height: 100%;
    margin-top: 0px;
    margin-left: 2px;
    background-color: black;
    position: relative;
    z-index: 88;
    cursor: col-resize!important;
    opacity: 1;
}
.grip:hover{
  background-color: red;}
</style>
<script>
(function ($) {
    $("#tableResizable").colResizable({
        fixed:true,
        liveDrag:true,
        gripInnerHtml:"<div class='grip'></div>",
        draggingClass:"dragging" });
})(jQuery);
</script>
<?php

If anyone could help me figure out how to get the same effect as in the fiddle then that is highly appreciated.

PS: Style and Script will eventually be placed in the assets folder this is just for quick testing.

Answer 1

You are calling the colResizable jQuery plugin before the jQuery itself. It should be the other way round.

Also, Joomla's admin should also already have jQuery loaded, but that uses jQuery v1.12.4. The two JQuerys could be causing conflicts.

Couple of things to try:

• Open your console (F12) and reload the page - does it give any js error messages?

• View the source and click on the javascript links - make sure they are loading, that they are loading in the right order and not going to a 404.

Answer 2

How about to change the $ sign with jQuery? So the code would be

jQuery("#tableResizable").colResizable({
        fixed:true,
        liveDrag:true,
        gripInnerHtml:"<div class='grip'></div>",
        draggingClass:"dragging" });