Display massage sau khi thành công pjax bằng cách nhấp vào đầu vào cụ thể chỉ

Question

Tôi có một hình thức mà sẽ gửi khi bất kỳ thay đổi được thực hiện trên bất kỳ của các đài phát thanh input 's.

Bên trong biểu mẫu, tôi có hai nhóm radio khác nhau. Tôi cố gắng để ra một tin nhắn trên #message tôi trên pjax:start khi bất kỳ radio từ group2chỉ được kích hoạt.

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

Đây là cách tiếp cận simplyfied tôi:

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

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

Vấn đề là rằng thông điệp gây nên ngay cả khi tôi bấm vào đài phát thanh group1.

Answer 1

Hãy thử điều này:

<input type="radio" class="rdgroup2" name="group2" val="ga_2_2"> 


$('.rdgroup2').on('change', function(){ 
    //do something 
    } 

Answer 2

Bạn đang redeclaring sự kiện của bạn mỗi khi đầu vào của bạn thay đổi. Bạn có thể làm điều đó dễ dàng hơn. Tôi chỉ sử dụng một biến để lưu trữ nếu bạn nhấp vào đầu vào của bạn hay không.

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

Answer 3

Bạn đã chọn đúng không cần phải thay đổi nó, bạn có thể sử dụng $.pjax callbacks trực tiếp:

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

Hoặc bạn cũng có thể đặt ra các callbacks và sử dụng send & complete thay vì như là tốt nhất nếu bạn đang ở mục đích tải như mô tả trong Official Documentation:

pjax: gửi & pjax: hoàn toàn là một cặp tốt các sự kiện để sử dụng nếu bạn đang thực hiện một chỉ số tải

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

LƯU Ý: Không cần cho ready gọi lại vì nó sẽ init của bạn #message với Loaded khi trang được tải trước bất kỳ yêu cầu $.pjax nào.

Hãy xem best way to implement an overlay with pjax.

Hy vọng điều này sẽ hữu ích.