Joomla 3 在模态中使用表单

Question

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

我用：

Joomla 3.4.5
Bootstrap 3.3.5
jQuery 1.11.3
mootools (不知道是哪个版本)

我通过 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
我的-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。模态触发器

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

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

它连接到“标准模式”，但具有独特的 class .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");

因为 link 之后的 &tmpl=component，Joomla 将只显示组件本身。

因为它是一个函数，所以我现在可以根据需要创建任意数量的模态框。（它不能完美地与多个模态一起工作）

编辑

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

现在，如果您告诉脚本 class 和 link 有哪些 href（步骤 3.2），您就不必再进行额外的编码了。

在这种情况下，我从Bootstrap切换到Uikit，只是因为我不了解Bootstrap的远程方法。我认为使用 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>

触发器 link 看起来像这样：

<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();
    }
});

在每个 link 上 .modal-trigger class 添加所需的 Uikit 数据属性 data-uk-modal", "{target:'#modal'},

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

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

Joomla 3 在模态中使用表单

Joomla 3 use form in modal

forms

jquery

joomla

modal-dialog

twitter-bootstrap

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

我有点解决了。

编辑