1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. The problem of referencing CDN.

The problem of referencing CDN.

The problem of referencing CDN.

The following CDNs don't work. Why? I just want to use the CDN of jsdelivr, because only jsdelivr has Chinese CDN.

<script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-lists.min.js"></script>

The following CDNs can be used normally.

<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

All codes



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Essential JS 2</title>
    <link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">
    <link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">
    <script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <div> element  -->
<div id='element'></div>
<script>
    //define the array of string
    var arts = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    // Initialize Essential JS 2 JavaScript ListView control
    var listviewInstance = new ej.lists.ListView({
        //set the data to datasource property
        dataSource: arts
    });
    //Render initialized ListView
    listviewInstance.appendTo("#element");
</script>
</body>
</html>

3 Replies
SM Shalini Maragathavel Syncfusion Team October 19, 2021 02:52 PM UTC

Hi Xu, 

Greetings from Syncfusion support. 
                                                                                                                                         
We checked your query and would like to let you know that we need to include all the dependency files of EJ2 ListView while referring the individual script files. To overcome the reported issue, we suggest you to include all the dependency files(i.e, base,data) of ListView component as demonstrated in the below code snippet,  

<html><head><link rel="stylesheet" rel='nofollow' rel='nofollow' href=https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css> 
    <link rel="stylesheet" rel='nofollow' rel='nofollow' href=https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css> 
   </head>     
<body> 
        <div id='element'></div> 
      
</body></html> 

Note: By default, ej2.min.js contains the script to render all Syncfusion components with this single file.

Please refer the below sample for your reference, 


Please get back to us if you need further assistance. 

Regards,   
Shalini M. 


XZ xu zhi bin replied to Shalini Maragathavel October 19, 2021 03:33 PM UTC

It seems that JS files must be in order? base>data>lists

If data is put to the end, it can't run? In the following example, I didn't mention the use of data.js, so I didn't put it, so I couldn't run it. Should I read the tutorial on this website?

https://ej2.syncfusion.com/javascript/documentation/listview/getting-started/ 



<!--1-->
<link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">
<!--2-->
<link rel="stylesheet" rel='nofollow' href="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/styles/material.css">
<!--3-->
<script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-base.min.js"></script>
<!--4-->
<script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-data.min.js"></script>
<!--5-->
<script src="https://cdn.jsdelivr.net/npm/@syncfusion/[email protected]/dist/global/ej2-lists.min.js"></script>

KR Keerthana Rajendran Syncfusion Team October 20, 2021 06:04 AM UTC

Hi Xu zhi bin, 
 
Yes, the files must be referred in the mentioned order(base>data>lists) and you can go through the below UG link for getting started with ListView component in JavaScript. 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon