Joomla 3使用形式的形式 [英] Joomla 3 use form in modal

问题描述

我使用:

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

• Joomla 3.4.5
• Bootstrap 3.3.5
• jQuery 1.11.3
• mootools (don't know which version)

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

I load the needed scripts via JHTML::_('behavior.modal');,
add .modal to the a element and used the Joomla url snippet &tmpl=component for only displaying the component.

表单以模式显示.

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

Errors
Every time I open the modal, javascript gives me this error
Uncaught TypeError: jQuery(...).find(...).radioToBtn is not a function

表单仍显示.

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

If i close it and open it again this error appears
Uncaught TypeError: Cannot read property 'response' of null

然后，在关闭和打开后，该表单将显示为两倍.

Then, after some closing and opening, the form will be displayed double.

推荐答案

我有点解决了.

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

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

I unset mootools completly - because no body wants it. I noticed Joomla loaded the bootstrap.min.js, so it was loaded two times, one in my template and one from Joomla.

正在加载脚本:

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

• jquery-migrate.js
• jquery-min.js
• jquery-noconflict.js
• caption.js (Maybe someone has an idea for removing it correclty. When I do it I get an error Uncaught ReferenceError: JCaption is not defined)
• bootstrap.min.js
• my-own.js
• and some scripts of an extension...

2.表单组件

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

jForms works with mootools, that's because I switched to Visforms - seems to work fine.

3.实施Bootstrap模式

在打开主体后的index.php中，我创建了标准模态".

In the index.php after the opening body, I created the "standard modal".

稍后，内容将动态加载到模式中.

Later the content will be loaded dynamicly into the modal.

<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.模态触发器

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

To trigger the modal I have a button or a link.

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

它连接到标准模态"，但具有唯一的类.callback-modal.因此，以后脚本知道这是哪种按钮.
(本来可以使用ID ...)

It's connected to the "standard modal" but with the unique class .callback-modal. So later The script knows what kind of button this is.
(Could have used an ID instead...)

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将仅显示组件本身.

Because of the &tmpl=component after the link, Joomla will only display the component itselfe.

由于这是一个函数，我现在可以根据需要创建任意数量的模态. (它不适用于多种模式)

And because it's a function I can now create as many modals as I want. (It's not working perfectly with multiple modals)

我对脚本进行了优化，以提供更多动态模态.

I optimized the script for more dynamic modals.

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

Now you don't have to do this extra coding were you tell the script which class and what href the link has (Step 3.2).

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

In this case I switched from Bootstrap to Uikit, just because I do not understand Bootstraps remote method. I think with Bootstrap 4 the script can be adapted very easily.

代码

索引文件的顶部再次位于基本模式:

At the top of the index file sits again the basic modal:

<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'}

On every link with the .modal-trigger class it adds the needed Uikit data attributes data-uk-modal", "{target:'#modal'},

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

grabs the link and loads it into the .uk-modal-content.

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

All content will be removed after closing the modal.

这篇关于Joomla 3使用形式的形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！