Buongiorno a tutti!
Sono nuovo di questo forum e volevo chiedervi informazioni riguardo ad un problema che non riesco a risolvere.
Premetto che sono un neofita di javascript e jquery, ho seguito qualche corso online per capire come editare correttamente il mio sito.
Non è un sito open-source per cui mi arrangio un po' con qualche adattamento e personalizzazione.
Nella pagina di completamento ordine ho un elenco di corrieri tra i quali l'utente deve selezionare quello preferito per la consegna.
L'HTML è così strutturato:
Vorrei nascondere una parte dell'elenco per poi renderlo visibile al click di un link.
Ho quindi aggiunto :
e la funzione jquery:
La funzione nasconde alcuni tag "li" al caricamento del DOM per poi renderli visibili o meno al click del link "Visualizza tutti i corrieri".
Fin qui funziona tutto, MA, sulla pagina agisce anche una funzione AJAX(credo) che non posso in alcun modo modificare, che viene richiamata da ciascun tag INPUT:
La funziona effettua un aggiornamento parziale della pagina inviando i dati selezionati dall'utente al carrello.
Ed il caricamento mi ricarica l'intero elenco dei vettori rendendoli tutti visibili come da impostazione di default ed escludendo quindi il mio script jquery.
Come posso risolvere il problema? Si può richiamare la funzione jquery indipendentemente dal codice ajax?
E' un po' di giorni che ci sono dietro, ma non ho trovato soluzioni.
Sono nuovo di questo forum e volevo chiedervi informazioni riguardo ad un problema che non riesco a risolvere.
Premetto che sono un neofita di javascript e jquery, ho seguito qualche corso online per capire come editare correttamente il mio sito.
Non è un sito open-source per cui mi arrangio un po' con qualche adattamento e personalizzazione.
Nella pagina di completamento ordine ho un elenco di corrieri tra i quali l'utente deve selezionare quello preferito per la consegna.
L'HTML è così strutturato:
HTML:
<tr class="couriersList">
<th scope="row">Vettore*</th>
<td><ul id="couriersList">
<li>
<input type="radio" value="79_42" name="courierID" onclick="sendData(this.form);" style="width:auto;">
<strong>CORRIERE ESPRESSO</strong>
€ 9,36<span>BRT SPA Consegna espressa celere in tutta Italia dal momento dell'evasione.</span>
</li>
<li>
<input type="radio" value="83_29" name="courierID" onclick="sendData(this.form);" style="width:auto;">
<strong>CORRIERE ESPRESSO</strong>
€ 5,50<span>ExtraLarge: Consegna espressa celere in tutta Italia dal momento dell'evasione.</span>
</li>
<li>
<input type="radio" value="83_43" name="courierID" onclick="sendData(this.form);" style="width:auto;">
<strong>CORRIERE ESPRESSO</strong>
€ 8,35<span>SDA Consegna espressa celere in tutta Italia dal momento dell'evasione.</span>
</li>
</ul>
<input type="hidden" name="couriersList_Required_FLAG" value="1">
</td>
</tr>
Vorrei nascondere una parte dell'elenco per poi renderlo visibile al click di un link.
Ho quindi aggiunto :
HTML:
<a id="lista_completa" href="javascript:view();">Visualizza tutti i corrieri</a>
e la funzione jquery:
Codice:
<script type="text/javascript">
$(function() {
$("#couriersList input[value='79_42']").closest("li").css("display","none");
$("#couriersList input[value='83_43']").closest("li").css("display","none");
});
function view() {
$("#couriersList input[value='79_42']").closest("li").css("display","block");
$("#couriersList input[value='83_43']").closest("li").css("display","block");
$("#lista_completa").replaceWith("<a id='lista_nascosta' href='javascript:nascondi();'>Torna ai corrieri consigliati</a>");
}
function nascondi() {
$("#couriersList input[value='79_42']").closest("li").css("display","none");
$("#couriersList input[value='83_43']").closest("li").css("display","none");
$("#lista_completa").replaceWith("<a id='lista_completa' href='javascript:view();'>Visualizza tutti i corrieri</a>");
}
</script>
La funzione nasconde alcuni tag "li" al caricamento del DOM per poi renderli visibili o meno al click del link "Visualizza tutti i corrieri".
Fin qui funziona tutto, MA, sulla pagina agisce anche una funzione AJAX(credo) che non posso in alcun modo modificare, che viene richiamata da ciascun tag INPUT:
HTML:
<input type="radio" value="83_43" name="courierID" onclick="[B]sendData(this.form);[/B]" style="width:auto;">
La funziona effettua un aggiornamento parziale della pagina inviando i dati selezionati dall'utente al carrello.
Ed il caricamento mi ricarica l'intero elenco dei vettori rendendoli tutti visibili come da impostazione di default ed escludendo quindi il mio script jquery.
Come posso risolvere il problema? Si può richiamare la funzione jquery indipendentemente dal codice ajax?
E' un po' di giorni che ci sono dietro, ma non ho trovato soluzioni.