[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
zpform
/
demo
/
[
Home
]
File: ajax_server_callback.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" This demo shows how to send files to server without refreshing the whole page You must use combination of asyncSubmitFunc and serverCallback config options asyncSubmitFunc defines what function will be called after form submit. You can use it for hiding form, for example. serverCallback determines parameter name, that will be sent to server. This parameter will hold JavaScript function name that must be called to finish form submit. On server-side you must process form submit, validate fields, store files. As response your script must respond with the following page (example for PHP): <html><body><script type='text/javascript'> <?= $_POST['callback'] ?>(...); </script></body></html> Instead of '...' you need to put JSON response. Its format is described in Submit form to server using AJAX demo. Warning! If server won't respond with such page - asyncSubmitFunc function won't be called and errors won't be displayed! Current demo has field for entering files. Using zpFormMultiple feature user can send multiple files to server. Server-side script validates all input fields, creates array with errors and passes it back to client. Also it calculates number of sent files and their total size. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Form Widget - Send files to server using AJAX</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type='text/javascript' src='../src/form.js'></script> <script type='text/javascript' src='demo.js'></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/winxp.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Send files to server using AJAX</div> <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>winxp theme</b>.</li> <li>This demo shows how to send files to server without refreshing the whole page</li> <li>You must use combination of <i>asyncSubmitFunc</i> and <i>serverCallback</i> config options</li> <li><i>asyncSubmitFunc</i> defines what function will be called after form submit. You can use it for hiding form, for example.</li> <li><i>serverCallback</i> determines parameter name, that will be sent to server. This parameter will hold JavaScript function name that must be called to finish form submit.</li> <li>On server-side you must process form submit, validate fields, store files. As response your script <b>must</b> respond with the following page (example for PHP): <pre> <html><body><script type='text/javascript'> <?= $_POST["callback"] ?>(...); </script></body></html> </pre> Instead of "..." you need to put JSON response. Its format is described in <a href="ajax_submit.html">Submit form to server using AJAX</a> demo. </li> <li><b>Warning!</b> If server won't respond with such page - <i>asyncSubmitFunc</i> function won't be called and errors won't be displayed!</li> <li>Current demo has field for entering files. Using <a href="multiple.html">zpFormMultiple</a> feature user can send multiple files to server. Server-side script validates all input fields, creates array with errors and passes it back to client. Also it calculates number of sent files and their total size.</li> </ul> </div> <form action="ajax_server_callback.php" id='userForm' class="zpFormWinXP" method="POST" enctype="multipart/form-data"> <div id='errOutput' class="errOutput"></div> <fieldset> <legend>Personal information</legend> <label class='zpFormLabel'>Login Name</label> <input class='zpFormRequired' value="" size="40" name="name" type="text" /> <br /> <br /> <label class='zpFormLabel'>Password</label> <input class='zpFormRequired' value="" size="40" name="password1" type="password" /> <br /> <br /> <label class='zpFormLabel'>Password Again</label> <input class='zpFormRequired' value="" size="40" name="password2" type="password" /> <br /> <br /> <label class='zpFormLabel'>Email Address</label> <input value="" size="40" name="email" type="text" class='zpFormRequired zpFormEmail' /> <br /> </fieldset><br /> <fieldset> <legend>Attach files</legend> <div class="zpFormMultipleInside"> <label class='zpFormLabel'>Attach file</label> <input value="" size="40" name="file" type="file" class='' /> </div> </fieldset> <input value="Submit" name="Submit" onclick="" type="submit" class="button" /> <input value="Clear" name="Clear" onclick="" type="reset" class="button" /> </form> <script type="text/javascript"> // Run this to auto-activate all "zpForm" class forms in the document. Zapatec.Form.setupAll({ showErrors: 'afterField', showErrorsOnSubmit: true, asyncSubmitFunc: myOnSuccess, serverCallback: "callback", busyConfig: { busyContainer: "userForm" } }); checkIfLoadedFromHDD(); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Form Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>