Error $ not defined (Uncaught Reference Error: $ is not defined at sendDataAjax)

0

function addRowDT(data) {
    var tabla = $('#tbl_pacientes').DataTable();
    for (var i = 0; i < data.length; i++) {
        tabla.fnAddData([
            data[i].IdPaciente,
            data[i].Nombres,
            (data[i].ApPaterno + " " + data[i].ApMaterno),
            ((data[i].Sexo == 'M')? "Masculino": "Femenino"),
            data[i].Edad,
            data[i].Direccion,
            ((data[i].Estado == true)? "Activo": "Inactivo")
        ]);
    }
}

function sendDataAjax() {
    $.ajax({
        type: "POST",
        url: "GestionarPaciente.aspx/ListarPacientes",
        data: {},
        contentType: 'application/json; charset=utf-8',
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
        },
        success: function (data) {
            addRowDT(data.d);
        }
    });
}

//Llamando a la funcion ajax al cargar el documento
sendDataAjax();
        <!-- TABLA DE PACIENTES-->
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Lista de Pacientes</h3>
                    </div>
                    <div class="box-body table-responsive">
                        <table id="tbl_pacientes" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Nombres</th>
                                    <th>Apellidos</th>
                                    <th>Sexo</th>
                                    <th>Edad</th>
                                    <th>Dirección</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbl_body_table">
                                <!-- TABLE AJAX-->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="js/paciente.js" type="text/javascript"> </script>
</asp:Content>
    
asked by yunior prudencio moreno 26.12.2018 в 06:58
source

1 answer

0

The most common mistake since JQuery exists ... do not add it.

Simply reference any version of JQuery in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The recommended best practice is to put it in the body so that it does not block the load of other resources.

function addRowDT(data) {
    var tabla = $('#tbl_pacientes').DataTable();
    for (var i = 0; i < data.length; i++) {
        tabla.fnAddData([
            data[i].IdPaciente,
            data[i].Nombres,
            (data[i].ApPaterno + " " + data[i].ApMaterno),
            ((data[i].Sexo == 'M')? "Masculino": "Femenino"),
            data[i].Edad,
            data[i].Direccion,
            ((data[i].Estado == true)? "Activo": "Inactivo")
        ]);
    }
}

function sendDataAjax() {
    $.ajax({
        type: "POST",
        url: "GestionarPaciente.aspx/ListarPacientes",
        data: {},
        contentType: 'application/json; charset=utf-8',
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
        },
        success: function (data) {
            addRowDT(data.d);
        }
    });
}

//Llamando a la funcion ajax al cargar el documento
sendDataAjax();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TABLA DE PACIENTES-->
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Lista de Pacientes</h3>
                    </div>
                    <div class="box-body table-responsive">
                        <table id="tbl_pacientes" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Nombres</th>
                                    <th>Apellidos</th>
                                    <th>Sexo</th>
                                    <th>Edad</th>
                                    <th>Dirección</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbl_body_table">
                                <!-- TABLE AJAX-->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="js/paciente.js" type="text/javascript"> </script>
</asp:Content>
    
answered by 26.12.2018 в 07:09