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
RSmithBothell
Posts: 7Questions: 3Answers: 0
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!
This discussion has been closed.
Answers
Fiddle didn't like this as JS or HTML.
Here are the JS and CSS libraries I'm referencing:
My guess is that the HTML being loaded loads jQuery again. Would that be correct?
Allan
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
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 functionIs duplicate column names an issue?
(A)
(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"}}}
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