Indice

Pobtag

Autore: Fabio Di Matteo
Ultima revisione: 30/09/2022 - 18:36

Uno strampalato tentativo di togliere un po' di html dalle pagine web.

Come si usa

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>

Il codice

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>";
 
 
	}
 
 
 
}
?>