0

Me podrían ayudar estoy realizando con javascript y funciona en navegador chrome y firefox.

Pero no en Internet Explorer. Quisiera que funcione en los 3 navegadores, este es mi código:

   <script type="text/javascript" src="http://www.teamdf.com/jquery-plugins/resources/javascripts/prettify.js"></script>
        <script type="text/javascript" src="http://www.teamdf.com/jquery-plugins/resources/javascripts/docs.js"></script>
        <script type="text/javascript" src="../js/jquery.number.js"></script>
        <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/prettify.css"/>
        <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/docs.css"/>

<script type="text/javascript">

    $(function () {
        // Set up the number formatting.

        $('#number_container').slideDown('fast');

        $('#txtImporteCredito').on('change', function () {
            console.log('Change event.');
            var val = $('#txtImporteCredito').val();
            $('#the_numbers').text(val !== '' ? val : '(empty)');
            $('#TextBox1').val(val !== '' ? val : '(empty)');

        });

        $('#txtImporteCredito').change(function () {
            console.log('Second change event...');
        });

        $('#txtImporteCredito').number(true, 2);


        // Get the value of the number for the demo.
        $('#get_number').on('click', function () {

            var val = $('#price').val();

            $('#the_numbers').text(val !== '' ? val : '(empty)');
        });
    });
        </script>

lo que veo que no esta colocando el valor en the_numbers

TODO HTML.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/stylestshett.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="../js/bootstrap6.js"></script>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine" />
    <style>
        .gvclass table th
        {
            text-align: center;
        }

        .gvclass table th
        {
            background: #ffd800;
        }
    </style>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <script>
        function ModalEmergente(mensaje, alter) {
            alertify.alert(mensaje, alter);
        }

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

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="  crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css" />
    <script>

    </script>
    <script>
        function showModalVisualizar() {

            document.getElementById("btncalcularsimulador").disabled = true;
        }
    </script>

        <script type="text/javascript" src="http://www.teamdf.com/jquery-plugins/resources/javascripts/prettify.js"></script>
        <script type="text/javascript" src="http://www.teamdf.com/jquery-plugins/resources/javascripts/docs.js"></script>
        <script type="text/javascript" src="../js/jquery.number.js"></script>
        <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/prettify.css"/>
        <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/docs.css"/>

<script type="text/javascript">

    $(function () {
        // Set up the number formatting.

        $('#number_container').slideDown('fast');

        $('#txtImporteCredito').on('change', function () {
            console.log('Change event.');
            var val = $('#txtImporteCredito').val();
            $('#the_numbers').text(val !== '' ? val : '(empty)');
            $('#TextBox1').val(val !== '' ? val : '(empty)');

        });

        $('#txtImporteCredito').change(function () {
            console.log('Second change event...');
        });

        $('#txtImporteCredito').number(true, 2);


        // Get the value of the number for the demo.
        $('#get_number').on('click', function () {

            var val = $('#price').val();

            $('#the_numbers').text(val !== '' ? val : '(empty)');
        });
    });
        </script>
    <script>
        $(document).ready(function(){
            $("the_numbers").change(function(){
                var porId = document.getElementById("the_numbers").value;
                console.log(porId);
                alert(porId);
            });
        });
    </script>
     <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/prettify.css" type="text/css" />

        <style>
            #number_container{
                border: 1px dotted #d0d0d0;
                padding: 15px;
                margin: 10px;
                display: none;
                background: #fafafa;
            }

            div.wrap{
                margin: 10px;
                padding-top: 15px;
            }

            button{
                display: block;
                margin-top: 25px;
            }
        </style>
   <%-- <style>
        #TextBox1
        {
            display: none;
        }
    </style>--%>
    <script>
        $(document).ready(function () {
            $("#txtImporteCredito").on('paste', function (e) {
                e.preventDefault();
               // alert('Esta acción está prohibida');
                alertify.alert("Aviso del Sistema", "Esta acción está prohibida");
                document.getElementById('<%= txtImporteCredito.ClientID %>').val = "";
                document.getElementById('<%= txtImporteCredito.ClientID %>').value = "";
                document.getElementById('<%= txtImporteCredito.ClientID %>').text = "";
                return;
            })

            $("#txtImporteCredito").on('copy', function (e) {
                e.preventDefault();
                // alert('Esta acción está prohibida');
                alertify.alert("Aviso del Sistema", "Esta acción está prohibida");
                document.getElementById('<%= txtImporteCredito.ClientID %>').val = "";
                document.getElementById('<%= txtImporteCredito.ClientID %>').value = "";
                document.getElementById('<%= txtImporteCredito.ClientID %>').text = "";
                return;
            })
        })
    </script>
