This is my way to organize php for a simple jQuery frontend ajax based:
1.in a administration page include the php that generate html for each box
2.for each box setup behavior in Javascript
3.let each php manage POST request (for change/update) and GET request for show content
So in admin.php we could have something like that
<img src=”button.png” id=”btn_change” /> <div id=”box-profilo”> <?php include “box-profilo.php”> </div>
For setup behavior in javascript I use jQuery and an utility function (in admin.php):
CheckForm = function(d,f,o){return f.valid();}; function addModBehav(link,div,url,form,cancel) { var revert = function() { $(div).load(url,function(){ $(link).show(); }); } $(link).click(function(){ $(div).load(url+"?method=modify", function(){ $(link).hide(); $(form).ajaxForm({target:div, beforeSubmit:CheckForm, success:function(){$(link).show();}}); $(cancel).click(revert); }); return false; }); } $(function(){ addModBehav("#btn_change","#box-profilo", 'box-profilo.php',"#form_profilo", "#cancel"); });
box-profilo.php contains something like
<?php if(isset($_POST['save'])) { // save code } $method='view'; if(isset($_GET['method'])) { $method=$_GET['method']; } if(method =='modify') { ?> <form id=”form_profilo” action=”box-profilo.php” method=”post”> …. <input type=”button” id=”cancel” /> </form> <?php } else { // show data } ?>
Used plugins:
ajaxForm plugin for function ajaxForm()
Validation plugin for function valid() (in CheckForm)