Autore: Fabio Di Matteo
Ultima revisione: 30/09/2022 - 18:36
Uno strampalato tentativo di togliere un po' di html dalle pagine web.
Presto vedro' di scrivere una guida. Qui di seguito un esempio. Non dimenticare di aggiungere jquery.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <title>PobTag - Ajax forms</title> </head> <body> <h2>Ajax forms</h2> <?php include('pobTag.php'); $form=new pobTag('form','myform'); $form->put(); $name= new pobInput('name','','', 'text'); $name->setId('name'); $name->setName('name'); $name->setLabel('Insert your name: '); $name->setPlaceholder('your name ... '); $name->closeNow(true); $email= new pobInput('email','','name="email" ', 'email'); $email->setLabel('Insert your email address: '); $email->setPlaceholder('your email ... '); $email->closeNow(true); $submit= new pobTag("button", 'mysubmit', '', 'type=submit'); $submit->html("submit"); $submit->closeNow(); $form->close(); $myAjax= new pobAjax("POST", "data.php", "outputServer"); $myAjax->sendForm('#myform'); pobTagRend(); ?> <div id="outputServer"></div> </body> </html>
Autore: Fabio Di Matteo
Ultima revisione: 30/09/2022 - 18:36
<?php $html=''; $js=''; function pobTagRend() { GLOBAL $html; GLOBAL $js; echo $html; echo "<script> $( document ).ready(function() { $js });</script>"; } function pobTagClear() { GLOBAL $html; GLOBAL $js; $html=''; $js=''; } class pobTag { protected $tagName=''; protected $id=''; protected $class=''; protected $name=''; protected $html=''; protected $attribs=''; protected $inline=false; function __construct(string $name="div", string $id='', string $class='', string $attribs='') { $this->tagName=$name; $this->id=$id; $this->class=$class; $this->attribs=$attribs; } function setId($id) { $this->id=$id; } function setClass($class) { $this->class=$class; } function setName($name) { $this->name=$name; } function setHtml($html='') { GLOBAL $js; $js.="$('#$this->id').html('$html');"; } function html($html='') { $this->html=$html; } function getHtml(string $v) { GLOBAL $js; $js.="var $v =$('#$this->id').html();"; } function setAttr($attr,$val) { GLOBAL $js; $js.="$('#$this->id').attr('$attr','$val');"; } function getAttr($attr,$var) { GLOBAL $js; $js.="$var = $('#$this->id').attr('$attr');"; } function bind($evt, $code) { GLOBAL $js; $js.="$('#$this->id').bind( '$evt', function() { $code; });"; } function runjs($code) { GLOBAL $js; $js.="$code"; } function put($tagInline=false) { GLOBAL $html; GLOBAL $js; $attrId=''; $attrClass=''; $attrName=''; $this->inline=$tagInline; if (! empty($this->id)) $attrId=' id="'.$this->id.'"'; if (! empty($this->class)) $attrClass=' class="'.$this->class.'"'; if (! empty($this->name)) $attrName=' name="'.$this->name.'"'; if ($this->inline==false) { $html.= "<$this->tagName $attrId $attrClass $attrName $this->attribs >$this->html"; }else{ $html.= "<$this->tagName $attrId $attrClass $attrName $this->attribs />"; } } function close() { GLOBAL $html; if ($this->inline==false) $html.="</$this->tagName>"; } function closeNow($tagInline=false) { $this->put($tagInline); $this->close(); } } class pobAjax { public $type; public $url; public $data; public $divOutput; public $error; public $beforeSend; public $complete; public $success; private $addCount= 0 ; public function __construct($type, $url, $divOutput) { $this->type=$type; $this->url=$url; $this->divOutput=$divOutput; } public function addData($key, $value) { $comma=''; if ($this->addCount>0) $comma=','; $this->data=$this->data.$comma." ".$key." : ".$value." " ; $this->addCount++ ; } public function send() { GLOBAL $js; $js.= "$.ajax({ type: '".$this->type."', url: '".$this->url."', data: {".$this->data."}, dataType: 'html', success: function(msg){ $('#".$this->divOutput."').html(msg); ".$this->success." }, beforeSend: function(){ ".$this->beforeSend." }, complete: function(){ ".$this->complete." }, error: function(){".$this->error." } }); " ; } public function sendForm($form) { GLOBAL $js; $js.= "$(document).ready(function() { $('".$form."').submit(function(event){ var querystring = $('".$form."').serialize(); $.ajax({ type: '".$this->type."', url: '".$this->url."', data: querystring, dataType: 'html', success: function(msg){ $('#".$this->divOutput."').html(msg); ".$this->success." }, beforeSend: function(){ ".$this->beforeSend." }, complete: function(){ ".$this->complete." }, error: function(){".$this->error." } }); event.preventDefault(); }); }) " ; } } class pobInput extends pobTag { protected $inline=true; protected $placeholder=''; protected $label=''; protected $type='text'; function __construct( string $id='', string $class='', string $attribs='', string $type='text') { $this->tagName='input'; $this->id=$id; $this->class=$class; $this->attribs=$attribs; $this->type=$type; } function setLabel($lbl) { $this->label=$lbl; } function setPlaceholder($txt) { $this->placeholder=$txt; } function put($tagInline = true) { GLOBAL $html; GLOBAL $js; $attrId=''; $attrClass=''; $attrName=''; if (! empty($this->id)) $attrId=' id="'.$this->id.'"'; if (! empty($this->class)) $attrClass=' class="'.$this->class.'"'; if (! empty($this->name)) $attrName=' name="'.$this->name.'"'; $html.= "<label>$this->label<$this->tagName $attrId $attrClass $attrName $this->attribs type=\"$this->type\" placeholder=\"$this->placeholder\" /></label>"; } } ?>
Il nostro wiki installa solamente cookie tecnici necessari al funzionamento della piattaforma "Dokuwiki". Niente analitics, statistiche, tracciamenti o altro.