Jquery- problema con variabile

[JCk82]

Salve a tutti, è da un molto tempo che non scrivo più qui, da quando ho abbandonato l'utilizzo di Flash per passare all'html e css...

Il mio problema riguarda l'utilizzo di jquery per realizzare una funzione "on document ready" e altre "on click" ...

In particolare ho un portfolio progetti che raccoglie tutti i progetti realizzati ed inseriti dall'utente, ogni 15 elementi creo un pagina, e successivamente creo uno slider con il plug-in BxSlider, cliccando su determinati tasti attivo/disattivo i progetti in base alla tipologia riordinandoli.

-Ogni progetto è composto da un div e tutti i progetti sono racchiusi in un unico div contenitore:

<div id="anteprima_progetti">
<div class="phps_anteprima_sottopagine esterni">
[img]images/fusinaz-epinel_thumb.jpg[/img]
<h3>Fusinaz - Epinel</h3>
</div>
<div class="phps_anteprima_sottopagine interni">
[img]images/lodigiani-verrand_thumb.jpg[/img]
<h3>Lodigiani - Verrand</h3>
</div>
<div class="phps_anteprima_sottopagine ristrutturazioni">
[img]images/castello-laruine_thumb.jpg[/img]
<h3>Castello - La Ruine</h3>
</div>
<div class="phps_anteprima_sottopagine ristrutturazioni">
[img]images/papa-mama-villair_thumb.jpg[/img]
<h3>Papa&amp;Mama - Villair</h3>
</div>
</div>

-Durante il caricamento della pagina creo un div contenitore class="blocco" ogni 15 div (class="phps_anteprima_sottopagine"); successivamente inglobo ogni div class="blocco" in un div contenitore class="cont_prog_slider"; infine creo lo slider attraverso il plug-in BxSlider:

<script type="text/javascript">
$(document).ready(function(){

var divs = $(".phps_anteprima_sottopagine");
for(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");

var slider = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});
});
</script>

In questo modo genero uno slider orizzontale con le pagine composte da 15 progetti ciascuna...

-A questo punto l'utente cliccando sulle voci di un menu, seleziona/deseleziona le tipologie progetti che gli interessa:
<div id="filter_menu">
<span id="tipo-attivo">Tutti</span>
<div>
<span id="esterni-sel">esterni</span>
<span id="interni-sel">interni</span>
<span id="ristrutturazioni-sel">ristrutturazioni</span>
<span id="tutti-sel">tutti</span>
</div>
<span id="close-open">X</span>
</div>

-Cliccando su una voce la funzione:
se lo slider generato durante il caricamento della pagina è valido:
1A-distrugge lo slider ( destroySlider - public methods BxSlider - http://bxslider.com/options )ed imposta la varibile slider = null

se lo slider generato durante il caricamento della pagina NON è valido:
1B- distrugge lo slider generato "onclick" (slider_sel)

2-elimina i div "blocco"
3- elimina il div "cont_prog_slider"
4- nasconde i div progetto non selezionati
5- raggruppa SOLO i div selezionati in div "blocco" (sempre ogni 15)
6- raggruppa i div "blocco" in un unico contenitore div "cont_prog_slider"
7- genera un nuovo slider

<script type="text/javascript">
$(document).ready(function(){
$("#esterni-sel").click(function () {
if (slider_sel == null) {
//non esiste
alert ("slider_sel non esiste: distruggo slider");
slider.destroySlider();
slider = null;

} else {
//esiste
alert ("slider_sel esiste: distruggo slider_sel");
slider_sel.destroySlider();
}
$('.phps_anteprima_sottopagine').unwrap();
$('.cont_prog_slider div').unwrap();
$(".interni").hide("slow");
$(".ristrutturazioni").hide("slow");
$(".esterni").show("slow");
var divs = $(".esterni");
f or(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");

var slider_sel = $('.cont_prog_slider').bxSlider({
pagerType:'short',
i nfiniteLoop: false,
speed:2000
});
});
$("#interni-sel").click(function () {
if (slider_sel == null) {
//non esiste
alert ("slider_sel non esiste: distruggo slider");
slider.destroySlider();
slider = null;

} else {
//esiste
alert ("slider_sel esiste!!!: distruggo slider_sel");
slider_sel.destroySlider();
}

$('.phps_anteprima_sottopagine').unwrap();
$('.cont_prog_slider div').unwrap();
$(".esterni").hide("slow");
$(".ristrutturazioni").hide("slow");
$(".interni").show("slow");
var divs = $(".interni");
for(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");

var slider_sel = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});
});
$("#ristrutturazioni-sel").click(function () {
if (slider_sel == null) {
//non esiste
alert ("slider_sel non esiste: distruggo slider");
slider.destroySlider();
slider = null;

} else {
//esiste
alert ("slider_sel esiste!!!: distruggo slider_sel");
slider_sel.destroySlider();
}
$('.phps_anteprima_sottopagine').unwrap();
$('.cont_prog_slider div').unwrap();
$(".esterni").hide("slow");
$(".interni").hide("slow");
$(".ristrutturazioni").show("slow");
var divs = $(".ristrutturazioni");
for(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");

var slider_sel = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});

});
});
</script>

Il problema è questo:
Per il primo slider generato on document ready, tutto funziona, quando clicco per la prima volta su una delle voci, riconosce che la variabile "slider" esiste per cui distrugge questo slider facendo generare quello nuovo (slider_sel) senza problemi.
Il problema si pone quando clicco su un' altra delle voci, non riconosce la varibile var slider_sel generata con il click precendente e così non mi distrugge lo slider prima di ricrearlo....

Premetto che non sono un programmatore javascriot e che di solito il mio utilizzo delle jquery si limita a piccole righe singole di codice, fin qui sono riuscito ad arrivare attraverso le varie guide ed esempi trovati su questo forum e su altri, ma qui proprio non riesci a capire cosa non faccia funzionare il tutto

