CODEWITHSUNDEEP
jqueryloaddatatables
fefe
fefe

Reputation: 9055

Jquery load() inside Datatable

I can't figure out why my load function is not getting fired with the following snippet. Till jqueries load everything works I can log datas what I passed to my function 

   <script>
    var oTable;
    /* Formating function for row details */
    function fnFormatDetails(nTr)
    {
        var aData = oTable.fnGetData(nTr);
        $(nTr).fadeOut();
        console.log(aData[1]);
        container_id = aData[1];
        var sOut = '<div id="edit_prod_settings_' + aData[1] + '"></div>';

        return sOut;
    }

    $(document).ready(function() {

        oTable = $('#feed_products').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "../admin/?controller=products&action=getTable",
            "aoColumns": [
                {"sClass": "center", "bSortable": false},
                null,
                {sWidth: '20%'},
                null,
                null,
                null,
                null,
                {"sClass": "center", "bSortable": false},
                {"sClass": "center", "bSortable": false, sWidth: '5%'},
                {"sClass": "center", "bSortable": false}
            ],
            "aaSorting": [[1, 'asc']],
            "fnDrawCallback": function(oSettings)
            {
                $('button.edit').on('click', function() {

                    var nTr = $(this).parents('tr')[0];
                    if (oTable.fnIsOpen(nTr))
                    {
                        /* This row is already open - close it */
                        this.src = "<button class='btn btn-warning btn-xs edit'><i class='icon-plus'></i></button>";
                        oTable.fnClose(nTr);
                    }
                    else
                    {
                        /* Open this row */

                        this.src = "<button class='btn btn-warning btn-xs edit'><i class='icon-minus'></i></button>";
                        //oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
                        var openedRow = oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
                        console.log(openedRow);
                        $(openedRow).each(function() {
                            console.log(container_id);                        
                            $('#edit_prod_settings_'+ container_id).load('../admin/?controller=products&action=getProdDetails&prod_id=' + container_id);
                        });
                    }
                });
            }
        });
    });


</script>

Logging

console.log(aData[1]);
        console.log('#edit_prod_settings_'+ aData[1]);
        console.log('../admin/?controller=products&   action=getProdDetails&prod_id=' + aData[1]);

Response

1402879831
#edit_prod_settings_1402879831

the last one is not returning any value

Upvotes: 0

Views: 441

Answers (2)

Michał Rybak
Michał Rybak

Reputation: 8706

The element that you call load() on doesn't exist.

From your comment "console.log( $('#edit_prod_settings_'+aData[1]).length ); returns 0" I think thats the case.

This is because you call load() before your element is appended to HTML:

  • you call oTable.fnOpen with fnFormatDetails(nTr) as one of parameters
  • in fnFormatDetails you return call load() on element with id containerId, which doesn't yet exist
  • then you return sOut, which is the HTML code for the element with id containerId
  • after fnFormatDetails returns, oTable.fnOpen actually executes, appending contents of sOut to your HTML. From now the element with id #edit_prod_settings_"+aData[1] exists. (and will exist until you call fnClose)

I'd suggest calling load() after fnOpen executes to fix your issue. As fnOpen returns table element, this is pretty simple:

var openedRow = oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
$(openedRow).each(function () {
    // here goes the function that you want called after fnOpen 
    // in your case, .load()
});

Hovewer, you'll need to restructure your code a bit to have aData[1] value accessible from outside of fnFormatDetails.

Upvotes: 0

LeGEC
LeGEC

Reputation: 51830

Quoting the documentation :

If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.

What does your selector return ?

console.log( '#edit_prod_settings_'+ aData[1] );
console.log( $('#edit_prod_settings_'+ aData[1]) );
console.log( $('#edit_prod_settings_'+ aData[1]).length );

[edit]

console.log( $('#edit_prod_settings_'+aData[1]).length ); returns 0

This means that, when you call the $('#edit_prod_settings_'+aData[1]) selector, there is no node with id 'edit_prod_settings_'+aData[1] in your page.

Either fix your selector, or create the node you need before calling .load().

Or load the content using $.ajax( ... ), and explicitly add the html in the success callback.

Upvotes: 1

Related Questions