Joomla 3 在模态中使用表单
[英] Joomla 3 use form in modal
本文介绍了Joomla 3 在模态中使用表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在 Joomla 模态窗口中使用 jForms 表单
我使用:
- Joomla 3.4.5
- 引导程序 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
然后，在一些关闭和打开之后，表单将显示双倍.
解决方案
我有点解决了.
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-dialog"><div class="modal-content"><!--所有内容都会在这里加载-->
3.1.模态触发器
要触发模态，我有一个按钮或链接.
它连接到标准模式"但具有独特的类 .callback-modal.所以后来脚本知道这是一个什么样的按钮.
(本可以使用 ID 代替...)
3.2.Javascript
功能:
//回调按钮功能 customModal(modalTrigger，链接){var baseURL = window.location.protocol + "//";+ window.location.host + "/";var mainModal = $(#modal");var mainModalString = "#modal";//不是最好的解决方案var mainModalContent = mainModal.find(.modal-content");$(modalTrigger + '[data-target="' + mainModalString + '"]').click(function() {mainModal.on(show.bs.modal", function() {mainModalContent.load(baseURL + 链接);})})}
为我们的.callback-modal执行函数:
customModal(".callback-modal", "index.php?option= SOME COMPONENT tmpl=component");
因为链接后有&tmpl=component，Joomla 只会显示组件本身.
而且因为它是一个函数，所以我现在可以创建任意数量的模态.(它不能与多个模态完美配合)
编辑
我优化了脚本以获得更多动态模态.
现在，如果您告诉脚本链接具有哪个类和什么 href(步骤 3.2)，您就不必进行额外的编码了.
在这种情况下，我从 Bootstrap 切换到 Uikit，只是因为我不了解 Bootstraps 远程方法.我认为使用 Bootstrap 4 可以很容易地调整脚本.
代码
在索引文件的顶部再次是基本模式:
<div class="uk-modal-dialog"><div class="uk-modal-header"><a class=uk-modal-close uk-close"</a>
<div class="uk-modal-content">...
触发器链接如下所示:
脚本:
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':函数(){$modalContent.empty();}});
在带有 .modal-trigger 类的每个链接上，它添加了所需的 Uikit 数据属性 data-uk-modal"、{target:'#modal'},
获取链接并将其加载到 .uk-modal-content 中.
关闭模态后所有内容将被删除.
I want to use a jForms form in a Joomla modal window
I use:
- Joomla 3.4.5
- Bootstrap 3.3.5
- jQuery 1.11.3
- mootools (don't know which version)
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.
The form is displayed in the modal.
Errors
Every time I open the modal, javascript gives me this error
Uncaught TypeError: jQuery(...).find(...).radioToBtn is not a function
The form is still displayed.
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.
解决方案
I kinda solved it.
1. The first step was to minimize the number of loaded scripts.
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.
Now loading scripts:
- 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. The form component
jForms works with mootools, that's because I switched to Visforms - seems to work fine.
3. Implement the Bootstrap modal
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. The Modal trigger
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>
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. The Javascript
The function:
// 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);
})
})
}
Execute the function for our .callback-modal:
customModal(".callback-modal", "index.php?option= SOME COMPONENT tmpl=component");
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)
Edit
I optimized the script for more dynamic modals.
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).
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.
Code
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>
The trigger links look like this:
<a href="some internal link" class="modal-trigger">Open modal</a>
Script:
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();
}
});
On every link with the .modal-trigger class it adds the needed Uikit data attributes data-uk-modal", "{target:'#modal'},
grabs the link and loads it into the .uk-modal-content.
All content will be removed after closing the modal.
这篇关于Joomla 3 在模态中使用表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
