[jQuery/AJAX] Attivare funzione con parametri da link

[Alhazred]

Sulla pagina ho due link fatti in questo modo

<a href='#' onclick='update(x,y)'>link</a>
<a href='#' onclick='update(w,z)'>link</a>

Entrambi devono chiamare la stessa funzione jQuery, ma con parametri diversi.
Questi parametri saranno inviati ad uno script PHP tramite post.
L'invio dei parametri tramite post so come va fatto, ma non riesco a chiamare la funzione.

Attualmente il codice è questo

<script type="text/javascript">
$(document).ready(function(){
function update(param1,param2) {
var form_data = {
p1: param1,
p2: param2
};

$.ajax({
url: "update.php",
type: 'POST',
data: form_data,
async: false,
success: function(msg) {
$('div#main').html(msg);
}
})
});
});
</script>


Cosa e come dovrei modificare?

[Tuvok-LuR-]

in javascript le funzioni creano scope, quindi la funzione update (annidata dentro la funzione handler del dom ready) non è visibile dal global scope dov'è l'inline click handler.
una soluzione semplice sarebbe assegnare la funzione update al global scope
window.update = function(param1, param2) {....
oppure semplicemente dichiarare update fuori dal Dom ready

In ogni caso dovresti evitare di utilizzare javascript inline perchè è una pratica antiquata.
inolte hai una parentesi chiusa di troppo alla fine della dichiarazione di update.
prova cosi:

<a href='#' data-param1="x" data-param2="y">link</a>
<a href='#' data-param1="w" data-param2="z">link</a>

$(document).ready(function(){
$('a').on('click', function() {
var $a = $(this),
form_data = {
p1: $a.data('param1'),
p2: $a.data('param2')
};

$.ajax({
url: "update.php",
type: 'POST',
data: form_data,
async: false,
success: function(msg) {
$('div#main').html(msg);
}
});
});
});

ovviamente così funzionerà su tutti i link della pagina quindi adatta il selettore $('a') magari aggiungendo classi ai link o delegando al parent.
inoltre ti sconsiglio di utilizzare async: false perchè bloccherà completamente il browser fino alla fine della richiesta, sono veramente pochi i casi in cui è necessario utilizzarlo.
inoltre puoi aggiungere return false alla fine della funzione per prevenire il behaviour default del link (salto all'inizio della pagina)

[Alhazred]

Bene, ho fatto come mi hai suggerito e la funzione viene chiamata.

Vado nel dettaglio di ciò che sto facendo così si capisce meglio.
Sto creando un calendario e i 2 link di cui ho parlato servono uno per avanzare di un mese e uno per tornare indietro di un mese.

Al click una funzione php rigenera il calendario e restituisce il codice html che sostituisce la visualizzazione precedente con quella del mese precedente o successivo, compresi i 2 link con parametri aggiornati.
Al primo click funziona, il calendario viene aggiornato correttamente, ma da qui in poi, pur cliccando sui 2 link non accade nulla, la funzione jQuery non viene più attivata.

Il codice html della nuova visualizzazione viene generato correttamente, compresi i nuovi parametri per i 2 link, ho verificato salvando il codice in un file di testo.

Ho anche messo un alert nella funzione jQuery in modo da sapere se viene attivata o no, l'alert appare solo la prima volta, quindi le successive non attivano la funzione.

Da cosa dipende?

[Tuvok-LuR-]

probabilmente tra l'html che stai sostituendo ci sono anche quei due link, giusto?
siccome il binding degli eventi accade una sola volta, al DOM ready, gli handler vengono assegnati a quei due specifici link e una volta che sono sostituiti perdi anche il tuo handler.
la soluzione è l'event delegation: invece di assegnare l'handler agli <a> lo deleghi ad un elemento padre fisso (se hai div container che non viene sostituito lo assegnerai li ad esempio).
quindi il binding lo fai così ad esempio
$('div.calendar').on('click', 'a', function() {
come vedi targhetti il padre e passi come secondo paramentro ad on.() il selettore che avevi prima.
tutto il resto rimane uguale.
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-minutes/

[Alhazred]

Grazie mille, funziona :)

[Tuvok-LuR-]

prego!
una cosa carina che puoi fare è utilizzare l'attributo href nativo dei link, se puoi cambiare la richiesta in una get, e semplificare il tutto.
<a href="update.php?month=12&year=2013">Next</a>
<a href="update.php?month=10&year=2013">Prev</a>
$(document).ready(function(){
$('div#main').on('click', 'a', function() {
$.get(this.href, function(msg) {
$('div#main').html(msg);
});
return false;
});
});

[Alhazred]

Per il sito sto usando un framework ed i parametri get vengono gestiti diversamente, dovrei vedere se riesco a sistemare i link per farglieli ricevere correttamente.