Svacant Blog » Javascript http://blog.svacant.com Un punto di ritrovo per chi ha interesse nell'arte del web Thu, 19 Aug 2010 09:35:29 +0000 en hourly 1 http://wordpress.org/?v=3.0 Option selected e valore selezionato http://blog.svacant.com/2009/11/08/option-selected-e-valore-selezionato/ http://blog.svacant.com/2009/11/08/option-selected-e-valore-selezionato/#comments Sun, 08 Nov 2009 20:31:25 +0000 Svacant http://blog.svacant.com/?p=726 <option value=”yes”>Si</option> <option value=”no”>No</option> </select> Adesso se io avessi il valore no, dovrei settare l’option value=no selected. Ma dovrei fare un un if e controllare di volta in volta [...]]]> Vi è capitato di avere un select con molti option e di avere un valore dinamico che decida quale option sia selezionata?

Esempio

Codice
<select name=”prova”>
<option value=”yes”>Si</option>
<option value=”no”>No</option>
</select>

Adesso se io avessi il valore no, dovrei settare l’option value=no selected.
Ma dovrei fare un un if e controllare di volta in volta la variabile.
Ma grazie a jQuery il problema lo risolviamo così:

Codice
<select name=”prova” selected=”no”>
<option value=”yes”>Si</option>
<option value=”no”>No</option>
</select>

Codice javascript

Codice

$(document).ready(function() {

$(‘select’).each(function(){
var selected = $(this).attr(‘selected’);
$(‘option[value='+selected+']‘).attr(‘selected’,'selected’);
});
});

Ricordatevi di avere la libreria jQuery.

]]> http://blog.svacant.com/2009/11/08/option-selected-e-valore-selezionato/feed/ 0 Come imparare jQuery: Form ed Ajax http://blog.svacant.com/2009/10/18/imparare-jquery-form-ed-ajax/ http://blog.svacant.com/2009/10/18/imparare-jquery-form-ed-ajax/#comments Sun, 18 Oct 2009 21:35:08 +0000 Svacant http://blog.svacant.com/?p=720 <input type=”text” name=”nome”/> <input type=”text” name=”cognome”/> <input type=”submit” value=”Procedi”/> </form> Se siamo in una situazione del genere e vogliamo usare ajax, ci verrà incontro jQuery. Grazie alla funzione serialize() di jQuery possiamo raccogliere i dati, ma vediamo come fare [...]]]> Avete voglia di un po’ di ajax?
Passiamo subito alla pratica:

Codice
<form id=”mioform” action=”pagina.php” method=”post”>
<input type=”text” name=”nome”/>
<input type=”text” name=”cognome”/>
<input type=”submit” value=”Procedi”/>
</form>

Se siamo in una situazione del genere e vogliamo usare ajax, ci verrà incontro jQuery.
Grazie alla funzione serialize() di jQuery
 possiamo raccogliere i dati, ma vediamo come fare passo passo:

Per prima cosa modificate il pulsante in questo modo:

Codice
<input type=”button” value=”Procedi” onclick=”manda_form()”/>

Poi create la funzione:

Codice
function manda_form(){

var str = $(“#mioform”).serialize();
var action = $(“#mioform”).attr(‘action’);

$.post(action, str);

}

E adesso il vostro form è in ajax.

]]> http://blog.svacant.com/2009/10/18/imparare-jquery-form-ed-ajax/feed/ 0 Come imparare jQuery: Introduzione http://blog.svacant.com/2009/09/16/come-imparare-jquery-introduzione/ http://blog.svacant.com/2009/09/16/come-imparare-jquery-introduzione/#comments Wed, 16 Sep 2009 21:26:29 +0000 Svacant http://blog.svacant.com/?p=655 Jquery è un noto framework javascript, che ci permette di fare tante cose con qualche riga di codice.

Per prima cosa andiamo sul sito ufficiale di jquery.
Il design è piuttosto accattivante, ma prima di farvi catturare dal pulsante di download, vi consiglio di provare quel piccolo snippet di codice:

Codice
$(“p.neat”).addClass(“ohmy”).show(“slow”);

Ecco adesso avete visto cosa è in grado di fare jQuery, certo non è tutto e allora scarichiamolo subito: nella versione production.

]]> http://blog.svacant.com/2009/09/16/come-imparare-jquery-introduzione/feed/ 0 Menù css e classe selected http://blog.svacant.com/2009/08/31/menu-css-e-classe-selected/ http://blog.svacant.com/2009/08/31/menu-css-e-classe-selected/#comments Mon, 31 Aug 2009 21:21:57 +0000 Svacant http://blog.svacant.com/?p=635
Vi sarà capitato di avere un menù creato con i css ed avere la classe selected o comunque una classe che rappresenta lo stile del bottone quando selezionata la pagina collegata ad esso.

