..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
====== Disegnare elementi del Dom con Jquery ======
Autore: **//Fabio Di Matteo//** \\ \\
<note warning>Questo articolo è deprecato. Il codice aggiornato è disponibile presso [[https://github.com/pobfdm/pobnode|pobNode.js]]</note>

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:
<code javascript>

<!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>


</code>

===== La classe =====

<note>E' consigliabile scaricare il codice aggiornato da: [[https://github.com/pobfdm/pobnode|pobNode.js]] </note>

**pobNode.js** (non aggiornato,deprecato)
<code javascript>

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;
          });
	
	
	
	
	}

}	
	



</code>

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

**form.html**
<code javascript>

<!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>



</code>
..::Freemedialab::.. «Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

..::Freemedialab::..

Strumenti Utente

Strumenti Sito

Strumenti Pagina

..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»