PS:
ho provato ad utilizzare anche un altro public method messo a disposizione su BxSlider.com, ReloadSlider, ma ricarica lo stesso slider senza i nuovi elementi selezionati...
inoltre, il sito come potrete vedere ha un layout liquido con dimensioni dei div in percentuale, il che ha limitato le mie possibili soluzioni al problema
Ho scelto le jquery anzichè il javascript puro per scongiurare possibili problemi di compatibilità cross-browser...

Spero che qualcuno possa aiutarmi perchè sono ormai due giorni che ci lavoro senza successo... grazie in anticipo

Qui potete trovare la pagina di prova del sito online: http://www.jeanclaudechiementin.com/.../progetti.html

[Walessio]

A occhio e croce è un problema di visibilità della variabile, siccome la dichiari DENTRO document ready, il suo valore non dura nel tempo e non viene visto da fuori.
Metti var slider_sel FUORI dal document ready perchè così facendo sarà una variabile globale

[JCk82]

grazie mille per la risposta, avevo letto sulla guida della variabili locali e globali, e avevo immaginato che il problema potesse essere legato a questo. Il fatto è che una volta che creo la variabile fuori da on.document.ready come faccio poi a richiamarla al click del tasto?

se inserisco:
<script type="text/javascript">
$("#esterni-sel").click(function () {
if (slider_sel == null) {
//non esiste
alert ("slider_sel non esiste: distruggo slider");
slider.destroySlider();
slider = null;

} else {
//esiste
alert ("slider_sel esiste: distruggo slider_sel");
slider_sel.destroySlider();
}
$('.phps_anteprima_sottopagine').unwrap();
$('.cont_prog_slider div').unwrap();
$(".interni").hide("slow");
$(".ristrutturazioni").hide("slow");
$(".esterni").show("slow");
var divs = $(".esterni");
for(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");
slider_sel = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});
});
</script>
Il click non funziona neppure!

[JCk82]

Ce l'ho fatta, ma non facendo quello che mi avevi consigliato, o meglio grazie a te ho smanettato un po' di più e, davvero per caso, ho trovato l'inghippo, ti spiego:

all'inizio ho creato la variabile fuori da on.document.ready:

<script type="text/javascript">
var slider = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});
</script>

e l'ho eliminata dall'evento onclick; avevo però bisogno di richiamare la variabile (ora globale) slider_sel in qualche modo con l'evento 'onclick' di ogni voce menu:
Ho provato con .bind, ma non funzionava, la variabile non veniva caricata.
Ho provato allora a settare semplicemente la variabile come true (slider_sel=true ma non funzionava comunque.
Ho provato anche a utilizzare il pubblic method fornito da BxSlider, Reloadslider, ma neanche così non funzionava.

Ho quindi pensato che forse era necessario, oltre a scrivere la variabile fuori da on.document.ready, scrivere la variabile nell'evento on click, e l'ho quindi ricopiata all'interno di ogni click function:

<script type="text/javascript">
$(document).ready(function(){
$("#esterni-sel").click(function () {
if (slider != null) {
// esiste
alert ("slider esiste, lo distruggo");
slider.destroySlider();
slider = null;

} else {
//non esiste
alert ("slider non esiste: distruggo slider_sel");
slider_sel.destroySlider();
}
$('.blocco div').unwrap();
$('.cont_prog_slider div').unwrap();
$(".interni").hide("slow");
$(".ristrutturazioni").hide("slow");
$(".esterni").show("slow");
var divs = $(".esterni");
for(var i = 0; i < divs.length; i+=15) {
divs.slice(i, i+15).wrapAll("<div class='blocco'></div>");
}
$(".blocco").wrapAll("<div class='cont_prog_slider'></div>");
var slider_sel = $('.cont_prog_slider').bxSlider({
pagerType:'short',
infiniteLoop: false,
speed:2000
});
});
Ecc. ecc.
});
</script>

ma anche così non funzionava.

Non sapendo più cosa fare, ho provato a togliere "var" dalla variabile che genera il bx-slider nell'evento 'onclick' (slider_sel) pensando che il "var" davanti creasse rindondanza, questo è possibile perchè il plug-in permette di creare lo slider in due modi:

var slider = $('#nomeslider').bxSlider({});
slider = $('#nomeslider').bxSlider({});

In questo modo funzionava tutto!!!

A questo punto, tutto soddisfatto dell'obiettivo raggiunto, ho voluto eliminare la variabile creata fuori da on.document.ready per vedere la differenza con e senza (una sorta di ctrl+z, ctrl+y) e stranamente funzionava lo stesso!!!

Ho pensato fosse la cahe che mi leggeva ancora il file non aggiornato e invece NO!

L'unica cosa che posso pensare è che creando lo slider con il secondo metodo (slider = $('#nomeslider').bxSlider({}) la varibile che viene generata è una variabile globale anche se viene creata dall'evento 'onclick' dentro a on.document.ready...
cazzarola la soluzione ce l'avevo a portata di mano e la ignoravo.

Ti ringrazio davver dell'aiuto, anche se l'inghippo era altrove, mi hai sicurmante chiarito meglio le varibli globali e locali, anche se ancora non capisco come avrei fatto a richiamre la varibabile essterna dall'evento 'onclick'...

Come detto all'inizio del post, non son un programmatore java e di slito mi limito a poche righe di jquery per creare piccole cose, mi piacerebbe imparare e ho visto che la guida su questo sito è molt valida, solo che non capisco molto, forse dovrei prima studiarmi la guida javascript puro?
Non saprei... grazie ancora:
http://www.jeanclaudechiementin.com/.../progetti.html