1

Actualmente estoy trabajando con entity framework y ajax, tengo un metodo en ajax que me regresa una lista que puedo cargar en una tabla y cuando quiero escoger alguno item en especial doy click a la fila y estos datos los carga en formulario, generalmento los cargo en TextBoxFor:

@Html.TextBoxFor(model => model.SubjectId, new { @class = "form-control", @required = "Required", @id = "SubjectTxt", @style = "visibility:hidden" })

el problema esta en que la funcion que tengo en javascript para que cargue esta funcion lo hace perfectamente para numeros pero cuando los datos son caracteres o tipo string me aparece este error, en este caso Lectoescritura es el contenido de la variable que quiero pasar:

Create:1 Uncaught ReferenceError: Lectoescritura is not defined
at HTMLInputElement.onclick

El metodo onclick que va a la funcion es:

"<input type='button' onclick='PasarMateria(" + value.SubjectId + "," + value.NameSubject + " )' class='btn btn-warning' value='Seleccionar' data-dismiss='modal'>" 

y la funcion en javascript:

function PasarMateria(SubjectId, NameSubject) {

        $("#SubjectTxt").val(SubjectId);
        $("#SubjectLbn").val(NameSubject);           

        console.log(SubjectId);

    }

el metodo ajax completo

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {



            $("#SearchSubjectBtn").click(function () {
                alert("se dio click en el boton");
                var SearchBySubject = $("#SearchBySubject").val();
                var SearchSubject = $("#SearchSubject").val();
                var SetDataSubject = $("#DataSearchingSubject");

                $.ajax({
                    type: "POST",
                    url: "/Generic/GetSubject?SearchBy=" + SearchBySubject + "&SearchValue=" + SearchSubject,
                    contentType: "html",
                    success: function (result) {
                        console.log(result);

                        if (result.length == 0) {
                            window.alert("no se encontro la materia");
                            SetDataSubject.append('<tr style="color:red"><td colspan="3">No se encontro la materia</td></tr>')
                        }

                        else {

                            $.each(result, function (i, value) {
                                var Data = "<tr>" +                                    
                                    "<td>" + value.NameSubject + "</td>" +                                   
                                    "<td>" + value.NameLevel + "</td>" +                                  
                                    "<td>" +
                                    "<input type='button' onclick='PasarMateria(" + value.SubjectId + ",'" + value.NameSubject + "' )' class='btn btn-warning' value='Seleccionar' data-dismiss='modal'>" +
                                    "</td>" +
                                    "</tr>";

                                SetDataSubject.append(Data);
                            });
                        }

                    }
                });

            });


        });




        function PasarUsuario(UserId, nombre) {

            $("#txtUsuario").val(UserId);
            $("#borrartxt").val(nombre);
            document.getElementById('borrartxt').innerHTML = nombre;

            console.log(UserId);

        }

        function PasarMateria(SubjectId, NameSubject) {

            console.log('SubjectId', typeof SubjectId);
            console.log('NameSubject', typeof NameSubject);

            $("#SubjectTxt").val(SubjectId);
            $("#SubjectLbn").val(NameSubject);


            console.log(SubjectId);

        }
    </script>
}

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {




            $("#SearchSubjectBtn").click(function () {
                alert("se dio click en el boton");
                var SearchBySubject = $("#SearchBySubject").val();
                var SearchSubject = $("#SearchSubject").val();
                var SetDataSubject = $("#DataSearchingSubject");

                $.ajax({
                    type: "POST",
                    url: "/Generic/GetSubject?SearchBy=" + SearchBySubject + "&SearchValue=" + SearchSubject,
                    contentType: "html",
                    success: function (result) {
                        console.log(result);

                        if (result.length == 0) {
                            window.alert("no se encontro la materia");
                            SetDataSubject.append('<tr style="color:red"><td colspan="3">No se encontro la materia</td></tr>')
                        }

                        else {

                            $.each(result, function (i, value) {
                                var Data = "<tr>" +                                    
                                    "<td>" + value.NameSubject + "</td>" +                                   
                                    "<td>" + value.NameLevel + "</td>" +                                  
                                    "<td>" +
                                    "<input type='button' onclick='PasarMateria(" + value.SubjectId + ",'" + value.NameSubject + "' )' class='btn btn-warning' value='Seleccionar' data-dismiss='modal'>" +
                                    "</td>" +
                                    "</tr>";

                                SetDataSubject.append(Data);
                            });
                        }

                    }
                });

            });


        });




        function PasarUsuario(UserId, nombre) {

            $("#txtUsuario").val(UserId);
            $("#borrartxt").val(nombre);
            document.getElementById('borrartxt').innerHTML = nombre;

            console.log(UserId);

        }

        function PasarMateria(SubjectId, NameSubject) {



            $("#SubjectTxt").val(SubjectId);
            $("#SubjectLbn").val(NameSubject);


            console.log(SubjectId);

        }
    </script>
}

aqui quiero poner lo que encuentre

<div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3>Buscar Materia</h3>
            </div>
            <div class="panel-body">
                <div class="form-inline">
                    @Html.TextBoxFor(model => model.SubjectId, new { @class = "form-control", @required = "Required", @id = "SubjectTxt", @style = "visibility:hidden" })
                    <label id="SubjectLbn">Materia no relacionada</label>

                </div>

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

Lo que me tiene confundido es por que me presenta error cuando el resultado que le doy a NameSubject es tipo string y no cuando es entero y si debo declara NameSubject de tipo string como lo hago, tengo entendido que javascript es flexible con el tema de tipo de variable.

Gracias

1

1 respuesta 1

2

Intenta agregandole comilla simple al value.NameSubject:

"<input type='button' onclick='PasarMateria(" + value.SubjectId + ", '" + value.NameSubject + "' )' class='btn btn-warning' value='Seleccionar' data-dismiss='modal'>"

Tambien modifca la funcion PasarMateria para que imprimas en consola el tipo de dato que le llega a la funcion:

function PasarMateria(SubjectId, NameSubject) {
    console.log('SubjectId', typeof SubjectId);
    console.log('NameSubject', typeof NameSubject);

    $("#SubjectTxt").val(SubjectId);
    $("#SubjectLbn").val(NameSubject);

    //fuerza a convertir a string el NameSubject como forma de prueba.
    //$("#SubjectLbn").val('' + NameSubject);

    console.log(SubjectId);

}

Como no especificas donde armas el input, si en un js o del lado del servidor, ni tampoco especificas la estructura de value y sus propiedades, no puedo darte mas detalles de como solucionar tu inconveniente.

Actualizando:

Lo mas seguro es que en el onClick cuando se pasa una cadena el explorador interpreta mal la doble comilla con la comilla simple.

Intenta mejor pasar todo el objeto value a la funcion PasarMateria:

Crea el input de esta forma:

"<input type='button' onclick='PasarMateria(" + JSON.stringify(value) + " )' class='btn btn-warning' value='Seleccionar' data-dismiss='modal'>"

Y actualiza la funcion:

function PasarMateria(value) {
    $("#SubjectTxt").val(value.SubjectId);
    $("#SubjectLbn").val(value.NameSubject);
    console.log(value.SubjectId);
}
14
  • Buen dia Orlando, la verdad no llega a imprimir en consola por que cuando entra en la funcion PasarMateria me arroja el error: Uncaught ReferenceError: Ingles is not defined at HTMLInputElement.onclick...... ajax lo que me trae es este objeto: 0: DescriptionSubject: null NameLevel: "primero" NameSubject: "Ingles-primero" SubjectId: 1 Commented el 16 nov. 2018 a las 19:20
  • Entonces la creacion del input button esta en el success del ajax y value es el item que recorres para crear la tabla ???
    – dlr
    Commented el 16 nov. 2018 a las 19:21
  • Cuando utilizo comillas simples me arroja este error: Uncaught SyntaxError: Unexpected end of input Commented el 16 nov. 2018 a las 19:23
  • podrias mostrar el html final de la tabla que creaste, para verificar como quedan los valores en el input del onclick='PasarMateria'
    – dlr
    Commented el 16 nov. 2018 a las 19:25
  • 1
    voy a editar la pregunta y paso el codigo completo de la pagina donde quiero cargar. Commented el 16 nov. 2018 a las 19:29

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.