¡Hola, Gusy! Estoy tratando de colocar la función de publicación de ajax en una y usarla en todo el sitio con una URL diferente en cada página.
Esta es mi función original y cómo funciona:
<button type="button"class="submit">send</button> $(document).ready(function (){ $('.submit').on("click", function(e){ e.preventDefault(); var form = $(this).closest('form'); $.ajax({ type:'POST', url:'ActionPage.php', data:form.serialize(), success:function(vardata){ var json = JSON.parse(vardata); if(json.status == 101){ alert(json.msg); window.location.replace("/"); } else { alert(json.msg); console.log(json.msg); } } }); }); }); Exp: tengo varios formularios en algunas páginas, por lo que necesito usar $(this).closest('form'); para publicar cada formulario.
Esto es lo que quiero hacer , la función original estará en los scripts y se incluirá en la página:
function ajaxLoader(url) { var form = $(this).closest("form"); $.ajax({ type:"POST", "url" : url, data:form.serialize(), success:function(vardata){ var json = JSON.parse(vardata); if(json.status == 101){ alert(json.msg); window.location.replace("/"); } else { alert(json.msg); console.log(json.msg); } } }); }Y en la página quiero llamarlo así:
$(document).ready(function (){ $('.submit').on("click", function(e){ e.preventDefault(); ajaxLoader("ActionPage.php", true); }); }); Recibo un mensaje indefinido en todos los casos cuando hago clic en el botón Enviar, cuando muevo $(this).closest("form"); a la segunda función, obtengo un error de formulario indefinido.
He buscado en el sitio hay preguntas similares, pero ninguna de ellas tiene una respuesta útil. ejemplo: este
$(this).closest("form"); no se resuelve en el elemento de formulario más cercano del botón en el que se hizo clic cuando está dentro de su función 'ajaxLoader'. Haz un 'console.log(this)' en esa función.
Puede inyectar el formulario directamente en su función:
$(document).ready(function (){ $('.submit').on("click", function(e){ e.preventDefault(); let form = $(this).closest("form"); ajaxLoader("ActionPage.php", form); }); }); function ajaxLoader(url, form) { ... }O puede usar el atributo de acción de su formulario y enlazar directamente con el evento de envío del formulario:
$('form').on('submit', function( e ) { e.preventDefault(); const $form = $(this); const url = $form.attr('action'); const data = $form.serialize(); const method = $form.attr('method'); $.ajax({ url: url, data: data, success: function(response) { } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="actionpage.php" method="POST"> <button type="submit"> submit </button> </form>El alcance de this se basa en el contexto de cómo se llama. Puede cambiar lo que esto es con call/apply/bind. Ejemplo básico a continuación.
function ajaxLoader(url) { console.log(this, url) var form = $(this).closest("form"); console.log(form[0]); } $(document).ready(function (){ $('.submit').on("click", function(e){ e.preventDefault(); ajaxLoader.call(this, "ActionPage.php"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="foo"> <button class="submit">Click</button> </form>