web-dev-qa-db-fra.com

Le plugin colResizable de champ personnalisé ne fonctionne pas mais fonctionne en violon

J'ai eu ce violon: http://jsfiddle.net/2h4kLzgj/9/

Maintenant, j'essaie d'ajouter ceci à un champ personnalisé dans Joomla, mais pour une raison quelconque, cela ne fonctionne pas du tout dans l'administrateur.

Le tableau apparaît mais les fonctionnalités ne sont pas là. Mais parce qu’il s’affiche, le lien vers le champ personnalisé est correct.

Voici le contenu du champ personnalisé:

<?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

Si quelqu'un peut m'aider à comprendre comment obtenir le même effet que dans le violon, c'est très apprécié.

PS: Style et Script seront éventuellement placés dans le dossier assets, ceci pour un test rapide.

modulejoomla-3.6module-paramscustom-field
1
purple11111

Vous appelez le plugin jQuery colResizable avant le jQuery lui-même. Ce devrait être l'inverse.

En outre, jQuery devrait déjà être chargé dans l’administrateur de Joomla, mais il utilise jQuery v1.12.4. Les deux JQuerys pourraient être à l'origine de conflits.

Quelques choses à essayer:

  • Ouvrez votre console (F12) et rechargez la page - cela donne-t-il des messages d'erreur js?

  • Affichez le code source et cliquez sur les liens javascript - assurez-vous qu’ils se chargent, qu’ils se chargent dans le bon ordre et qu’ils ne passent pas à un 404.

3
Richard B

Que diriez-vous de changer le signe $ avec jQuery? Donc, le code serait

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