</head>
<center>
<body>

    <form id="form1" runat="server">
         <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true">
                                </cc1:ToolkitScriptManager>
    <div class="contenido">
<img src="../img/LOGO%20QAPAQ%202%20S%203.png"  style="float:left; background:#fff;padding-top:20px; padding-left:10px; width:600px"/>


        <div class="container">
            <div class="row"> 
                 <div class="col-sm-10 col-md-10">
                   <br />  <br />  <br />
                      <h1>  <strong id="letra"> Simulador de ahorro a plazo fijo </strong></h1>

                </div> 
            </div> <br /> <br />
            <div class="row" style="
    margin-bottom: 100px;
">
                <div class="col-sm-10 col-md-10">
                    <table class="table">
                         <tr>
                            <td>Monto:</td>
                             <td><asp:TextBox ID="txtImporteCredito" runat="server" oncopy="return false" onpaste="return false" oncut="return false" CssClass="form-control" placeholder="Ingrese el Importe del capital" ></asp:TextBox></td>
                             <%--<td><asp:TextBox ID="txtImporteCredito" runat="server" CssClass="form-control" placeholder="Ingrese el Importe de Crédito" Text='<%# Bind("Telephone") %>' ></asp:TextBox></td>--%>
                         <%-- <cc1:MaskedEditExtender ID="mexPhone1" runat="server"
        Mask="99,999.99"
        MaskType="Number" 
        TargetControlID="txtImporteCredito" 
        ClearMaskOnLostFocus="false" />--%>



                           <%--  <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="((\d+)((\.\d{1,2})?))$" ErrorMessage="Ingrese un monto decimal"  ControlToValidate="txtImporteCredito" />
  <asp:ValidationSummary ID="ValidationSummary2" runat="server" ShowMessageBox="true" ShowSummary="false" />--%>
                        </tr>
                        <tr>
                            <td>Tipo de Persona:</td>
                             <td><asp:DropDownList ID="cboTipoPersona" runat="server" CssClass="form-control"  >
                                 </asp:DropDownList>

                             </td>
                        </tr>
                        <tr>
                            <td>Tipo Moneda:</td>
                             <td><asp:DropDownList ID="cbotipomoneda" runat="server" CssClass="form-control">
                                 </asp:DropDownList>

                             </td>
                        </tr>
                     <tr>
                         <td>Plazo:</td>
                         <td><asp:TextBox ID="txtplazo" runat="server" CssClass="form-control" TextMode="Number"></asp:TextBox></td>
                     </tr>
                      <tr>
                          <td>Modalidad de Pago:</td>
                          <td><asp:DropDownList ID="cbomodalidadpago" runat="server" CssClass="form-control">
                              </asp:DropDownList></td>
                      </tr>


                        <tr>

                            <td>
                                  <asp:Button ID="btncalcularsimulador" runat="server" Text="Calcular"  class="btn btn-danger"  style="
    width: 151px;"  OnClick="btncalcularsimulador_Click"></asp:Button>
                            </td>
                            <td>
                                <asp:Button ID="btnlimpiar" runat="server" Text="Limpiar"  class="btn btn-default"  style="
    width: 151px;" OnClick="btnlimpiar_Click" ></asp:Button>
                            </td><br /> <br />
                        </tr>

                    </table>
                    <br />


                    <div id="number_container" runat="server" >
                <label for="the_number">The number isss:</label>
                <pre id="the_numbers" runat="server" ></pre>

            </div>

                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>


                    <div class="panel-group">
    <div class="panel panel-danger">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse"  data-parent="#accordion"  aria-expanded="true" aria-controls="collapse1" href="#collapse1">
              <i class="fas fa-money-check-alt"></i>
              Simulador</a>

        </h4>
      </div>
      <div id="collapse1" class="panel-collapse">
        <div class="panel-body">
             <div class="row">
                                      <div id="Div4" class="col-md-12" runat="server">
                                          <table class="table" runat="server" id="table">
                                              <tr>
                                                  <td>TEA:</td>
                                                  <td><asp:TextBox ID="txttasaefectivaanual" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>TREA</td>
                                                  <td><asp:TextBox ID="txttrea" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Capital:</td>
                                                  <td><asp:TextBox ID="txtcapital" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Moneda:</td>
                                                  <td><asp:TextBox ID="txtmoneda" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Tipo Persona:</td>
                                                  <td><asp:TextBox ID="txttipopersona" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Plazo en Días:</td>
                                                  <td><asp:TextBox ID="txtplazodias" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr style="display:none">
                                                  <td>Tasa Efectiva diaria:</td>
                                                  <td><asp:TextBox ID="txttasaefectivadiaria" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Interes por periodo:</td>
                                                  <td><asp:TextBox ID="txtinteresporperiodo" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <td>Total Interes:</td>
                                                  <td><asp:TextBox ID="txttotalinteres" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                               <tr style="display:none">
                                                  <td>Total:</td>
                                                  <td><asp:TextBox ID="txttotal" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox></td>
                                              </tr>
                                              <tr>
                                                  <th colspan="2">
                                                      <asp:Label ID="lblmensaje" runat="server" Text="" ></asp:Label>
                                                  </th>
                                              </tr>
                                          </table>
                                          </div>
                                     </div>
        </div>

      </div>
    </div>
  </div>



                </div>

            </div>

        </div>
   <asp:Button ID="btnCalcularDia" runat="server"  BackColor="White" BorderColor="White" BorderStyle="None" OnClientClick="JDj();" />
    </div>

        <asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
        <center>
            <div class="gvclass">
        <asp:GridView ID="GridView1" runat="server"  HorizontalAlign="Center"   HeaderStyle-BackColor="YellowGreen">
            <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
        </asp:GridView>
             </div>
                <asp:GridView ID="GridView2" runat="server" HorizontalAlign="Center"   Visible="false" HeaderStyle-BackColor="YellowGreen">
                    <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
                </asp:GridView>

                    <asp:GridView ID="GridView3" runat="server"  HorizontalAlign="Center"  HeaderStyle-BackColor="YellowGreen">
            <HeaderStyle BackColor="#df5015" Font-Bold="true" />

        </asp:GridView>
            <asp:GridView ID="GridView4" runat="server"  HorizontalAlign="Center"  HeaderStyle-BackColor="YellowGreen">
            <HeaderStyle BackColor="#df5015" Font-Bold="true" />

        </asp:GridView>
            </center>
    </form>

