RadioButtonList não disparando SelectedIndexChanged toda vez

9

Eu tenho um RadioButtonList com as opções "Não aplicável", "Não disponível", "Deixar" e "Disponível".

  1. Estou jogando caixa de mensagem de confirmação ao clicar em "Deixar" em RadioButtonList do lado do servidor como abaixo

    protected void rdlUser_SelectedIndexChanged(object sender, EventArgs e)
    {
        radWindowManager.RadConfirm("Are you sure you want to take leave?", "confirmLeave" + this.ClientID, 300, 100, null, "");
    }
    
  2. Se o usuário clicar em "Cancelar", ele selecionará automaticamente "Disponível" com o código abaixo.

O seguinte é o código javascript para "Ok" ou "Cancelar" sair.

    function confirmLeave<%=this.ClientID%>(arg) {
        if (arg == true) {
            alert("User has selected Leave.")
        }    
        else {
            var rdlUser = docment.getElementById("<%= rdlUser.ClientID %>");
            var radioButtons = rdlUser.getElementsByTagName('input');
            radioButtons[1].checked = true;
        }
    }

Se o usuário clicar em "Deixar" pela segunda vez, o SelectedIndexChanged não será disparado.

Sou flexível para mover o código do lado do servidor para o lado do cliente também.

Atualizar

O seguinte é o código HTML relevante

<table id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser">
<tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT01" disabled="disabled" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$0\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0">Not Applicable</label></span></td>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT02" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$1\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1">Not Available</label></span></td>
</tr><tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT03" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$2\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2">Leave</label></span></td>
</tr><tr>
    <td><span class="available"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3" class="Available" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT04" checked="checked" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3">Available</label></span></td>
</tr>

Atualização 2

Estou preso aqui - preciso apontar isso.ClientID de RadioButtonList para $ this de jQuery. É isso aí. Lá eu posso executar a segunda resposta fornecida por @smoksnes

Atualização 3

Se o usuário selecionar "Não disponível" ou "Deixar", deverá enviar uma mensagem de erro como "Deseja sair?" e se ele selecionar "Cancelar", a seleção de RadioButtonList deve apontar para "Disponível". Caso contrário, deve selecionar "Não disponível" ou "Deixar" de acordo.

    
por CPK_2011 07.10.2016 в 14:13
fonte

2 respostas

2

Desde que você esteja aberto ao idéa de mover o código para o cliente. Remova o OnSelectedIndexChange do seu botão de rádio para pular o postback. Você deve ser capaz de fazer algo assim:

// Put this in a script-tag.
$(document).ready(function(){
    $('#<%=this.ClientID%>').change(function(){
        var radioBtnId = this.id;
        radconfirm('Are you sure you want to take leave?', function(arg){
            if (arg == true) {
                alert("User has selected Leave.")
            }    
            else {
                var rdlUser = docment.getElementById(radioBtnId);
                var radioButtons = rdlUser.getElementsByTagName('input');
                radioButtons[1].checked = true;
            }
         }
        });
    });
})

Abaixo está um trecho que usa id's sem código de servidor.

$('#radio1').change(function(e){
  var radioBtnId = this.id;
  var $this = $(this);
  radconfirm('Are you sure you want to take leave?', function(arg){
    // Not really sure what you want to do here...
    if (arg == true) {
      alert("User has selected Leave.")
    }    
    else {
      // Select "Available instead".
      $this.siblings('input').prop('checked',true);
      
      // Unselect "Leave"
      
      // With javascript
      var rdlUser = document.getElementById(radioBtnId);              
      rdlUser.checked = false;
      
      // With jQuery
      $this.prop('checked', false);
    }
  });
});
    