Come soluzione potete usare PHP con diversi if oppure usare la mia soluzione.

Che grazie all’aiuto di jQuery ci permette di rendere il bottone del nostro menù selezionato in automatico, quindi senza creare inutili if.

Codice
$(document).ready(
function () {
$(‘a[href=?< ?php echo $_SERVER[QUERY_STRING]; ?>]’).addClass(‘selected’);

});

Spiegandone il funzionamento:

-Php serve la query string a javascript.
-Javascript assegna una classe css all’elemento <a> con valore dell’attributo href che corrisponde alla query string.

Giustamente potete modificarlo come meglio credete, ma in sostanza questa è la soluzione che vi propongo.

]]> http://blog.svacant.com/2009/08/31/menu-css-e-classe-selected/feed/ 1 Ajaxel plugin per jquery http://blog.svacant.com/2009/03/26/ajaxel-plugin-per-jquery/ http://blog.svacant.com/2009/03/26/ajaxel-plugin-per-jquery/#comments Thu, 26 Mar 2009 11:30:13 +0000 Svacant http://blog.svacant.com/?p=486
Ajaxel plugin for jquery

Ajaxel plugin for jquery


Se hai bisogno di implementare ajax nel tuo sito senza alterare la struttura, allora ajaxel è il plugin che fa per te.

Con ajaxel è possibile inviare richieste ajax con un click, inviare form, e soprattutto inviare file (quest’ultimo con la tecnica dell’iframe).

Si deve soltanto specificare la classe da associare per ajaxificare gli elementi.
Esempio d’uso

Codice
<script>
$(document).ready(function() {
$(‘html’).ajaxel();
});
</script>

]]> http://blog.svacant.com/2009/03/26/ajaxel-plugin-per-jquery/feed/ 0 AjaxifyForm per Jquery http://blog.svacant.com/2009/01/23/ajaxifyform-per-jquery/ http://blog.svacant.com/2009/01/23/ajaxifyform-per-jquery/#comments Fri, 23 Jan 2009 10:47:18 +0000 Svacant http://blog.svacant.com/?p=293 <input type=”text” name=”username”/> <input type=”button” value=”Invia”/> </form> Diventa : Codice <form id=”myform” onkeypress=”if(event.keyCode == 13){send_form(“myform”,”registration.php”);}” action=”registration.php” method=”get” onsubmit=”return false”> [...]]]> Ecco il codice

Codice
jQuery(function($) {
$(‘form’).attr(“onkeypress”, function() {
$(‘#’+this.id).attr(‘onSubmit’,'return false’);
var add_ev = ‘if(event.keyCode == 13){send_form(“‘+this.id+’”,”‘+this.action+’”);}’;
$(‘#’+this.id+’ input:button’).attr(‘onclick’,'send_form(“‘+this.id+’”,”‘+this.action+’”);’);
return add_ev;
});
});

Con questo codice un semplice form così :

Codice
<form id=”myform” action=”registration.php” method=”get”>
<input type=”text” name=”username”/>
<input type=”button” value=”Invia”/>
</form>

Diventa :

Codice
<form id=”myform” onkeypress=”if(event.keyCode == 13){send_form(“myform”,”registration.php”);}” action=”registration.php” method=”get” onsubmit=”return false”>
<input type=”text” name=”username”/>
<input type=”button” value=”Invia” onclick=”send_form(“myform”,”registration.php”);”/>
</form>

Tutto si riaggancia alla funzione send_form la quale riceve l’id del form e la pagina dove inviare la richiesta.
Ovviamente è molto semplice come codice, questo anche per scelta personale, meglio le cose semplici e funzionali, spero vi sia utile.

]]> http://blog.svacant.com/2009/01/23/ajaxifyform-per-jquery/feed/ 0 markItUp – Niente editor visuale ma con tag http://blog.svacant.com/2008/04/13/markitup-niente-editor-visuale-ma-con-tag/ http://blog.svacant.com/2008/04/13/markitup-niente-editor-visuale-ma-con-tag/#comments Sun, 13 Apr 2008 15:27:10 +0000 Svacant http://www.troo.it/blog/2008/04/13/markitup-niente-editor-visuale-ma-con-tag/ markitup

Ecco un ottimo editor che crea codice html puro, non è un editor visuale come fckeditor, la sua potenza sta nella leggerezza e semplicità , si appoggia a jquery.

Ci sono molte versioni, dalla minimalista a quella più avanzata.

Vi lascio qualche link di questo fantastico plugin per jquery.

Home ‘Link all’Home Page
Demo ‘Link alle versioni demo

]]> http://blog.svacant.com/2008/04/13/markitup-niente-editor-visuale-ma-con-tag/feed/ 0