/****************** RSPTA DE ANDY ***********************/

ya no me sale ese mensaje de error pero tampoco no se muestra este es el codigo.

$('#txtImporteCredito').on('change', function () {
            console.log('Change event.');
            var val = $('#txtImporteCredito').val();
            $('#the_numbers').text(val !== '' ? val : '(empty)');
            $('#TextBox1').val(val !== '' ? val : '(empty)');

        });
2
  • Seria bueno que incluyas el resto del HTML
    – alanfcm
    Commented el 8 ago. 2018 a las 16:44
  • @alanfcm ya coloque todo el html
    – PieroDev
    Commented el 8 ago. 2018 a las 16:48

3 respuestas 3

2

Esto es un caso muy común cuando se mezclan: (HTML + JavaScript o jQuery) y ASP.net WebForms.

Observaciones Generales

A ordenar el código, por ley de universal de toda aplicación web de alto rendimiento, los archivos CSS siempre van antes de los archivos de javascript, esto evitará que haya ese "flash" o "carga en blanco" cuando la página esté cargando. Y de la misma manera, evitar colocar funciones javascript entre llamadas y más llamadas...

Deberías tener tu código así:

//Importación de todos los CSS necesarios
//Estilos que hay en la misma página
//Importación de todos los JavaScript
//Código JavaScript