// Mocked for now...
function radconfirm(value, callback){
  var result = confirm(value);
  callback(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="radio" name="radios" id="radio1" value="Leave"/> <label for="radio1" >Leave</label>
<input type="radio" name="radios" id="radio2" value="Available"/> <label for="radio2" >Available</label>

ATUALIZAÇÃO: Eu atualizei o script para ajustar o novo HTML. Aqui ligamos o evento ao controle da segunda-feira. Observe que você pode definir um CssClass no seu controle, em vez de usar o ID. Então você pode usar o mesmo script para todos os seus controles (MyMonday, MyTuesday etc). Seria algo parecido com isto:

<asp:MyControl CssClass="day-control" runat="server" id="MyMondayControl" />

Nesse caso, você deve poder alterar o script abaixo para começar:

$('.day-control input').change....

Caso contrário, você precisa usar o clientID.

$('#<% MyMondayControl.ClientID %> input').change ....
  

Não sei por que onclick="javascript: setTimeout" está sendo adicionado para   o HTML

Isso porque você está usando controles de servidor com AutoPostBack para os seus radiobuttons. Remova isso e você deve ficar bem. Leia mais sobre isso em esta questão .

No trecho abaixo, tomei a liberdade de atribuir classes CSS aos diferentes radiobuttons. Um determinará quando executar o script "check if leave". E um é para saber qual botão de rádio para selecionar se o usuário optar por ficar. As classes css são leave-check e select-if-not-leave . Você pode adicioná-los com a propriedade CssClass .

Você também pode querer verificar qual HTML é renderizado. O HTML que você forneceu está usando table com tr , portanto, certifique-se de que a classe css seja realmente renderizada no input . Caso contrário, você precisará ajustar o seletor.

// Change to the id of the table instead. Something like:
// $('#<% MyMondayControl.ClientID %> input').change ....

// Here I just the ID generated in the HTML, but you shouldn't use that one.
$('#ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser span.leave input').change(function(e){
  e.preventDefault();
  var radioBtnId = this.id;
  var $this = $(this);
  radconfirm('Are you sure you want to take leave?', function(arg){
    // Not really sure what you want to do here...
    if (arg == true) {
      alert("User has selected Leave.")
    }    
    else {
      // Select "Available instead".
      // Here we use the css class "select-if-not-leave" to find the element which should be selected if the user decides to stay.
      var $parent = $this.closest('table') // Get the table. 
      
      // Select the available input.
      $parent.find('span.available input').prop('checked',true);
      
      // Unselect "Leave" With javascript
      var rdlUser = document.getElementById(radioBtnId);              
      rdlUser.checked = false;
      
      // Unselect "Leave" With jQuery (You only need one)
      $this.prop('checked', false);
    }
  });
});
    
// Mocked for now...
function radconfirm(value, callback){
  var result = confirm(value);
  callback(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser">
  <tr>
    <tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT01" disabled="disabled"  /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0">Not Applicable</label></span></td>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT02" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1">Not Available</label></span></td>
</tr><tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT03"/><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2">Leave</label></span></td>
</tr><tr>
    <td><span class="available"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3" class="Available" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT04" checked="checked" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3">Available</label></span></td>
</tr>
</table>

UPDATE 2:

  
  1. Quando escrevo o script jQuery no Day UserControl, posso usar apenas as classes .leave e .available, mas não o controle de dias. 2. Quando escrevo   o script jQuery no UserControl onde MyMonday, MyTuesday, ...   MyFriday são declaradas, então eu posso usar apenas o controle de dias, mas não o .leave   e. classes disponíveis. @smoksnes Por favor, aborde essa ambiguidade.
  2.   

Onde você coloca seu script, não importa, desde que o script pareça o mesmo. De preferência, você deve colocá-lo em um arquivo js juntamente com seus outros scripts. Veja aqui como o script e os seletores jQuery funcionam:

Se você usar .day-control span.available input , primeiro procurará algum elemento com a classe css day-control , e um elemento que é span WITH css-class available e, por último, input sob span . Se houver vários elementos que atendam aos critérios que acabei de mencionar, ele retornará todos esses elementos. Este script só deve ser renderizado uma vez , já que ele irá capturar os eventos de todo o seu DayUserControl , já que todos eles compartilham a mesma classe css day-control .

No entanto, se você usar #<%=this.ClientID%> span.leave input , começará procurando o elemento com o ID específico ( this.ClientID ) e deve haver apenas um deles. É por isso que você precisa renderizar esse script em particular uma vez para cada DayUserControl , já que ele será exclusivo para esse controle de usuário específico.

    
por smoksnes 07.10.2016 / 14:53
fonte
0

Passe o objeto chamador para a função radconfirm. ( link ).

Passe o objeto do chamador do servidor protected void rdlUser_SelectedIndexChanged(object sender, EventArgs e) { //var oConfirm = radconfirm(text, callBackFn, oWidth, oHeight, callerObj, oTitle, imgUrl); radWindowManager.RadConfirm("Are you sure you want to take leave?", "confirmLeave", 300, 100, null, ""); }

Uma função javascript para validar todos os controles em uma lista.

function confirmLeave(arg) { if (arg == true) { alert("User has selected Leave.") }
else { //get callerid and validate var rdlUser = docment.getElementById("<%= rdlUser.ClientID %>"); var radioButtons = rdlUser.getElementsByTagName('input'); radioButtons[1].checked = true; } }

Eu indiquei documentação e não testei este código, espero que isso ajude.

    
por Praveen Kumar N 17.10.2016 / 08:18
fonte