Estoy tratando de que mi ajax cargue los datos una vez que se carga la página y poder hacer clic en un botón para actualizar los datos cuando los necesite. En este momento solo funciona al hacer clic en el botón. Aquí una muestra de lo que tengo.
<a id="update" href="#" class="button">Update Data</a> <div id="container"> <div id="mydata"></div> </div> $(document).ready(function() { $("#update").click(function(e) { e.preventDefault(); $.ajax({ url: "mycode", dataType: "json", data: { //id: $(this).val(), }, success: function(result) { alert(JSON.stringify(result)); }, error: function(result) { console.log(result); } }); }); });¡Gracias por mirar!
Para lograr esto, puede dejar su código como está y simplemente generar un evento de click en la carga:
$("#update").click(function(e) { e.preventDefault(); // ajax logic here... }).click(); // < raise event on loadAlternativamente, puede extraer la lógica AJAX a una función que se llama en ambos lugares:
function makeAjaxCall() { // ajax logic here... } $('#update').click(function(e) { e.preventDefault(); makeAjaxCall(); }); // on click makeAjaxCall(); // on loadDebe poner su llamada AJAX en su alcance .ready , actualmente está bloqueada por la función de click .
$(document).ready(function() { updatePage(); $("#update").click(function(e) { e.preventDefault(); updatePage(); }); }); function updatePage(){ $.ajax({ url: "mycode", dataType: "json", data: { //id: $(this).val(), }, success: function(result) { alert(JSON.stringify(result)); }, error: function(result) { console.log(result); } }); }Aquí tienes:
$(document).ready(function() { $("#update").click(function(e) { e.preventDefault(); loadData(); } loadData(); }); function loadData() { $.ajax({ url: "mycode", dataType: "json", data: { //id: $(this).val(), }, success: function(result) { alert(JSON.stringify(result)); }, error: function(result) { console.log(result); }); }); } <a id="update" href="#" class="button">Update Data</a> <div id="container"> <div id="mydata"></div> </div>