[英]Joomla 2.5 modal popup component form
我正在尝试修改Joomla组件以实现一些Ajax功能,以使网站用户的工作更加简化。 我更改了以下信息,以使项目保持匿名状态,因为我很偏执:-)
我想实现的目标很简单:
->用户进入xyz组件的“订单”页面
->如果在订购页面上没有该用户的收货地址,请提供一个链接以创建一个
->当用户单击“添加地址”时,将出现一个模式窗口,并向具有“添加地址”形式的“添加地址”页面发出ajax请求
->模态不显示整页,而是仅显示表单和必填(必填)表单字段
->用户输入地址信息,然后单击按钮提交表单。
->验证字段然后发布
->模式关闭
->在原始“订单”页面上具有交货地址的字段将刷新,现在包括新地址。 这不应刷新整个页面,因为用户可能已将数据放入其他表单元素中。 这个很重要。
好,现在您知道了我要实现的目标,让我向您介绍当前的目标。
->用户进入xyz组件的“订单”页面
->如果在订购页面上没有该用户的收货地址,请提供一个链接以创建一个
我已经编写了一个简单的php if语句,该语句使用文本“添加地址”和ID“ addNewAddress”创建锚链接
->当用户单击“添加地址”时,将出现一个模式窗口,并向具有“添加地址”形式的“添加地址”页面发出ajax请求
我正在使用来自http://simplemodal.plasm.it的名为SimpleModal
的Mootols插件
->模态不显示整页,而是仅显示表单和必填(必填)表单字段
我扩展了模态的功能,允许我注入一些mootools过滤,因为我只想显示表单,仅此而已。 我已将此添加为名为getSomething
的新参数,可以在需要时进行注入。
//SIMPLEMODAL
$("addNewAddress").addEvent("click", function(){
var SM = new SimpleModal({"width":600});
SM.addButton("Action button", "btn primary", function(){
$('addressForm').submit();
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal-ajax",
"title":"New address",
"param":{
"url":"index.php?option=com_address&modal=true",
"getSomething":"#addressForm",
"onRequestComplete": function(){}
}
});
});
这就是它调用的函数:
else if (param.getSomething.match(elid))
{
// Request HTML
this.request = new Request.HTML({
evalScripts:false,
url: param.url,
method: 'get',
onRequest: function(){},
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
var f = responseElements.filter(param.getSomething);
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").adopt(f);
param.onRequestComplete();
// Execute script page loaded
eval(responseJavaScript)
// Resize
this._display();
// Add Esc Behaviour
this._addEscBehaviour();
}.bind(this),
onFailure: function(){
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").set("html", "loading failed")
}
}).send();
}
*现在,到目前为止,我已经设法开始工作,但是我无法弄清楚下一部分。 *
->用户输入地址信息,然后单击按钮提交表单。
在ajax请求URL的末尾,您可能会注意到我发送了modal = true请求,这是为了隐藏不需要在模式窗口中显示的表单上的某些元素-表单本身从模式调用时,提交按钮被隐藏。
->验证字段然后发布
如果我在不使用模式的情况下调用“ addaddress”页面,则表单具有其自己的验证。 但是,使用模式时,当我单击“提交”时,不会进行任何验证,并且地址将被添加而无需进行任何验证。 我需要使用模态本身内部的独立验证对字段进行一些验证。
->模式关闭
目前,当表单发布后,我将重定向到“ viewaddresses
”页面,但我相信我可以自己解决此问题。 相反,我只想关闭模式。
->在原始“订单”页面上具有交货地址的字段将刷新,现在包括新地址。 这不应刷新整个页面,因为用户可能已将数据放入其他表单元素中。 这个很重要。
这是不言自明的,但我不确定从哪里开始。
我想我已经很清楚了,但是如果您还有其他需要,请告诉我。
我非常感谢您可以提供的任何帮助。
您可能缺少的是如何触发表单提交。
$('myForm').fireEvent('submit');
因此,使用您的示例,我将模式按钮之一的代码更改为:
SM.addButton("Submit button", "btn primary", function () {
$('addressForm').fireEvent('submit');
});
在Mootools Form.Validator中,您可以捕获formValidate事件。 描述:
formValidate-(函数)在表单验证完成时执行的回调; 此函数传递三个参数:布尔值(如果表单通过了验证,则为true); 表单元素; 和onsubmit事件对象(如果存在)(否则,传递未定义)。
我不确定为什么以编程方式触发提交时为什么不提交表单,但是无论如何,您可以在此函数内添加一个新的.submit()
来检查验证器的布尔结果。
所以你可以这样:
new Form.Validator.Inline(myForm, {
onFormValidate: function (bool, element) {
if (bool) {
element.submit();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.