Zend form ajax validation on submit - ajax

I am currently trying to validate a zend form with ajax and zend validate at the same time...
Let me explain, my forms pops up in an iframe (fancybox) and when submitted, I need to display a "thank you" message, close the iframe and redirect the user. I planned to use ajax validation to close the fancybox iframe if success.
I followed several tutorials http://www.zendcasts.com/ajaxify-your-zend_form-validation-with-jquery/2010/04/ explaining how to ajaxify your zend form to display errors for instance onblur event on a textinput.
Everything works find onblur or over events but when I specify the click event on the submit button, my guess is that the form gets processed by zend and ajax validation doesn't work... Do you have any hints or do you see obvious mistakes??
thanks a lot....
the javascript:
$(function()
{
$('#contact').submit(function()
{
doValidation();
});
});
function doValidation()
{
var url = '/ceramstar/public/contact/validateform';
var data = {};
$("input").each(function(){
data[$(this).attr('name')] = $(this).val();
});
$.post(url,data,function(resp)
{
//document.write(resp);
console.log(resp);
alert(resp);
//parent.$.fancybox.close();
},"json");
}
the zend action:
public function validateformAction()
{
$this->_helper->viewRenderer->setNoRender();
$this->_helper->layout->disableLayout();
$form = new Form_ContactForm();
$form->isValidPartial($this->_getAllParams());
//print_r($bool);
$json = $form->processAjax($this->getRequest ()->getPost ());
header('Content-type: application/json');
echo Zend_Json::encode($json);
}

