Jquery / AJAX / CakePHP模态消息，进入灯箱只有当有一个模态错误？ [英] Jquery / AJAX / CakePHP Modal messages, into lights out box only when there is a modal error?
问题描述
EDITS
这是我一直在工作的新代码，如果我有新的代码在检查提交之外，那么页面甚至不在一边，它只是到新的URL！但随后加载模态检查，但在计划页面中执行所有这些，因为它刚刚加载了AJAX文件！
Glenn。
$（document）.ready（function（）{
$（'＃UserSignUpUserForm'）。
if（$（'div.error-message'）。size（）== 0）{//如果没有错误消息
$（'form'）。 / unbind表单提交
$（'form'）。submit（）; //现在提交表单重载页面
} else {
e.preventDefault（）;
$ .post（$（this）.attr（'action'），$（this）.serialize（），function（res）{
$（'form'）。replaceWith（res）;
console.log（res）;
}）
} // if / else check结束
}）
}）;
OLD POST
Ok有人帮助我，并给我这个代码来解决我的一个问题，但现在这个代码，一旦我得到了更详细的检查它不工作100％。我使用CakePHP，我有一个用户注册的管理员，它加载到一个灯箱。当注册模态有满足在密码中的至少8个字母，并且用户名是唯一的。
现在代码（我已经添加到）给我，以确保divs的模态错误加载到灯光盒。问题是，当没有错误时，页面重定向加载到灯光输出框，而不是进入主浏览器窗口。
所以我试图更改下面的代码添加一个检查看看这些或者如果这些错误从服务器返回，然后如果这样的话，代码，如果不是（如果一切都是好的）然后不做任何事情。
我对JQuery有点弱，PHP更多的是我的东西。对不起，如果我有任何新的错误.....
$（'form' function（e）{
var pattern ='error-meesage'; //我添加了这个$ b $ b var exists = pattern.test（res）; //我添加了这个$ b
$ b if（exists）{//我添加了这个$ b $ b e.preventDefault（）;
$ .post（$（this）.attr（'action'），$（this）.serialize （res）{
$（'form'）。replaceWith（res）;
console.log（res）;
}）
} //我添加了这个$ b $ b}）
这是它给我的回报， divs，它将它们加载到一个新的窗口，没有任何布局，因为请求是由AJAX！
未捕获ReferenceError ：$未定义
非常感谢
Glenn。
EDIT
我添加了这个代码工作没有任何问题，它可以访问Jquery lib文件，但我想我可能会停止布局从蛋糕加载一路!!
感谢Glenn。
您要求的EDITS代码是blow ::
我也会更新你的事实，我现在已经删除了灯箱，但我做的是或多或少是同样的事情。我现在加载这些网页仍然使用AJAX到一个隐藏的div，然后侧面使用JQuery UI的副作用。但同样的错误发生。如果有错误，那么蛋糕报告从模态的错误消息与一个div有类或错误消息。但是如果没有错误消息div并且它保存得很好，它会将内容加载到显示在屏幕一侧的div中，就像在我的灯箱一样！
但是添加了额外的代码，它只是提交页面没有用户甚至，看到整个一面进来。甚至对我来说，这应该是一个快速修复（只是没有得到它，让，约5件事我正在与这个网站），只是检查后提交。即使，当它提交它加载整个页面，但在我的默认布局之外，例如。它仍然加载它有一个ajax页面。
我希望已经说明了。
这是我的预设版面配置档案，
<！DOCTYPE html>
< html>
< head>
<？php
$ Header = $ this-> Html-> charset（）;
$ Header。='< title> XXXXXXXX< / title>';
$ Header。= $ this-> Html-> meta（'icon'）;
$ Header。= $ this-> AssetCompress-> css（'CssFile'）;
$ Header。= $ this-> AssetCompress-> script（'JSFile'）;
$ Header。= $ this-> fetch（'meta'）;
$ Header。= $ this-> fetch（'css'）;
$ Header。= $ this-> fetch（'script'）;
echo $ Header;
？>
<？php
$ MainLayout ='< div id =Logo>'。 $ this-> Html-> image（'logo.gif'，array（'alt'=>'top banner'））。 '< / div>';
$ MainLayout。= $ this-> Session-> flash（'bad'，array（'element'=>'FlashError'））
$ MainLayout。= $ this-> Session-> flash（'good'，array（'element'=>'FlashGood'））;
$ MainLayout。= $ this-> Session-> flash（'auth'，array（'element'=>'FlashError'））
$ MainLayout。= $ this-> fetch（'content'）;
echo $ MainLayout;
？>
< div class =SideBoxUser>< / div> //这些是文件加载的区域！
< div class =SideBoxClient>< / div>
file form ::
<？php
$ this-> layout ='ajax'
$ AddUserForm = $ this-> Form-> create（'User'，array（'url'=>'/ PATH-TO-GO TO'））;
$ AddUserForm。=< h1>添加新用户< / h1>;
$ AddUserForm。= $ this-> Form-> input（'username'）;
$ AddUserForm。= $ this-> Form-> input（'password'）;
$ AddUserForm。= $ this-> Form-> input（'email'）;
$ AddUserForm。= $ this-> Form-> input（'role'，array（'options'=> array（'user'=>'User'，'admin'=> Admin'）））;
$ AddUserForm。= $ this-> Form-> input（'clients_id'，array（'options'=> array（$ AllClients），'empty'=> true）
$ AddUserForm。= $ this-> Form-> submit（SAVE USER，array（'class'=>'Button'））;
$ AddUserForm。= $ this-> Form-> end（）;
echo $ AddUserForm;
？>
< script>
$（document）.ready（function（）{
$（'form'）。on（'submit'，function（e）{
e.preventDefault（）;
$ .post（$（this）.attr（'action'），$（this）.serialize（），function（res）{
$（'form'）。replaceWith（res）;
console.log（res）;
}）
}）
if（$（'div.error-message'）。size（）== 0）{//如果没有错误消息
$（'form'）。off（'submit'）; //解除绑定表单提交
$（'form'）。submit（）; //立即提交表单重载page。
}
}）;
< / script>
JS文件用于加载侧盒::
$（。ADDUSER）click（function（）{//这是我的页面上的文本链接
$（'SideBoxUser'）。 toggle（slide，{direction：right}，1000）;
$（'SideBoxUser'）。load（'/ PATH-TO-GO TO'）;
}
我希望是所有的代码，如果没有，让我知道....
非常感谢Glenn。
$（this）.attr（'action'），$（'form'）。on（'submit'，function（e）{
e.preventDefault（）;
$ .post这个）.serialize（），function（res）{
$（'form'）。replaceWith（res）;
console.log（res）;
}）
} ）
在这些行之后，只需添加此代码以检查您的HTML中的错误消息，如下所示， / p>
if（$（'div.error-message'）。size（）== 0）{//如果没有错误消息
$（'form'）。off（'submit'）; //解除绑定表单提交。
$（'form'）。submit（）; //现在提交表单重新加载页面。
}
我根据我的理解做了，希望这可以帮助你。 / p>
EDITS
This is the new code I have been working, if I have the new code outside of the check for submit, then the page does not even side in, it just goes to the new URL! but then loads the modal checks, but does all of this in a plan page as it has just loaded the AJAX file!
Glenn.
$(document).ready(function() {
$('#UserSignUpUserForm').on('submit', function(e) {
if ($('div.error-message').size() == 0) { // if no error messages
$('form').off('submit'); // unbind the form submission.
$('form').submit(); // submit the form now to reload the page.
} else {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function(res) {
$('form').replaceWith(res);
console.log(res);
})
} //End of if / else check!
})
});
OLD POST
Ok someone help me and gave me this code to solve one of my issues but now this code, once I got around to checking it out in more detail does not work 100%. I am using CakePHP and I have a user sign up for the admins, which loads into a lights out box. When the sign up modal has the meet at lest 8 letters in the password and the username has t be unique.
Now the code (which I have added to) was given to me to make sure the divs the the modal errors loaded into the lights out box. The problem is that when there are NO error the page redirect loads into the lights out box and not into the main browser window.
So I am trying to change the code below to add in a check to see when these or if these errors come back from the server, then if so fire the code, if not (if all is good) then don't do anything.
I am a little weak with JQuery, PHP being more my thing. Sorry if I have any any newbe mistakes.....
$('form').on('submit', function(e) {
var pattern = 'error-meesage'; //I added this
var exists = pattern.test(res); //I added this
if(exists) { //I added this
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function(res) {
$('form').replaceWith(res);
console.log(res);
})
} //I added this
})
This is what it gives me back, and it does not work when the errors-message divs are there, it loads them into a new window without any layout, as the request is being made by AJAX!
Uncaught ReferenceError: $ is not defined
Many thanks
Glenn.
EDIT
If you remove the lines where I mark that 'I added this' then the code works without any problems, it has access the Jquery lib file but I think I might be stopping the layout from Cake to load all the way!!
Thanks Glenn.
EDITS Code you have request is blow ::
I will also update you on the fact that I have now removed the lights out box, but what I am doing is more or less the same thing. I am now loading these pages still using AJAX into a hidden div, which then sides in using the JQuery UI side effects. But the same error happens. If there is an error, then cake reports back the error message from the modal with a div which has the class or error-message. However if there is no error message div and it saves fine, it loads the content into the div that is displayed on the side of my screen, just like it did with my lights out boxs!
However with your added extra code, it just submits the page without the user even, getting to see the whole side come in. Even to me, this should be a quick fix (just have not got around to it let, about 5 things I am working on with this site), just to check for post submit. Even though, when it does submit it loads the whole page but outside of my default layout, e.g. it is still loading it has an ajax page.
I hope that has made it clear.
This is my default layout file,
<!DOCTYPE html>
<html>
<head>
<?php
$Header = $this->Html->charset();
$Header .= '<title>XXXXXXXX</title>';
$Header .= $this->Html->meta('icon');
$Header .= $this->AssetCompress->css('CssFile');
$Header .= $this->AssetCompress->script('JSFile');
$Header .= $this->fetch('meta');
$Header .= $this->fetch('css');
$Header .= $this->fetch('script');
echo $Header;
?>
<?php
$MainLayout ='<div id="Logo">' . $this->Html->image('logo.gif', array('alt' => 'top banner')) . '</div>';
$MainLayout .= $this->Session->flash('bad', array('element' => 'FlashError'));
$MainLayout .= $this->Session->flash('good', array('element' => 'FlashGood'));
$MainLayout .= $this->Session->flash('auth', array('element' => 'FlashError'));
$MainLayout .= $this->fetch('content');
echo $MainLayout;
?>
<div class="SideBoxUser"></div> //These are the areas where file loads!
<div class="SideBoxClient"></div>
The user file form ::
<?php
$this->layout = 'ajax';
$AddUserForm = $this->Form->create('User', array('url' => '/PATH-TO-GO-TO'));
$AddUserForm .= "<h1>Add New User</h1>";
$AddUserForm .= $this->Form->input('username');
$AddUserForm .= $this->Form->input('password');
$AddUserForm .= $this->Form->input('email');
$AddUserForm .= $this->Form->input('role', array('options' => array('user' => 'User','admin' => 'Admin')));
$AddUserForm .= $this->Form->input('clients_id', array('options' => array($AllClients), 'empty'=>true));
$AddUserForm .= $this->Form->submit("SAVE USER", array('class' =>'Button'));
$AddUserForm .= $this->Form->end();
echo $AddUserForm;
?>
<script>
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function(res) {
$('form').replaceWith(res);
console.log(res);
})
})
if ($('div.error-message').size() == 0) { // if no error messages
$('form').off('submit'); // unbind the form submission.
$('form').submit(); // submit the form now to reload the page.
}
});
</script>
JS file for what loads the side box ::
$(".ADDUSER").click(function() { //This is for the text link on my page
$('.SideBoxUser').toggle("slide", { direction: "right" }, 1000);
$('.SideBoxUser').load('/PATH-TO-GO-TO');
});
I hope that is all the code, if not, let me know....
Many thanks Glenn.
$('form').on('submit', function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function(res) {
$('form').replaceWith(res);
console.log(res);
})
})
After these lines just add this code for checking of error messages in your html as like below,
if ($('div.error-message').size() == 0) { // if no error messages
$('form').off('submit'); // unbind the form submission.
$('form').submit(); // submit the form now to reload the page.
}
I've done according to my understanding, Hope this may help you.
这篇关于Jquery / AJAX / CakePHP模态消息，进入灯箱只有当有一个模态错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
