DropDownList not populated with text file - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 3 voices, and was last updated by Martin 3 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

DropDownList not populated with text file Posts
February 11, 2022 at 5:04 am DropDownList not populated with text file #121502

liobar
Participant

Hi all,
I want to populate a dropdowlist with a text file but nothing appears.
The text file is:
11111,text1
22222,text2
33333,text3

Here is my code:
<head>
<script type=”text/javascript”>
$(document).ready(function () {
var url = “data/List.txt”;
// prepare the data
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘CompanyName’},
{ name: ‘ContactName’}
],
url: url,
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxWidget”).jqxDropDownList({
selectedIndex: 0,
source: dataAdapter,
displayMember: “ContactName”,
valueMember: “CompanyName”,
width: 200,
height: 30,
});

// subscribe to the select event.
$(“#jqxWidget”).on(‘select’, function (event) {
$(“#selectionlog”).html(“label: ” + event.args.item.label + “, value: ” + event.args.item.value);
});
});
</script>
</head>
<body>
<div id=’content’>
<div id=’jqxWidget’>
</div>
<div style=”font-size: 12px; font-family: Verdana;” id=”selectionlog”>
</div>
</div>
</body>

Thanks for your help

February 11, 2022 at 11:49 am DropDownList not populated with text file #121505

Martin
Participant

Hello liobar,

Your code seems to be correct. Are there any error in the console? Also can check in the Network tab of the Dev tools if the file is loaded successfully?

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

February 11, 2022 at 5:33 pm DropDownList not populated with text file #121507

liobar
Participant

Hello Martin,

Thanks for your reply.

There are 2 errors in the console and the file text is not loaded
Access to XMLHttpRequest at ‘file:///C:/My%20Programs/…../data/List.txt?_=1644599408348’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

GET file:///C:/My%20Programs/…/data/List.txt?_=1644599408348 net::ERR_FAILED

I browse the internet to fix it but I find nothing relevant.
May be a JQuery scripts is missing or … ?
Here they are:
<script type=”text/javascript” src=”scripts/jquery-1.12.4.min.js”></script>
<script type=”text/javascript” src=”scripts/jqxcore.js”></script>
<script type=”text/javascript” src=”scripts/jqxdata.js”></script>
<script type=”text/javascript” src=”scripts/jqxbuttons.js”></script>
<script type=”text/javascript” src=”scripts/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”scripts/jqxlistbox.js”></script>
<script type=”text/javascript” src=”scripts/jqxscrollbar.js”></script>

When I execute the demos DropDownList exemple from JQuery web site, they run properly (https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm)

I use Chrome

Thanks again for your help

February 14, 2022 at 8:36 am DropDownList not populated with text file #121515

admin
Keymaster

Hi liobar,

That binding will not work because of security reasons. You should run samples on a web server and I see that you run it by just double-clicking on it and is on your local file system.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

February 15, 2022 at 4:57 am DropDownList not populated with text file #121527

liobar
Participant

Hi Peter,

I fix it by using Visual Studio and set a local web server.
Thanks again for your help

February 15, 2022 at 9:54 am DropDownList not populated with text file #121528

Martin
Participant

Hello liobar,

Thank you for the update!

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.