Con solo poner orden, tu aplicación web se renderizará más rápido. Te lo garantizo.

Usando el Jquery

Para usar el document ready de jquery, hay varias opciones, en tu código veo que estás usando 2 y deberías tener sólo una forma con todo el código que deseas ejecutar.

Forma 1

$(document).ready(function() {
    //Código a ejecutar
});

Forma 2

$(function(){ 
    //Código a ejecutar
});

Por otro lado, nunca se ejecuta:

$("the_numbers").change(function(){ ... });

Porque te hace falta un "#" o un ".", dependiendo si el selector es un ID o una Clase.

ASP.net WebForms

<pre id="the_numbers" runat="server" ></pre>

Sucede que al ejecutarse del lado del servidor, su ID en el cliente (navegador) será diferente.

$('#' + '<%= the_numbers.ClientID %>').click(function() { ... });
1

intenta poner esta etiqueta en tu html

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>

algo que te podria ayudar es que en IE8 e IE9 no se puede llamar de la misma forma a una variable como una id o como un name. Ni aunque este en un comentario

ejemplo:

Queria apuntar que en mi caso no pude llamarle inter a una id (id="inter") porque habia una linea en un comentario:

<!--<input type="text" size="8" name="inter" value="00:00:00.00 ">--> 
8
  • me sale un error en mi codigo adjunte la imagen.
    – PieroDev
    Commented el 8 ago. 2018 a las 16:51
  • mira mi respuesta ya la edite de algo que me paso
    – andy gibbs
    Commented el 8 ago. 2018 a las 16:53
  • ya no me sale ese error pero igual no captura el valor y no me la muestra.
    – PieroDev
    Commented el 8 ago. 2018 a las 16:54
  • mira este es lo que hace: $('#txtImporteCredito').on('change', function () { console.log('Change event.'); var val = $('#txtImporteCredito').val(); $('#the_numbers').text(val !== '' ? val : '(empty)'); $('#TextBox1').val(val !== '' ? val : '(empty)'); });
    – PieroDev
    Commented el 8 ago. 2018 a las 16:56
  • que version de jquery estas usando asegurate que sea la ultima o si no pueda que halga algunas funciones en tu codigo que requieran una version vieja de jquery asi que te recomiendo que uses jquery migrate tambien
    – andy gibbs
    Commented el 8 ago. 2018 a las 16:59
1

Solución era colocar dentro change

  $('#txtImporteCredito').change(function () {
            $('#txtImporteCredito').number(true, 2);
        });

y funciona en todos los navegadores.

pluging  utilizar.
    <script type="text/javascript" src="http://www.teamdf.com/jquery-plugins/resources/javascripts/docs.js"></script>
    <script type="text/javascript" src="../js/jquery.number.js"></script>
    <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/prettify.css"/>
    <link rel="stylesheet" href="http://www.teamdf.com/jquery-plugins/resources/stylesheets/docs.css"/>
1
  • no es IE es por la version de jquery, en versiones anteriores on("") tiene problemas
    – andy gibbs
    Commented el 8 ago. 2018 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.