PobTag - Ajax forms

====== 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.









PobTag - Ajax forms


	Ajax forms
	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();
	?>

===== Il codice ===== Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **// 30/09/2022 - 18:36 //** // //


 $( document ).ready(function() {
	  $js
	});";
}

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.="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.= "$this->label<$this->tagName $attrId $attrClass $attrName $this->attribs 
		type=\"$this->type\" 
		placeholder=\"$this->placeholder\"
		
		/>";
		
		
	}
	
	

}
?>