none
Abrir Modal pelo code-behind RRS feed

  • Pergunta

  • Possuo um modal, #myModal, e gostaria que ao clicar no button, tivesse uma condição e que caso ela entrasse no else, abriria o modal. Criei esse código no javascript:

    <script type="text/javascript">
             function openModal() {
                 $('#myModal').modal({ show: true });
             }
        </script>


    if (cbquitado.Checked == true)
                    {
                        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Contas a Pagar já quitada!');location='" + url + "';", true);
                        return;
                    }
                    else
                    {
                        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "myModal", "openModal();", true);
                    }

    E esse código na condição, porém nada acontece, segue o código do modal:

     <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
    
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Pagamento</h4>
                            </div>
                            <div class="modal-body">
                                <br />
                                <asp:Label ID="lblDetalhe" runat="server" Text="Detalhes Conta a Pagar" Font-Bold="True"></asp:Label>
                                <asp:Panel ID="PainelContasaPagar" runat="server">
                                    <asp:Label ID="Label5" runat="server" Text="Vencimento:" Font-Bold="True"></asp:Label>
                                    <asp:Label ID="Label6" runat="server" Text="Label" Font-Bold="False"></asp:Label>
                                    <br />
                                    <asp:Label ID="Label7" runat="server" Text="Observações:" Font-Bold="True"></asp:Label>
                                    <asp:Label ID="Label8" runat="server" Text="Label"></asp:Label>
                                    <br />
                                    <asp:Label ID="Label9" runat="server" Text="Valor:" Font-Bold="True"></asp:Label>
                                    <asp:Label ID="Label10" runat="server" Text="Label"></asp:Label>
                                </asp:Panel>
                                <br />
                                <br />
                                <br />
                                <asp:Label ID="lblFormaPg" runat="server" Text="Forma de Pgto" Font-Bold="True"></asp:Label>
                                <asp:DropDownList ID="cbforma" runat="server">
                                    <asp:ListItem>Dinheiro</asp:ListItem>
                                    <asp:ListItem>Cheque</asp:ListItem>
                                    <asp:ListItem>Depósito</asp:ListItem>
                                </asp:DropDownList>
                                <br />
                                <br />
                                <asp:UpdatePanel ID="UpdatePanel7" runat="server">
                                    <ContentTemplate>
                                        <asp:Label ID="lblValoraPagar" runat="server" Text="Valor a Pagar"></asp:Label>
                                        <asp:TextBox ID="txtValoraPagar" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$" Enabled="False"></asp:TextBox>
                                        <asp:Label ID="lblDesconto" runat="server" Text="Desconto"></asp:Label>
                                        <asp:TextBox ID="txtDesconto" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$0,00"></asp:TextBox>
                                        <asp:Label ID="lblJuros" runat="server" Text="Juros"></asp:Label>
                                        <asp:TextBox ID="txtJuros" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$0,00"></asp:TextBox>
    
                                        <asp:Button ID="btnCalcular" runat="server" Text="Calcular" Font-Bold="True" OnClick="btnCalcular_Click" />
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                                <br />
                                <br />
                                <asp:UpdatePanel ID="UpdatePanel9" runat="server">
                                    <ContentTemplate>
                                        <asp:RadioButton ID="rb1" runat="server" Text="Retirar da Conta" AutoPostBack="True" OnCheckedChanged="rbConta_CheckedChanged" />
                                        <asp:DropDownList ID="cbContas" runat="server"></asp:DropDownList>
                                        <asp:RadioButton ID="rb2" runat="server" Text="Retirar do Caixa" AutoPostBack="True" OnCheckedChanged="rbCaixa_CheckedChanged" />
    
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                                <br />
                                <br />
                                <asp:UpdatePanel ID="UpdatePanel8" runat="server">
                                    <ContentTemplate>
                                        <asp:Label ID="lblTotalPagar" runat="server" Text="Total" Font-Bold="True"></asp:Label>
                                        <asp:TextBox ID="txtTotalPagar" runat="server"></asp:TextBox>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="Button1" runat="server" Text="Concluir" CssClass="radiusInput" OnClick="Button1_Click" />
                            </div>
                        </div>
                    </div>
                </div>

    E esse é o código do button que deveria abrir o modal:

       <asp:UpdatePanel ID="UpdatePanel10" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="grid-2">
                                <asp:Button ID="btnPagarConta" runat="server" data-toggle="modal" Text="Pagar Conta" OnClick="btnPagarConta_Click" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnPagarConta" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>


    Já tentei sem Trigger, com Trigger, porém nada acontece, se eu tiro o update panel do button, ele entra no if do quitado, porém quando ele entra no else, que deveria abrir o modal, ele atualiza, e o mesmo não abre.

    Obrigado.

    quinta-feira, 20 de abril de 2017 11:50

Respostas

  • Você deixou a referência ao jquery depois do bootstrap. Precisa ser o contrário.

        <script type="text/javascript" src="javascript/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    • Marcado como Resposta Mariana C. Costa quinta-feira, 20 de abril de 2017 13:05
    quinta-feira, 20 de abril de 2017 13:00

