Estoy tratando de actualizar la clase del objeto en el DOM en el que se hizo clic con los datos transmitidos desde mi API. El usuario hace clic en un enlace en un menú desplegable de arranque que pasa algunos datos a una API y se devuelve el estado actualizado que quiero usar para actualizar el css (y eventualmente el texto) en el botón. Puedo manipular el DOM justo después del clic, pero dentro de la función terminada, no pasa nada. Sé que en otros casos he pasado datos con 'uso', pero parece que no puedo hacerlo en este caso.
$(".status-item").click(function(){ $.post( "/api/orderstatus/{{$order->id}}", { status_id: 1 }) .done(function( data ) { $(this).parent().parent().addClass('noticeme'); }); }); <div class="btn-group float-end"> <button type="button" class="btn btn-primary">Picked-up</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button> <div class="dropdown-menu" style=""> <a class="dropdown-item status-item text-primary" href="#" data-id="1">Picked-up</a> <a class="dropdown-item status-item text-info" href="#" data-id="2">Laundered</a> </div> </div>Gracias TBA, sabía que 'esto' era contextual, simplemente no podía averiguar cómo obtener acceso a 'esto' que necesitaba (siendo el elemento en el que se hizo clic en el DOM). Usando el enlace y la sugerencia de TBA (¡GRACIAS!) Esto es lo que he elegido. Establecer una var como btn, luego subir dos padres al grupo btn para que pueda manipular el contenido del botón (colores y texto) después de que el servidor devuelva el objeto de estado.
$(".status-item").click(function(){ var btn = $(this).parent().parent(); $.ajax({ method: "POST", url: "/api/orderstatus/{{$order->id}}", data: { status_id: $(this).data("id") } }) .done(function( status ) { // alert( "Returned: " + status.name ); @foreach($statuses as $status) btn.children('button').removeClass('btn-{{$status->display}}'); @endforeach btn.children('button').addClass('btn-'+status.display); btn.children('button').first().text(status.name); }); });