locked
JQuery datatables in Partia View Dialog - where to put the script RRS feed

  • Question

  • User-305602330 posted

    I am using JQuery Dialog to show a Partial View which displays a DataTable.

    I am using the Javascript below to load my datatable with data. The problem is I don't want to place this block of code within the Partial View. 

    I am putting it in the Parent page and it can't find the $("#datatable-orders") reference because it doesn't exist on the Parent but the Dialog box.

    How can I resolve this? 

     var table_orders = $("#datatable-orders").DataTable({
            "responsive": true,
            "autoWidth": false,
            "processing": true,
            "serverSide": true,
            "sAjaxSource": getOrders,
            "bSortable": true,
            "lengthMenu": [[5, 10, 25], [5, 10, 25]],
            "aoColumns": [
            { "sName": "OrderId" },
            { "sName": "Description" },
            { "sName": "Status" }
            ],
        });
    



    Monday, September 5, 2016 5:23 AM

Answers

  • User1724605321 posted

    Hi asp.net9984,

    Base on your description , code below is for your reference :

      <div id="dialog" title="Create Album" style="overflow: hidden;"></div>
            <input id="my-button" type="button" value="button" />

    JS function :

    <script type="text/javascript">
        $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                title: 'hi there',
                modal: true,
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    
        $('#my-button').click(function () {
    
            //Load the CreateAlbumPartial action which will return
            // the partial view 
              $('#dialog').load("@Url.Action("CreateAlbumPartial")",
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                        //put your code here
                        var table_orders = $("#datatable-orders").DataTable({
                            "responsive": true,
                            "autoWidth": false,
                            "processing": true,
                            "serverSide": true,
                            "sAjaxSource": getOrders,
                            "bSortable": true,
                            "lengthMenu": [[5, 10, 25], [5, 10, 25]],
                            "aoColumns": [
                            { "sName": "OrderId" },
                            { "sName": "Description" },
                            { "sName": "Status" }
                            ],
                        });
                    });
        });
    
    </script>

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2016 5:12 AM

All replies

  • User-305602330 posted

    anyone?

    Monday, September 5, 2016 11:39 AM
  • User1724605321 posted

    Hi asp.net9984,

    Base on your description , code below is for your reference :

      <div id="dialog" title="Create Album" style="overflow: hidden;"></div>
            <input id="my-button" type="button" value="button" />

    JS function :

    <script type="text/javascript">
        $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                title: 'hi there',
                modal: true,
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    
        $('#my-button').click(function () {
    
            //Load the CreateAlbumPartial action which will return
            // the partial view 
              $('#dialog').load("@Url.Action("CreateAlbumPartial")",
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                        //put your code here
                        var table_orders = $("#datatable-orders").DataTable({
                            "responsive": true,
                            "autoWidth": false,
                            "processing": true,
                            "serverSide": true,
                            "sAjaxSource": getOrders,
                            "bSortable": true,
                            "lengthMenu": [[5, 10, 25], [5, 10, 25]],
                            "aoColumns": [
                            { "sName": "OrderId" },
                            { "sName": "Description" },
                            { "sName": "Status" }
                            ],
                        });
                    });
        });
    
    </script>

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 7, 2016 5:12 AM