Joomla 3使用形式的形式

Question

我想在Joomla模式窗口中使用jForms表单

我用：

• Joomla 3.4.5
• 引导程序3.3.5
• jQuery 1.11.3
• mootools （不知道哪个版本）

我通过JHTML::_('behavior.modal');加载了所需的脚本JHTML::_('behavior.modal'); ，
将.modal添加到a元素，并使用Joomla url片段&tmpl=component仅显示组件。

表单显示在模式中。

失误
每次我打开模态时，javascript都会给我这个错误
Uncaught TypeError: jQuery(...).find(...).radioToBtn is not a function

该表格仍然显示。

如果我将其关闭并再次打开，则会出现此错误
Uncaught TypeError: Cannot read property 'response' of null

然后，在关闭和打开后，表格将显示为两倍。

Answer 1

我解决了。

1.第一步是最小化已加载脚本的数量。

我完全没有设置mootools-因为没有人想要它。 我注意到Joomla加载了bootstrap.min.js，因此它被加载了两次，一次是在我的模板中，另一次是从Joomla。

现在加载脚本：

• jquery-migrate.js
• jquery-min.js
• jquery-noconflict.js
• caption.js（也许有人有删除它的想法。当我这样做时，我得到一个错误Uncaught ReferenceError: JCaption is not defined ）
• bootstrap.min.js
• my-own.js
• 和扩展的一些脚本...

2.表单组件

jForms可与mootools一起使用，这是因为我改用了Visforms-似乎工作正常。

3.实施Bootstrap模式

在打开主体之后的index.php ，我创建了“标准模态”。

之后，内容将动态加载到模态中。

<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!--all the content will be loaded here-->        
    </div>
  </div>
</div>

3.1。 模态触发

要触发模式，我有一个按钮或一个链接。

<a href="#" class="btn callback-modal" type="button" data-toggle="modal" data-target="#modal">Click the button</a>

它连接到“标准模式”，但具有唯一的类.callback-modal 。 因此，稍后脚本会知道这是哪种按钮。
（本来可以使用ID ...）

3.2。 Javascript

功能：

// Callback Button
function customModal(modalTrigger, link) {
    var baseURL             = window.location.protocol + "//" + window.location.host + "/";
    var mainModal           = $("#modal");
    var mainModalString     = "#modal";         // not the best solution
    var mainModalContent    = mainModal.find(".modal-content");

    $(modalTrigger + '[data-target="' + mainModalString + '"]').click(function() {
        mainModal.on("show.bs.modal", function() {
            mainModalContent.load(baseURL + link);
        })  
    })
}

执行我们的.callback-modal函数：

customModal(".callback-modal", "index.php?option= SOME COMPONENT tmpl=component");

由于链接后的&tmpl=component ，Joomla将仅显示组件本身。

而且由于它是一个函数，我现在可以根据需要创建任意数量的模态。 （它不适用于多种模式）

编辑

我针对更动态的模态优化了脚本。

现在，如果您告诉脚本链接具有哪个类和href，则不必进行额外的编码（步骤3.2）。

在这种情况下，我因为不了解Bootstraps远程方法而从Bootstrap切换到Uikit。 我认为使用Bootstrap 4可以很容易地修改脚本。

码

索引文件的顶部再次是基本模式：

<div id="modal" class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">
            <a class="uk-modal-close uk-close"></a>
        </div>

        <div class="uk-modal-content">
            ...
        </div>
    </div>
</div>

触发链接如下所示：

<a href="some internal link" class="modal-trigger">Open modal</a>

脚本：

var $modalTrigger = $(".modal-trigger");
var $modal = $("#modal");
var $modalContent = $(".uk-modal-content");
var spinner = '<div class="uk-modal-spinner"></div>';

if( $modalTrigger.attr("href") ){
    $modalTrigger.attr("data-uk-modal", "{target:'#modal'}");
};

$modalTrigger.click(function() {
    $modalContent.append(spinner);
    $modalContent.load( $(this).attr("href") );
});

$modal.on({
    'hide.uk.modal': function(){
        $modalContent.empty();
    }
});

在与.modal-trigger类的每个链接上，它添加所需的Uikit数据属性data-uk-modal", "{target:'#modal'} ，

抓取链接并将其加载到.uk-modal-content 。

关闭模式后，所有内容将被删除。