Todas as Respostas

  • Mariana, 

    Substitua o método RegisterClientScriptBlock pelo RegisterStartupScript e faça um teste novamente.

    if (cbquitado.Checked == true)
                    {
                        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Contas a Pagar já quitada!');location='" + url + "';", true);
                        return;
                    }
                    else
                    {
                        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "openModal();", true);
                    }


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 20 de abril de 2017 11:56
  • Bom dia Juliano, tentei dessa forma, porém também não deu certo, olha como está o código do meu button:

    Dessa forma, nada acontece, nem a messagem aparece, e nem o modal.

        <asp:UpdatePanel ID="UpdatePanel10" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="grid-2">
                                <asp:Button ID="btnPagarConta" runat="server" data-toggle="modal" Text="Pagar Conta" OnClick="btnPagarConta_Click" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnPagarConta" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>

    E dessa forma, aparece a mensagem, mais não aparece o modal:

      <div class="grid-2">
                                <asp:Button ID="btnPagarConta" runat="server" data-toggle="modal" Text="Pagar Conta" OnClick="btnPagarConta_Click" />
                            </div>

    quinta-feira, 20 de abril de 2017 12:03
  • Mais um teste:

    if (cbquitado.Checked == true)
                    {
                        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Contas a Pagar já quitada!');location='" + url + "';", true);
                        return;
                    }
                    else
                    {
                        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(function() {openModal();});", true);
                    }

    Outra coisa, suponho que esteja usando a modal do bootstrap, então tente alterar o código para exibição para isto:

    $('#myModal').modal('show');


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 20 de abril de 2017 12:10
  • Juliano, fiz os testes, tanto com o UpdatePanel, e sem o Update Panel, continua da mesma forma.

    Com não faz nenhuma ação, e sem, mostra a mensagem, e quando entra no else, não abre o modal.

    quinta-feira, 20 de abril de 2017 12:16
  • Opa, vamos ver se mesmo via um simples hyperlink ele também não abrirá, pois aí pode indicar que o erro é outro. Acrescente fora do update panel este hyperlink e veja se através dele o modal é aberto.

    <a href="#" onclick="openModal()">ABRIR MODAL</a>

    Verifique nas ferramentas de desenvolvedor (F12) se é indicado algum erro de script.


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 20 de abril de 2017 12:19
  • Realmente até com o Hyperlink não abriu.

    Erro 1:bootstrap.js Failed to load resource: the server responded with a status of 404 (Not Found)

    Erro 2: Failed to load resource: the server responded with a status of 404 (Not Found)

    Erro 3: Uncaught TypeError: $(...).modal is not a function at openModal 

    quinta-feira, 20 de abril de 2017 12:24
  • Suspeitei que o problema pudesse ser outro.

    O bootstrap.js que está referenciando está dentro do seu projeto? Verifique se o caminho está correto.

    Qualquer coisa, substitua a referência por esta. Assim utilizará uma CDN (Content Delivery Network) e o browser poderá fazer a carga da biblioteca paralelamente com o restante do site.

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".


    quinta-feira, 20 de abril de 2017 12:28
  • Sim, ele está sendo referenciado, olha as referências:

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <%--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript" src="javascript/mascara.js"></script>
        <script type="text/javascript" src="javascript/money-blur.js"></script>

    Comentei a que estava, e coloquei da forma que me informou, porém acontece erro :(

    TypeError: $(...).modal is not a function at openModal (ContasApagar.aspx:143) at HTMLAnchorElement.onclick
    ContasApagar.aspx:143 Uncaught
    quinta-feira, 20 de abril de 2017 12:35
  • Mariana, vi que você possui duas referências para o jQuery, remova a última e deixe só a do CDN:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    Outro detalhe, coloque o seu bloco de script com a função openModal sempre depois da referência do jQuery e Bootstrap.


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 20 de abril de 2017 12:45
  • Está dessa forma Juliano:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript" src="javascript/mascara.js"></script>
        <script type="text/javascript" src="javascript/money-blur.js"></script>
       <link rel="stylesheet" href="css/mobile/contas_apagar_small_1366.css" />
         <script type="text/javascript">
            function openModal() {
                $('#myModal').modal('show');
            }
        </script>

    Já fiz algumas alterações, voltei e continua com o mesmo erro.

    ContasApagar.aspx:136 Uncaught TypeError: $(...).modal is not a function at openModal (ContasApagar.aspx:136) at HTMLAnchorElement.onclick (ContasApagar.aspx:417)
    quinta-feira, 20 de abril de 2017 12:51
  • Você deixou a referência ao jquery depois do bootstrap. Precisa ser o contrário.

        <script type="text/javascript" src="javascript/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    • Marcado como Resposta Mariana C. Costa quinta-feira, 20 de abril de 2017 13:05
    quinta-feira, 20 de abril de 2017 13:00
  • Juliano MUITO obrigado, agora sim funcionou como eu queria, já havia tentado de várias formas, quebrando a cabeça e nada!!! Depois que alterei dessa forma, funcionou corretamente.
    quinta-feira, 20 de abril de 2017 13:05
  • Show de bola, Mariana.

    Valeu pelo feedback.


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    quinta-feira, 20 de abril de 2017 17:12