Jyoti Rani Posted October 12, 2023 Share Posted October 12, 2023 I have to list some rows using php code. I am able to get them. But to add paging and Sorting to it, I m using third party script of datatable e.g https://legacy.datatables.net/examples/data_sources/server_side.html But i m facing the below error But all the js file is there in the script block. Can someone help ? Link to comment Share on other sites More sharing options...
Nathan Explosion Posted October 12, 2023 Share Posted October 12, 2023 7 minutes ago, Jyoti Rani said: But all the js file is there in the script block. It may be in the block, but is it loaded on the site? Provide a link to your page with the block on it. Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 12, 2023 Author Share Posted October 12, 2023 26 minutes ago, Nathan Explosion said: It may be in the block, but is it loaded on the site? Provide a link to your page with the block on it. https://beta.marketingcheckpoint.com/mail/test-page-for-invision/ Here is the link for the page Link to comment Share on other sites More sharing options...
Solution Nathan Explosion Posted October 12, 2023 Solution Share Posted October 12, 2023 OK - first bit of advice...you don't need this as jQuery (v3.7.0) will be provided by Invision's software: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Secondly...in your screenshot, the error is $(...).DataTable but when I view the site, I see: $(...).dataTable is not a function The DataTable function is called "DataTable" so if you have do have it as "dataTable" in your code then correct that. Finally though, and most important...your code is BEFORE the code that loads up all of Invision's JS. That is possibly why you decided to include that first line of script to load jquery up. You can change that in your theme settings: Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 12, 2023 Author Share Posted October 12, 2023 32 minutes ago, Nathan Explosion said: OK - first bit of advice...you don't need this as jQuery (v3.7.0) will be provided by Invision's software: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Secondly...in your screenshot, the error is $(...).DataTable but when I view the site, I see: $(...).dataTable is not a function The DataTable function is called "DataTable" so if you have do have it as "dataTable" in your code then correct that. Finally though, and most important...your code is BEFORE the code that loads up all of Invision's JS. That is possibly why you decided to include that first line of script to load jquery up. You can change that in your theme settings: I have updated the code above But its not reflecting. For datatable i checked the Datatable Capital (D) issue as well. Still no luck. Any other ways to resolve this ? Link to comment Share on other sites More sharing options...
Nathan Explosion Posted October 12, 2023 Share Posted October 12, 2023 OK - I didn't mention anything about putting those items in the footer of the theme so that's your call. And you haven't modified the theme setting that I indicated you could change. And now you have this as your code <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> --> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { jQuery('#example123').DataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "https://beta.marketingcheckpoint.com/admin/mailing/ajax_mail_history_dt10.php" }); }); </script> And this as your error: Why? You've commented out BOTH the jquery line and the datatables line, and you aren't loading the datatables JS at a later point. Plus you are using "jQuery" instead of "$" Use this code in the block, modify the theme setting I indicated, and then advise if it doesn't work: <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "https://beta.marketingcheckpoint.com/admin/mailing/ajax_mail_history_dt10.php" }); }); </script> Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 12, 2023 Author Share Posted October 12, 2023 49 minutes ago, Nathan Explosion said: OK - I didn't mention anything about putting those items in the footer of the theme so that's your call. And you haven't modified the theme setting that I indicated you could change. And now you have this as your code <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> --> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { jQuery('#example123').DataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "https://beta.marketingcheckpoint.com/admin/mailing/ajax_mail_history_dt10.php" }); }); </script> And this as your error: Why? You've commented out BOTH the jquery line and the datatables line, and you aren't loading the datatables JS at a later point. Plus you are using "jQuery" instead of "$" Use this code in the block, modify the theme setting I indicated, and then advise if it doesn't work: <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": "https://beta.marketingcheckpoint.com/admin/mailing/ajax_mail_history_dt10.php" }); }); </script> I have tried with $ as well. Also done the RnD with the suggestion you have shared. I have changed like as you have suggested. But still no luck. Link to comment Share on other sites More sharing options...
Nathan Explosion Posted October 12, 2023 Share Posted October 12, 2023 (edited) You still have this in your code - remove it. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> You also still have your JS loading set to "Just before the </body> tag" - change it to the setitng I mentioned. Edited October 12, 2023 by Nathan Explosion Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 12, 2023 Author Share Posted October 12, 2023 18 minutes ago, Nathan Explosion said: You still have this in your code - remove it. - Its Removed <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> You also still have your JS loading set to "Just before the </body> tag" - change it to the setitng I mentioned. - In my invision default theme. Not able to find the settings which you have shared. Can you please share any link for this? My theme is invision default theme. Link to comment Share on other sites More sharing options...
Nathan Explosion Posted October 12, 2023 Share Posted October 12, 2023 Link to comment Share on other sites More sharing options...
Nathan Explosion Posted October 13, 2023 Share Posted October 13, 2023 Good to see you got it working. Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 13, 2023 Author Share Posted October 13, 2023 36 minutes ago, Nathan Explosion said: Good to see you got it working. Thanks Nathan. I am able to solve this. Link to comment Share on other sites More sharing options...
Jyoti Rani Posted October 17, 2023 Author Share Posted October 17, 2023 Hello Nathan, I have a new Query here. I have an simple HTML form. I want to use jquery validate. But its showing the above error. I just included <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> this file in my code. and used the basic validations there. Can you please suggest whats wrong here. Link to comment Share on other sites More sharing options...
Recommended Posts