Disegnare elementi del Dom con Jquery

Autore: Fabio Di Matteo

Questo articolo è deprecato. Il codice aggiornato è disponibile presso pobNode.js

Realizzeremo una piccola classe javascript che permettera' (grazie a jquery) di disegnare esclusivamente via javascript vari elementi del Dom di una pagina.
Ecco l'utilizzo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>Pobquery test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
	<script src="jquery-2.2.3.min.js"></script>
	<script src="pobNode.js"></script>
 
 
	<script>
 
		$(document).ready(function () {
 
			button1 = new pobNode('button');
			button1.setHtml('Bottone 1');
			button1.attach('body');
 
			button2 = new pobNode('button');
			button2.setHtml('Bottone 2');
			button2.attach('body');
 
 
			button1.jq.bind('click',function(){ $('body').append('<p>Cliccato bottone 1</p>')});
			button2.jq.bind('click',function(){ $('body').append('<p>Cliccato bottone 2</p>')});
 
		});
 
		</script>
 
</head>
 
<body>
	<h3>Test</h3>
 
</body>
 
</html>

La classe

E' consigliabile scaricare il codice aggiornato da: pobNode.js

pobNode.js (non aggiornato,deprecato)

var nodeCount=0;
 
function pobNode (type) {
 
    this.type=type;
    this.id;
    this.class;
    this.style;
    this.html="";
    this.jq;
    this.attrs;
    this.before='';
    this.after='';
 
	this.setHtml =function(ht) {
		this.html=ht;
	}
 
	this.append =function(ht) {
		this.html=this.html+ht;
	}
 
	this.addAttr =function(attr, val) {
		this.attrs=this.attrs+' '+attr+'="'+val+'" ';
	}
 
	this.attach = function(container) {
		nodeCount++;
		this.id='pobNode'+nodeCount;
		var el=this.before+'<'+this.type+ ' style="'+this.style+'"id="'+this.id+'"  class="'+this.class+'" '+this.attrs+'>'+this.html+'</'+this.type+'>'+this.after;
		$(container).append(el);
 
		//Convert to jquery element
		this.jq =  $('#'+this.id);
	}
 
}
 
 
function pobAjax (type,target,outDiv) {
 
	var onError;
	var beforeSend;
	var complete;
 
	this.onError =function(str) {
		onError=str;
	}
 
	this.beforeSend =function(str) {
		beforeSend=str;
	}
 
	this.complete =function(str) {
		complete=str;
	}
 
 
	this.sendForm =function(fm) {
		 $(fm).submit(function(){ //intercetto il submit del form
 
                 var querystring = $(fm).serialize();
 
                 $.ajax({
                    url: target,    
                    type: type,       
                    dataType: 'html',   
                    data: querystring, 
                    success: function(data) {
                                $(outDiv).html(data);
                            },
                    complete: complete,        
                    error: onError,
                    beforeSend: beforeSend,        
                    statusCode: { 
                            404: function() {
                                    alert( "Page not found" );
                                }
                        }
                 });
 
                    return false;
          });
 
 
 
 
	}
 
}

I form

Di seguito esamineremo un caso concreto, ovvero un form di invio dati.

form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>Pobquery test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
	<script src="jquery-2.2.3.min.js"></script>
	<script src="pobNode.js"></script>
 
 
	<script>
 
		$(document).ready(function () {
 
			var myFormDiv= new pobNode('div');
			myFormDiv.style='width: 550px';
			myFormDiv.attach('body');
 
			var myForm= new pobNode('form');
			myForm.attach(myFormDiv.jq);
 
			var nome=new pobNode('input');
			nome.addAttr('name','nome');
			nome.addAttr('placeholder','Nome...');
			nome.before='<span>Nome: </span>';
			nome.addAttr('title','Nome...');
			nome.attach(myForm.jq);
 
 
			var cognome=new pobNode('input');
			cognome.before='<span style="margin-left:10px;">Cognome:</span>';
			cognome.addAttr('name','cognome');
			cognome.addAttr('placeholder','Cognome...');
			cognome.addAttr('title','Cognome...');
			cognome.attach(myForm.jq);
 
			var tel=new pobNode('input');
			tel.addAttr('name','tel');
			tel.addAttr('placeholder','telefono...');
			tel.addAttr('title','telefono...');
			tel.attach(myForm.jq);
 
			var myButton= new pobNode('button');
			myButton.style='display:block;clear: both;';
			myButton.addAttr('type', 'submit');
			myButton.setHtml('Invia dati');
			myButton.addAttr('name','myButton');
			myButton.attach(myForm.jq);
			myButton.jq.bind('click',function(){
				var myAjax= new pobAjax('POST', 'save.php', myOutput.jq);
				myAjax.beforeSend(function(){
						if (nome.jq.val()!='Fabio')
						{
							myOutput.jq.html('<p style="background-color: red">Errore, nome deve essere "Fabio"</p>');
							return false;
						}
					});
				myAjax.complete($('body').append('<p>Richiesta completata</p>'));
				myAjax.sendForm(myForm.jq);
			});
 
			var myOutput = new pobNode('div');
			myOutput.style='margin-top:10px;border: 5px dashed #008000; width: 400px';
			myOutput.attach('body');
 
		});
		</script>
 
</head>
 
<body>
	<h3>Prova form</h3>
</body>
 
</html>