You should return false or preventDefault on the .submit
(function() {
$('#contact').submit(function() {
doValidation();
return false;
}
});

Related

AngularJS : ng-selectize is not initializing selctize options after AJAX call

I'm using ng-selectize directive to a select box using angularJS. Options to the slectbox are retrieved from an AJAX call. AJAX call response is coming in proper format.If do inspect element, select box options are populated properly. But in the UI, options are not rendered. Is there any specific reason for this behaviour? The same code is working fine in another place.
Here is my code:
HTML:
<select multiple="multiple"
ng-model="email.existing"
ng-options="obj.email for obj in emailLists track by obj.email"
placeholder="Choose from existing email address"
selectize>
Javascript
angular.module('myApp', [
'myApp.controllers',
'myApp.services',
'ngDialog',
'angular-selectize'
]);
angular.module('myApp.services', []).
factory('myAPIservice', function($http) {
var myAPI = {};
myAPI.getAllEmail = function( data ) {
return $http.post(APP_BASE_URL + "director/getallemail", data );
}
return myAPI;
});
angular.module('myApp.controllers', [])
.controller('myCntrl', function($scope, myAPIservice, ngDialog) {
myAPIservice.getAllDirectorsEmail({}).success(function (response) {
$scope.emailLists = response;
});
});
The above code retrieves email list from url. Sample response will look like this.
AJAX Response
If I change the javascript code to
angular.module('myApp.controllers', [])
.controller('myCntrl', function($scope, myAPIservice, ngDialog) {
$scope.emailLists = new Array({email:'abc#def.com'},{email:'lmn#opqr.com'})
});
and the response will be
Without AJAX call
Can anyone help me resolve this issue?

Send Multiple data with ajax

I want to use ajax for add data in database and i found following code in net and it is working fine.
<script language='javascript'>
reqObj=null;
function saveCust(){
document.getElementById('res').innerHTML='processing';
if(window.XMLHttpRequest){
reqObj=new XMLHttpRequest();
}else {
reqObj=new ActiveXObject('Microsoft.XMLHTTP');
}
reqObj.onreadystatechange=processSave;
reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
reqObj.send(null);
}
function processSave(){
if(reqObj.readyState==4){
document.getElementById('res').innerHTML=reqObj.responseText;
}
}
</script>
Above code sends only one String but, i have 5 Strings in my form.
Please anybody alter the code for sending multiple data.
The problem is that you're sending a single parameter in the reqObj.open function:
reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
Note that the only parameter you send is id.
You can add more parameters in the flavor of QueryString:
id=something&otherParameter=else //and more parameters
IMO the easiest way to handle an ajax request would be using jQuery, as shown and heavily explained by BalusC in How to use Servlets and Ajax?.
Based on the samples there and jQuery Ajax POST example with PHP, you can come with the following code:
Assuming the 5 Strings are in the form
function saveCust(){
$('#res').html('processing');
var $form = $(this);
var serializedData = $form.serialize();
$.post('./custSave', serializedData, function(responseText) {
$('#res').html(responseText);
});
}
Assuming there's data outside the form
function saveCust(){
$('#res').html('processing');
var $form = $(this);
var serializedData = $form.serialize() + "&id=" + $('#CustCode').val();
$.post('./custSave', serializedData, function(responseText) {
$('#res').html(responseText);
});
}
And you can even enhance this using more jQuery functions, but that's outside the scope of this answer.

Jquery Ajax Delay

I have bind an event on submit form on a login page. I want to make an ajax request first before form submission. Problem is that ajax post dont work, as form submits very early.... If on event add on end "return false" ajax works but this way form dont submits, how delay a bit execution so ajax end and after continue form submission?
This way ajax dont work:
$("button").bind("click", function(){
$.post("test.php", $(this).parents("form").serialize());
})
This way ajax works but form dont submits:
$("button").bind("click", function(){
$.post("test.php", $(this).parents("form").serialize());
return false;
})
You could wait for the ajax to finish before submiting the form:
$("button").bind("click", function() {
var form = $(this).parents("form");
$.post("test.php", form.serialize(), function() {
form.submit();
});
return false;
})

get $.post to work with the validate plugin on multiple forms without seperate functions

On a fansite im doing http://yamikowebs.com/ee/
I have a few forms (2 atm). I used $.post to find out what form is being submited. submit the form and display that pages results where the form was originally with .html().
My next step was to use the validator which is working fine but im not sure how to put the 2 together.
submitHandler: function(form){} seems to be the setting for how its submitted. However, I can't get this to work with my $.post function or find out what form is being processed.
If I leave the defaults for validation plug-in if there no errors it will send you to the page. the ajax plug-in that it works with doesn't do what I want. Below is my $.post function
form validation:
//ajax post
$("form").submit(function(event)
{
event.preventDefault();//stop from submiting
//set needed variables
var $form = $(this)
var $div = $form.parent("div")
$url = $form.attr("action");
//submit via post and put results in div
$.post( $url, $form.serialize() , function(data)
{ $div.html(data) })
})
http://docs.jquery.com/Plugins/validation#source is the validation plugin
You're correct in thinking that submitHandler is the right callback to use. However, I ran into some interesting issues while using it with multiple forms (like you're trying to do). For example, in this code:
$("#form1, #form2").validate({
submitHandler: function(form) {
alert(form.action);
alert(form.id);
}
});
The submitHandler callback does not get supplied the correct parameter (it always gets #form1). I believe this is actually a bug in jQuery-validate (so I've filed it here).
Anyway, a decent workaround would be to wrap the validate call in .each():
$("form").each(function() {
$(this).validate({
submitHandler: function(form) {
/* 'form' has the correct value */
var values = $(form).serialize(),
$div = $(form).parent("div");
alert(form.action);
alert(form.id);
/* Perform AJAX call here */
}
});
});
Example: http://jsfiddle.net/andrewwhitaker/MmCXN/

How make Zend_Form submission without reload a page - with Ajax?

How make Zend_Form submission without reload a page - with Ajax?
This is code for create form that reload a page when submitted, what should be change or add that this form will submit with ajax (1.regular solution 2.jquery solution):
Form:
class Application_Form_Login extends Zend_Form
{
public function init()
{
$username=new Zend_Form_Element_Text('username');
$username ->addFilter('StringToLower')
->addValidator('alnum');
$password=new Zend_Form_Element_Text('password');
$password->addFilter('StringToLower')
->addValidator('alnum');
$submit=new Zend_Form_Element_Submit('submit');
$this->addElements(array($username,$password,$submit));
}
}
Controller:
$form = new Application_Form_Login();
$request = $this->getRequest();
if ($request->isPost()) {
if ($form->isValid($request->getPost())) {
if ($this->_process($form->getValues())) {
//code indside
}
}
}
$this->view->form = $form;
View:
<?
echo $this->form;
?>
My proposal that I don't think is proper(does form make filtering and validation?) for View:
<?
echo $this->form;
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function(){
var sendData=$(this).serialize();
$.ajax(
{
url:'',
dataType:'json',
type:'POST',
data:sendData,
success: function(data) {
}
});
return false;
});
});
</script>
Thanks
Well,
for filtering/validation you might want to send the form using Ajax and by knowing at the server-side that it is an Ajax request (you can use a flag for that, like a header, search for knowing if a request is ajax or not) and sending back only the form 'area'. Then when you receive it you can overwrite it.
There is currently no wiser way to do it with Zend_Form I think.

Resources