Show massage after pjax success by clicking on a specific entry

Question

I have a form that is submitted when any changes are made to any of the radio input .

Inside the form I have two different groups of radio. I am trying to output a message to my #message on pjax:start when any of the radio stations from group2 started only .

 <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> 

Here is my simple approach:

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

The problem is that the message is triggered even if I click on group1 radio.

Answer 1

You have the correct selector, there is no need to change it, you can use the $.pjax directly:

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

Or you can also disable callbacks and use send & complete , and also better if you are in boot mode, as described in the Official Documentation :

pjax: send and pjax: complete are a good couple of events to use if you implement a load indicator

 $(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' ); }) }) 

NOTE. There is no need for a ready callback, as it will start your #message with Loaded when the page $.pjax before any $.pjax request.

Take a look at the best way to implement overlay with pjax .

Hope this helps.

Answer 2

Try the following:

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

Answer 3

You update your events every time your inputs change. You could make it easier. I use only the variable to store if you clicked on your input or not.

 //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; });