Was working (in entire window), when .load() ed into a DIV, it fails

Was working (in entire window), when .load() ed into a DIV, it fails

RSmithBothellRSmithBothell Posts: 7Questions: 3Answers: 0
edited September 2016 in Free community support

Uncaught TypeError: $(...).DataTable is not a function

New to this, but I had it working before I 'fixed' the target.

I HAD relied on (but it was failing) HTML5's data-target="center_body" to place the page/table into desired DIV.

When I added the $('#center_body').load('the url', function....
it now fails to load DataTable() with the error pasted above.

Where do I look next?

Thanks!

sa: https://jsfiddle.net/RSmithBothell/z0kg8v0w/

Answers

  • RSmithBothellRSmithBothell Posts: 7Questions: 3Answers: 0
    edited September 2016

    Fiddle didn't like this as JS or HTML.
    Here are the JS and CSS libraries I'm referencing:

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript" src="/cmdb/javascripts/FormSearchScripts.js"></script>
    <script type="text/javascript" src="/cmdb/javascripts/LibraryScripts.js"></script>
    <script type="text/javascript" src="/cmdb/javascripts/LeftMarginLinks.js"></script>
    <script type="text/javascript" src="/cmdb/javascripts/FormCommitScripts.js"></script>
    <script type="text/javascript" src="/cmdb/javascripts/DataTablesScripts.js"></script>
    <!-- =========================================================================================================== -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.1.3/css/keyTable.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/keytable/2.1.3/js/dataTables.keyTable.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.bootstrap.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
    
  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    My guess is that the HTML being loaded loads jQuery again. Would that be correct?

    Allan

  • RSmithBothellRSmithBothell Posts: 7Questions: 3Answers: 0
    edited October 2016

    Hi Allan,

    I don't see how that would be happening. The page list_plan_levels.html (containing the HTML for the DataTable), is .load()-ed c/o JS
    `function listPlanLevelsClick(event)
    {
    event.preventDefault() ;

    var UpDown = $(this).data('updown');
    var posted_period = $(this).data('pp');
    var scope = $(this).data('scope');

    var target = '#' + $(this).data('target');
    var link = $(this).attr('href')

    localStorage.UpDown = UpDown ;
    localStorage.posted_period = posted_period ;
    localStorage.scope = scope ;

    $(target).load(link, function( response, status, xhr )
    {
    if ( status == "error" )
    {
    var msg = "Sorry but there was an error in function listPlanLevelsClick() when trying to load 'better plans' list: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
    }
    });

    }`

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    list_plan_levels.html has the ready() function:

    `function list_plan_levels()
    {

    var UpDown = localStorage.UpDown ;
    var posted_period = localStorage.posted_period ;
    var scope = localStorage.scope ;

    var php_params = 'job=UpDownGrade&UpDown='+UpDown+'&posting_period='+posted_period+'&scope='+scope ;

    $('#debug').html(php_params) ; // For visibility in header of window

    $('#UpDownGrade').DataTable(
    {
    ajax: {
    url: '/cmdb/PHP/do_DataTables_query.php' ,
    data: { job: 'UpDownGrade'
    , UpDown: UpDown
    , posted_period: posted_period
    , scope: scope
    },
    dataSrc: ''
    },
    columns: [
    { data: 'View' }
    , { data: 'Select' }
    , { data: 'Commit' }
    , { data: 'wireless #' }
    , { data: 'serial #' }
    , { data: 'curr usage' }
    , { data: 'curr limit' }
    , { data: 'curr code' }
    , { data: 'better code' }
    , { data: 'prior inv.', 'defaultContent': "--" }
    , { data: 'prior usage', 'defaultContent': "--" }
    , { data: 'prior code', 'defaultContent': "--" }
    , { data: 'prior inv.', 'defaultContent': "--" }
    , { data: 'prior usage', 'defaultContent': "--" }
    , { data: 'prior code', 'defaultContent': "--" }
    , { data: 'Show' }
    , { data: 'Mark' }
    ]
    } );

    }`

    The link that invokes the top function:

    <a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" target="center_body" data-pp="Sep 2015" data-scope="PP" data-updown="UP">698</a>

    DataTable() does work, though w/o any CSS and in the entire window rather than the target, when I change the top function to not preventDefault() and flow though w/o the .load().

    Thanks again,
    Ralph

  • RSmithBothellRSmithBothell Posts: 7Questions: 3Answers: 0
    edited October 2016

    Is this right, (A) particularly dataSrc: '' , also periods in column names,
    If I return (B)?

    If (B) is not correct, how do I get there from (C)? (Brain fart.)

    Looking at my network trace my PHP code is not being called.

    Earlier, 1st post above on the 29th, you said it looked like the code was invoked more than once.
    I now know it's only once because I'm 'getting to here' via jQuery $('selector').one(), now.

    I'm still getting Uncaught TypeError: $(...).DataTable is not a function

    Is duplicate column names an issue?

    (A)

    $('#UpDownGrade').DataTable(
        {
          ajax: {
          url:        '/cmdb/PHP/do_DataTables_query.php' , 
          data:       { job:            'UpDownGrade'
                      , UpDown:         UpDown
                      , posted_period:  posted_period
                      , scope:          scope
                      },
          dataSrc: ''
        },
        columns: [
            { data: 'View' }
          , { data: 'Select' }
          , { data: 'Commit' }
          , { data: 'wireless #' }
          , { data: 'serial #' }
          , { data: 'curr usage' }
          , { data: 'curr limit' }
          , { data: 'curr code' }
          , { data: 'better code' }
          , { data: 'prior inv.', 'defaultContent': "--" }
          , { data: 'prior usage', 'defaultContent': "--" }
          , { data: 'prior code', 'defaultContent': "--" }
          , { data: 'prior inv.', 'defaultContent': "--" }
          , { data: 'prior usage', 'defaultContent': "--" }
          , { data: 'prior code', 'defaultContent': "--" }
          , { data: 'Show' }
          , { data: 'Mark' }
        ]
        } );
    

    (B)
    '[{"View":"View","Select":"<input type=\"checkbox\" name=\"bulk\" value=\"795\">","Commit":"Do","wireless #":"4254203638","serial #":"Unassigned","curr usage":"222.2","curr limit":"120","curr code":"IRRF120MB","better code":"IRRECPLMB","prior inv.":"","prior usage":"","prior code":"","Show":"Show","Mark":"Mark"}]'

    (C)
    {"when":"Tue Oct 4 14:53:44 PDT 2016","nrows":25,
    "nfields":17,"field_names":{"1":"View","2":"Select","3":"Commit","4":"wireless #","5":"serial #","6":"curr usage","7":"curr limit","8":"curr code","9":"better code","10":"prior inv.","11":"prior usage","12":"prior code","13":"prior inv.","14":"prior usage","15":"prior code","16":"Show","17":"Mark"},
    "values":{"1":{"View":"View","Select":"<input type=\"checkbox\" name=\"bulk\" value=\"795\">","Commit":"Do","wireless #":"4254203638","serial #":"Unassigned","curr usage":"222.2","curr limit":"120","curr code":"IRRF120MB","better code":"IRRECPLMB","prior inv.":"","prior usage":"","prior code":"","Show":"Show","Mark":"Mark"},
    "2":{"View":"View","Select":"<input type=\"checkbox\" name=\"bulk\" value=\"801\">","Commit":"Do","wireless #":"4254203804","serial #":"Unassigned","curr usage":"237.0","curr limit":"120","curr code":"IRRF120MB","better code":"IRRECPLMB","prior inv.":"","prior usage":"","prior code":"","Show":"Show","Mark":"Mark"}}}

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    If you could give me a link to a running test case showing the issue I would be happy to take a look and try to help. I think your code looks correct above, but that doesn't explain the DataTables undefined error.

    Allan

This discussion has been closed.