Display massage after pjax success by clicking on specific input only

Question

I have a form which submits when any change is made on any of the radio input's.

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

<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 simplyfied approach:

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

   $(document).on('ready pjax:success', function() {
     $('#message').text( 'Loaded' );
   });
});

Problem is that the message triggers even if I click on radio group1.

Answer 1

You've the right selector no need for change it, you could use $.pjax callbacks directly :

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

Or also you could put out the callbacks and use send & complete instead as are the best if you're in loading purpose as described in the Official Documentation :

pjax:send & pjax:complete are a good pair of events to use if you are implementing a loading 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 : No need for the ready callback since it will init your #message with Loaded when the page is loaded before any $.pjax request.

Take a look to best way to implement an overlay with pjax.

Hope this helps.