Can i include php datatables third party script in block code?

[Jyoti Rani]

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 ?

[Nathan Explosion]

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.

[Jyoti Rani]

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

[Nathan Explosion]

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:

 

[Jyoti Rani]

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 ?

[Nathan Explosion]

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>

 

 

[Jyoti Rani]

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.

[Nathan Explosion]

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

[Jyoti Rani]

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.

[Nathan Explosion]

[Nathan Explosion]

Good to see you got it working.

[Jyoti Rani]

36 minutes ago, Nathan Explosion said:

Good to see you got it working.

Thanks Nathan. I am able to solve this.

[Jyoti Rani]

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.