Problem with var api = new $.fn.dataTable.Api( settings );

Kingve

Hi,after a open modal with data provide for my datatable ans search again in my datatable, raise a error in the jquery.datatables.bootstrap.js in
var api = new $.fn.dataTable.Api( settings );
the query work perfectly but i don't know why don't open a modal again over the data query select... .

Error: Uncaught TypeError: Cannot read property 'Api' of undefined.

I load the file in this position

   <script type="text/javascript">
        window.jQuery || document.write("<script src='@Url.Content("~/Scripts/assets/js/jquery.js")'>"+"<"+"/script>");
   </script>

    <!--Bootstrap-->
    <script src="@Url.Content("~/Scripts/assets/js/bootstrap.js")"></script>
    <!---->
       <!--Datatables JQuery-->
    <script src="@Url.Content("~/Scripts/assets/js/dataTables/jquery.dataTables.js")"></script>
    <script src="@Url.Content("~/Scripts/assets/js/dataTables/jquery.dataTables.bootstrap.js")"></script>
    <script src="@Url.Content("~/Scripts/assets/js/dataTables/extensions/TableTools/js/dataTables.tableTools.js")"></script>
    <script src="@Url.Content("~/Scripts/assets/js/dataTables/extensions/ColVis/js/dataTables.colVis.js")"></script>

my version is DataTables 1.10.4

allan

Can you link to a test page showing the issue, per the forum rules please.

Allan

Kingve

I Updated the issue, is when the record if off the pagination or begin with the records in pagination > 1.

Will it help you login or see it from my system? Because in the modal I load Html.Content from my view and server.

allan

It doesn't matter where I can load the content from, but a link to a page showing the issue would be useful.

Allan

Kingve

There is the link

http://server-mvc.no-ip.biz/ControlSystemData/Country

allan

Could you tell me what actions I need to take to reproduce the error place. I don't see how to show a modal.

Allan

Kingve

Ok, you see a table from Availables Country (demo), if you try a edit or delete any of records from pagination > 2, the modal don't show, if you try on records from pagination = 1 the modal show without a problem, after that raise the error:

Uncaught TypeError: Cannot read property 'Api' of undefined$.fn.dataTable.ext.renderer.pageButton.bootstrap @ jquery.dataTables.bootstrap.js:25settings.aoDrawCallback.push.fn @ jquery.dataTables.js:3445(anonymous function) @ jquery.dataTables.js:5188jQuery.extend.map @ jquery.js:468_fnCallbackFire @ jquery.dataTables.js:5187_fnDraw @ jquery.dataTables.js:2058searchFn @ jquery.dataTables.js:2758jQuery.event.dispatch @ jquery.js:4409elemData.handle @ jquery.js:4095

http://i60.tinypic.com/2ni8jo0.png

allan

I presume I should be editing and deleting items using the yellow drop down handle in the last column? If I use that, on the first or second page I let a little menu with a green and red icon. Clicking either of them, on either page in the DataTable, appears to do nothing.

Allan

Kingve

Fixed, I had disabled because I'm on a PC and not on mobile, try again

allan

My browser window size was forcing it into the mobile view I think.

Now when I click the "Eliminar" button it refreshes the page and there are no errors.

Please can you give me simple step by step instructions for how to reproduce this error so I can try to offer some help.

Worth noting that every time you show a modal window you reload jQuery and various other scripts which seems like a very bad idea to me.

Allan

Kingve

I understand, I need to improvement that past the script to the page corresponding... Please try to open a modal for the second page of pagination, not work, but the first pagination, yes.

Kingve

Hi Allen, I found the solution, I put the entire code to call modal, .Load() and tooltips outside the JQuery(function ($) {}); and inside leave the code to call the dataTables and functionality, work perfectly... Thanks for your help in this issues...

   // Code to call other functions relative from modal, load content and manage EF
    //tooltip for command list tourist
    $("a.newCountry").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        }
    });

    $("a.editCountry").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        }
    });

    $("a.deleteCountry").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        }
    });

    $('a.newCountry').click(function (e) {
        e.preventDefault();
        var url = '@Url.Action("Create", "Country")';
        GetModal(url);
    });

    $('.editCountry').click(function (e) {
        e.preventDefault();
        var id = $(this).attr('CountryID');
        var url = '@Url.Content("~/Country/Edit/")' + id;
        GetModal(url);
    });

    $('.deleteCountry').click(function (e) {
        e.preventDefault();
        var id = $(this).attr('CountryID');
        var datarow = {
            'CountryID': id
        }
        $.ajax({
            type: 'POST',
            url: '@Url.Action("checkDelete", "Country")',
            data: datarow,
            success: function (result) {
                if (result == 'True') {
                    var url = '@Url.Content("~/Country/Delete/")' + id;
                    GetModal(url);
                } else {
                    bootbox.alert('No se puede eliminar este registro, esta ligado a los Eventos  Turistas - ');
                }
            }
        });
    });

    function GetModal(url) {
        var form = $("#Modal-Charge form");
        $('#ModalContent').load(url, function (html) {
            jQuery.extend(jQuery.validator.messages, {
                required: "El campo es requerido.",
                remote: "Please fix this field.",
                email: "Please enter a valid email address.",
                url: "Please enter a valid URL.",
                date: "Please enter a valid date.",
                dateISO: "Please enter a valid date (ISO).",
                number: "Please enter a valid number.",
                digits: "Please enter only digits.",
                creditcard: "Please enter a valid credit card number.",
                equalTo: "Please enter the same value again.",
                accept: "Please enter a value with a valid extension.",
                maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
                minlength: jQuery.validator.format("Please enter at least {0} characters."),
                rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
                range: jQuery.validator.format("Please enter a value between {0} and {1}."),
                max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
                min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
            });

            jQuery.validator.setDefaults({
                ignore: [],
                highlight: function (element, errorClass, validClass) {
                    if (element.type === 'radio') {
                        this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                    } else {
                        $(element).addClass(errorClass).removeClass(validClass);
                        $(element).closest('.form-group-sm').removeClass('has-success').addClass('has-error');
                    }
                },
                unhighlight: function (element, errorClass, validClass) {
                    if (element.type === 'radio') {
                        this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                    } else {
                        $(element).removeClass(errorClass).addClass(validClass);
                        $(element).closest('.form-group-sm').removeClass('has-error').addClass('has-success');
                    }
                },
                messages: {
                    required: 'Este campo es requerido'
                }
            });

            $(function () {
                $("span.field-validation-valid, span.field-validation-error").addClass('help-block');
                $("div.form-group-sm").has("span.field-validation-error").addClass('has-error');
                $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");
            });
            $.validator.unobtrusive.parse(form);
            $("#Modal-Charge").modal('show');
        });
        form.submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#Modal-Charge').modal('hide');
                    var content = '@Url.Action("Index", "Country")';
                    $('#contentCountry').load(content);
                },
                error: function (request, status, error) {
                }
            });
        });
    }
   // dataTables
    jQuery(function ($) {
        //initiate dataTables plugin       
        var oTable1 =
        $('#dataTables-Country')       
        .dataTable({
            bAutoWidth: false,
            "aoColumns": [
              { "bSortable": false },
              null,
              { "bSortable": false }
            ],
            "aaSorting": []
        });
      })