Tengo una página con un botón, tengo un enlace en el botón que ejecuta algunas llamadas ajax y envía algunos datos.
El código con el enlace es bastante genérico y se reutiliza en varios otros puntos de la aplicación. Entonces no puedo cambiar su comportamiento actual (podría cambiarlo de una manera que no afecte a otros usuarios de esto).
Ahora tengo un requisito para cambiar el comportamiento de una de las páginas que usan este enlace (es decir, no debería cambiar el binge de una manera que rompa las otras páginas).
Ahora necesito el botón en una página específica para no enviar los datos en caso de que no se cumplan algunas otras condiciones. (en específico, en lugar de enviar, necesito mostrar un modal, con una doble verificación si realmente quieren completar el envío)
Hice un fragmento ejecutable que lo explica:
$('button').click(function (e) { $('ul').append('<li>submitting data</li>'); }); $('button').click(function (e) { if($(this).data('value') != 'ready') { $('ul').append('<li>condition not met, data not submitted</li>') } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> When the button is clicked, I want the data to be submitted only if the condition is not met. </p> <p> In this example I need 'condition not met' to be printed, and not 'submitting data'. </p> <button data-value='not-ready'> content </button> <ul> </ul>Necesito que esta página específica no envíe los datos en caso de que no se cumpla la condición.
¿Cómo podría conseguir esto?
No estoy seguro de si esto es lo que está buscando, hecho con la suposición de que es posible que no desee cambiar la estructura del HTML del botón. Puede configurar uno de sus contenedores externos para algo que pueda probar, y luego, en ese sentido, también puede configurar una función de validación dinámica para solicitar el botón dentro del contenedor.
$('button').click(function(e) { if ($(this).closest('.validate-extra').length > 0) { if ($(this).closest('.validate-extra').data('fn')) { return window[$(this).closest('.validate-extra').data('fn')](); } else { console.error('no special validation function in scope!'); } } else $('ul').append('<li>submitting data</li>'); }); function val1() { console.log('running function val1()'); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> When the button is clicked, I want the data to be submitted only if the condition is not met. </p> <p> In this example I need 'condition not met' to be printed, and not 'submitting data'. </p> <button data-value='not-ready'> content </button> <div class='validate-extra' data-fn='val1'> <button data-value='not-ready'> content </button> </div> <ul> </ul>Siguiendo la sugerencia de @aleksG en los comentarios, terminé con bastantes cambios, pero principalmente:
Esto funcionó y se ve bastante limpio.
Gracias.