Invio di id del padre div del pulsante utilizzando ajax - jquery, ajax, post, parent

Sto provando a inviare l'ID del DIV principale che un pulsante sta utilizzando AJAX. Questo è il markup:

<div id="32"><input id="button" type="button" class="before" onclick="add_fav();" /></div>

e questo è lo script ajax nel suo stato attuale:

<script>
function add_fav()
{
jQuery.ajax({
url: "addfav.php",
type: "POST",
data: {"id":jQuery(this).closest("div").attr("id"),is_ajax: 1},
success: function(html) {
jQuery("#button").removeClass("before");
jQuery("#button").addClass("after");
jQuery("#button").attr("disabled", "disabled");
},
error: function() {
jQuery("#error").html("<div>Error! Unable to add food item.</div>");
}
});
}
</script>

Non funziona, quindi il metodo che sto usando per passare l'ID del DIV non è chiaramente corretto. Forse qualcuno potrebbe mettermi in chiaro?

risposte:

Se si utilizza un gestore di clic inline, passare un riferimento all'elemento su cui è stato fatto clic alla funzione:

onclick="add_fav(this);"

Poi:

function add_fav(btn)
{
jQuery.ajax({
url: "addfav.php",
type: "POST",
data: {"id":jQuery(btn).closest("div").attr("id"),is_ajax: 1},
success: function(html) {
jQuery("#button").removeClass("before");
jQuery("#button").addClass("after");
jQuery("#button").attr("disabled", "disabled");
},
error: function() {
jQuery("#error").html("<div>Error! Unable to add food item.</div>");
}
});
}

All'interno dell'attributo inline this fa riferimento all'elemento cliccato, ma non all'interno della funzione che stai chiamando (a meno che tu non faccia qualcosa per farlo .call() o .apply()).

Tuttavia, consiglierei di associare il gestore eventi con jQuery:

jQuery("input.before").click(function(){
jQuery.ajax({
url: "addfav.php",
type: "POST",
data: {"id":jQuery(this).closest("div").attr("id"),is_ajax: 1},
success: function(html) {
jQuery("#button").removeClass("before");
jQuery("#button").addClass("after");
jQuery("#button").attr("disabled", "disabled");
},
error: function() {
jQuery("#error").html("<div>Error! Unable to add food item.</div>");
}
});
});

... e poi jQuery si assicura this è impostato in modo appropriato e inoltre non è necessario il clic in linea. Inserisci quanto sopra in un gestore document.ready o in un blocco di script che appare dopo il pulsante (ad esempio, alla fine del corpo).

Passa l'elemento alla funzione come parametro in modo da poterlo utilizzare nella funzione. onclick="add_fav(this);"

<script>
function add_fav(element)
{
jQuery.ajax({
url: "addfav.php",
type: "POST",
data: {"id":jQuery(element).closest("div").attr("id"),is_ajax: 1},
success: function(html) {
jQuery("#button").removeClass("before");
jQuery("#button").addClass("after");
jQuery("#button").attr("disabled", "disabled");
},
error: function() {
jQuery("#error").html("<div>Error! Unable to add food item.</div>");
}
});
}
</script>

Se vuoi ancora usarlo this nella funzione che puoi usare function.call(), onclick="add_fav.call(this);" e usare add_fav come lo hai.