Muestra el masaje después del éxito del pjax haciendo clic solo en la input específica

Tengo un formulario que se envía cuando se realiza cualquier cambio en cualquiera de las input radio.

Dentro del formulario tengo dos grupos de radio diferentes. Estoy tratando de dar salida a un post en mi #message en pjax:start cuando solo se pjax:start cualquiera de las radios del group2 .

 <form id="myForm"> <input type="radio" name="group1" val="ga_1_1"> <input type="radio" name="group1" val="ga_1_2"> <input type="radio" name="group2" val="ga_2_1"> <input type="radio" name="group2" val="ga_2_2"> </form> <span id="message"></span> 

Aquí está mi enfoque simplificado:

 $('input[name="group2"]').on('change', function(){ $(document).on('pjax:start', function() { $('#message').text( 'Loading...' ); }); $(document).on('ready pjax:success', function() { $('#message').text( 'Loaded' ); }); }); 

El problema es que el post se dispara incluso si hago clic en el grupo de group1 .

Tiene el selector correcto sin necesidad de cambiarlo, puede usar devoluciones de llamada $.pjax directamente:

 $('input[name="group2"]').on('change', function(){ $.pjax({ url: '/url', container: '#container', beforeSend: function(){ $('#message').text( 'Loading...' ); }, complete: function(){ $('#message').text( 'Loaded' ); } }); }); 

O también puede cancelar las devoluciones de llamada y usar send & complete lugar, ya que son las mejores si tiene un propósito de carga como se describe en la Documentación oficial :

pjax: enviar y pjax: completar son un buen par de events para usar si está implementando un indicador de carga

 $(function(){ $('input[name="group2"]').on('change', function(){ $.pjax({url: "/url", container: '#container'}) }); $(document).on('pjax:send', function() { $('#message').text( 'Loading...' ); }) $(document).on('pjax:complete', function() { $('#message').text( 'Loaded' ); }) }) 

NOTA: No hay necesidad de callback ya que iniciará su #message con Loaded cuando la página se cargue antes de cualquier request $.pjax .

Eche un vistazo a la mejor manera de implementar una superposition con pjax .

Espero que esto ayude.

Prueba esto:

 <input type="radio" class="rdgroup2" name="group2" val="ga_2_2"> $('.rdgroup2').on('change', function(){ //do something } 

Estás networkingeclarando tus events cada vez que tus inputs cambian. Podrías hacerlo más fácil. Solo estoy usando una variable para almacenar si hizo clic en su input o no.

 //Variable that is true is you clicked on group2, false else var shoulddisplay = false; //On change in your input, update the variable $('input[name="group2"]').on('change', function(){ shoulddisplay = true; }); $(document).on('pjax:start', function() { //Display message only if you clicked on group2 if (true === shoulddisplay) { $('#message').text( 'Loading...' ); } }); $(document).on('ready pjax:success', function() { //Display message only if you clicked on group2 if (true === shoulddisplay) { $('#message').text( 'Loaded' ); } shoulddisplay = false; });