Pobquery test

====== Disegnare elementi del Dom con Jquery ====== Autore: **//Fabio Di Matteo//** \\ \\ Questo articolo è deprecato. Il codice aggiornato è disponibile presso [[https://github.com/pobfdm/pobnode|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:







	Pobquery test
	
	
	
	
	
	
	
	



	Test

===== La classe ===== E' consigliabile scaricare il codice aggiornato da: [[https://github.com/pobfdm/pobnode|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.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**







	Pobquery test
	
	
	
	
	
	
	
	



	Prova form