static webresource is not getting file update is not reflecting in UI

Solved!
ananth
Level 3
static webresource is not getting file update is not reflecting in UI

we have JSON file in static web resource and in webapp UI we are trying to get the JSON value updated in <Select>, it works fine, but wen we update the JSON with new values, dropdown still shows old value and not the new updated value in preview, if we rename the file and update the JS script it works, if we change it back to old name still getting the old value not the updated value,

 

any way to refresh this?

2 Solutions
Alex_Combessie
Dataiker Alumni

Unfortunately, I cannot reproduce the issue using the same code you provided. Could you please:

1. Make sure all your changes have been saved in static resources:

Screenshot 2020-06-15 at 17.25.08.png

2. Hard refresh your browser page and refresh the preview of the webapp

3. Make sure there are no errors in your browser console

If that doesn't work, please send us the complete stack of your console.

View solution in original post

Alex_Combessie
Dataiker Alumni

Great, glad to hear it is solved. The second error from api.rollbar.com is not related to DSS. I would advise contacting https://rollbar.com/. 

View solution in original post

12 Replies
Alex_Combessie
Dataiker Alumni

Hi,

By design, static resources are not meant to be dynamically updated.

I suggest using a DSS managed folder to store this JSON file and perform read/write operations from your webapp. I invite you to read more on the Dataiku API for managed folders:  https://doc.dataiku.com/dss/latest/connecting/managed_folders.html#usage-in-python

Best regards,

Alex

ananth
Level 3
Author

HI @Alex_Combessie ,

this is case for html CSS as well, in case if any new CSS styles has been added to existing .css file its not reflecting is this also by design? so any new styles in future cannot be added to existing file? under static web resource? 

0 Kudos
Alex_Combessie
Dataiker Alumni

Hi,

CSS can be added using 2 methods:

1. editing the "CSS tab" on the DSS web app development interface

Screenshot 2020-06-12 at 17.37.57.png

2. adding a CSS file in static resources and referencing it in your HTML and CSS tabs 

I invite you to use the built-in "Simple webapp to get started" example to understand how HTML, CSS, JS and Python work together.

Screenshot 2020-06-12 at 17.38.19.png

You can also read more on web app development in DSS in our new Academy tutorial: https://academy.dataiku.com/latest/tutorial/webapps/standard.html

Hope it helps,

Alex

0 Kudos
ananth
Level 3
Author

6-12-2020 12-16-11 PM.pngHi @Alex_Combessie ,

 

i am using  CSS file in static resources and referencing it in your HTML and any update in those CSS or jquery file its not reflecting.

 

 

0 Kudos
Alex_Combessie
Dataiker Alumni

Hi,

First, try clicking on the "Refresh" button on the top right:

Screenshot 2020-06-12 at 17.37.57.png

If that doesn't work, make sure that your CSS and JS files are all properly referenced in the header of your HTML:

 

<head>
    <link rel="stylesheet" href="/static/<.../yourStyleSheet.css>" />
    <script src="/static/<.../yourScript.js>", type="text/javascript"></script>
</head>

 

(and refresh again)

Best regards,

Alex

0 Kudos
ananth
Level 3
Author

<script type="text/javascript">
var countryurl = '/local/static/JSON/CountryRegion.json';
var Subjectareaurl = '/local/static/JSON/SubjectArea.json';
//var countryurl = 'JSONData/country.js';
//var Subjectareaurl = 'JSONData/SubjectArea.js';

$(document).ready(function () {
loadcountryregion();

});
function loadcountryregion() {
var lstCountryorRegiondropdown = document.getElementById('lstCountryorRegion');
lstCountryorRegiondropdown.length = 0;

var defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';

//dropdown.add(defaultOption);
//dropdown.selectedIndex = 0;

 

var request = new XMLHttpRequest();
request.open('GET', countryurl, true);

request.onload = function () {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
var option;
for (var i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].label;
option.value = data[i].value;
lstCountryorRegiondropdown.add(option);
}
} else {
// Reached the server, but it returned an error
}
}

request.onerror = function () {
console.error('An error occurred fetching the JSON from ' + url);
};

request.send();
}

</script>

<html>

<select id="lstCountryorRegion" multiple="multiple" class="selectpicker">
</select>

</html>

 

JSON file as below

 

[{
"label": "Afghanistan",
"value": "af"
}, {
"label": "ร…land Islands",
"value": "ax"
}, {
"label": "Albania",
"value": "al"
}, {
"label": "Algeria",
"value": "dz"
}, {
"label": "American Samoa",
"value": "as"
}, {
"label": "Andorra",
"value": "ad"
}, {
"label": "Angola",
"value": "ao"
}, {
"label": "Anguilla",
"value": "ai"
}, {
"label": "Antarctica",
"value": "aq"
}, {
"label": "Antigua and Barbuda",
"value": "ag"
}, {
"label": "Argentina",
"value": "ar"
}, {
"label": "Armenia",
"value": "am"
}, {
"label": "Aruba",
"value": "aw"
}, {
"label": "Australia",
"value": "au"
}, {
"label": "Austria",
"value": "at"
}, {
"label": "Azerbaijan",
"value": "az"
}, {
"label": "Bahamas",
"value": "bs"
}, {
"label": "Bahrain",
"value": "bh"
}, {
"label": "Bangladesh",
"value": "bd"
}, {
"label": "Barbados",
"value": "bb"
}, {
"label": "Belarus",
"value": "by"
}, {
"label": "Belgium",
"value": "be"
}, {
"label": "Belize",
"value": "bz"
}, {
"label": "Benin",
"value": "bj"
}, {
"label": "Bermuda",
"value": "bm"
}, {
"label": "Bhutan",
"value": "bt"
}, {
"label": "Bolivia, Plurinational State of",
"value": "bo"
}, {
"label": "Bonaire, Sint Eustatius and Saba",
"value": "bq"
}, {
"label": "Bosnia and Herzegovina",
"value": "ba"
}, {
"label": "Botswana",
"value": "bw"
}, {
"label": "Bouvet Island",
"value": "bv"
}, {
"label": "Brazil",
"value": "br"
}, {
"label": "British Indian Ocean Territory",
"value": "io"
}, {
"label": "Brunei Darussalam",
"value": "bn"
}, {
"label": "Bulgaria",
"value": "bg"
}, {
"label": "Burkina Faso",
"value": "bf"
}, {
"label": "Burundi",
"value": "bi"
}, {
"label": "Cambodia",
"value": "kh"
}, {
"label": "Cameroon",
"value": "cm"
}, {
"label": "Canada",
"value": "ca"
}, {
"label": "Cape Verde",
"value": "cv"
}, {
"label": "Cayman Islands",
"value": "ky"
}, {
"label": "Central African Republic",
"value": "cf"
}, {
"label": "Chad",
"value": "td"
}, {
"label": "Chile",
"value": "cl"
}, {
"label": "China",
"value": "cn"
}, {
"label": "Christmas Island",
"value": "cx"
}, {
"label": "Cocos (Keeling) Islands",
"value": "cc"
}, {
"label": "Colombia",
"value": "co"
}, {
"label": "Comoros",
"value": "km"
}, {
"label": "Congo",
"value": "cg"
}, {
"label": "Congo, the Democratic Republic of the",
"value": "cd"
}, {
"label": "Cook Islands",
"value": "ck"
}, {
"label": "Costa Rica",
"value": "cr"
}, {
"label": "Cรดte d'Ivoire",
"value": "ci"
}, {
"label": "Croatia",
"value": "hr"
}, {
"label": "Cuba",
"value": "cu"
}, {
"label": "Curaรงao",
"value": "cw"
}, {
"label": "Cyprus",
"value": "cy"
}, {
"label": "Czech Republic",
"value": "cz"
}, {
"label": "Denmark",
"value": "dk"
}, {
"label": "Djibouti",
"value": "dj"
}, {
"label": "Dominica",
"value": "dm"
}, {
"label": "Dominican Republic",
"value": "do"
}, {
"label": "Ecuador",
"value": "ec"
}, {
"label": "Egypt",
"value": "eg"
}, {
"label": "El Salvador",
"value": "sv"
}, {
"label": "Equatorial Guinea",
"value": "gq"
}, {
"label": "Eritrea",
"value": "er"
}, {
"label": "Estonia",
"value": "ee"
}, {
"label": "Ethiopia",
"value": "et"
}, {
"label": "Falkland Islands (Malvinas)",
"value": "fk"
}, {
"label": "Faroe Islands",
"value": "fo"
}, {
"label": "Fiji",
"value": "fj"
}, {
"label": "Finland",
"value": "fi"
}, {
"label": "France",
"value": "fr"
}, {
"label": "French Guiana",
"value": "gf"
}, {
"label": "French Polynesia",
"value": "pf"
}, {
"label": "French Southern Territories",
"value": "tf"
}, {
"label": "Gabon",
"value": "ga"
}, {
"label": "Gambia",
"value": "gm"
}, {
"label": "Georgia",
"value": "ge"
}, {
"label": "Germany",
"value": "de"
}, {
"label": "Ghana",
"value": "gh"
}, {
"label": "Gibraltar",
"value": "gi"
}, {
"label": "Greece",
"value": "gr"
}, {
"label": "Greenland",
"value": "gl"
}, {
"label": "Grenada",
"value": "gd"
}, {
"label": "Guadeloupe",
"value": "gp"
}, {
"label": "Guam",
"value": "gu"
}, {
"label": "Guatemala",
"value": "gt"
}, {
"label": "Guernsey",
"value": "gg"
}, {
"label": "Guinea",
"value": "gn"
}, {
"label": "Guinea-Bissau",
"value": "gw"
}, {
"label": "Guyana",
"value": "gy"
}, {
"label": "Haiti",
"value": "ht"
}, {
"label": "Heard Island and McDonald Islands",
"value": "hm"
}, {
"label": "Holy See (Vatican City State)",
"value": "va"
}, {
"label": "Honduras",
"value": "hn"
}, {
"label": "Hong Kong",
"value": "hk"
}, {
"label": "Hungary",
"value": "hu"
}, {
"label": "Iceland",
"value": "is"
}, {
"label": "India",
"value": "in"
}, {
"label": "Indonesia",
"value": "id"
}, {
"label": "Iran, Islamic Republic of",
"value": "ir"
}, {
"label": "Iraq",
"value": "iq"
}, {
"label": "Ireland",
"value": "ie"
}, {
"label": "Isle of Man",
"value": "im"
}, {
"label": "Israel",
"value": "il"
}, {
"label": "Italy",
"value": "it"
}, {
"label": "Jamaica",
"value": "jm"
}, {
"label": "Japan",
"value": "jp"
}, {
"label": "Jersey",
"value": "je"
}, {
"label": "Jordan",
"value": "jo"
}, {
"label": "Kazakhstan",
"value": "kz"
}, {
"label": "Kenya",
"value": "ke"
}, {
"label": "Kiribati",
"value": "ki"
}, {
"label": "Korea, Democratic People's Republic of",
"value": "kp"
}, {
"label": "Korea, Republic of",
"value": "kr"
}, {
"label": "Kuwait",
"value": "kw"
}, {
"label": "Kyrgyzstan",
"value": "kg"
}, {
"label": "Lao People's Democratic Republic",
"value": "la"
}, {
"label": "Latvia",
"value": "lv"
}, {
"label": "Lebanon",
"value": "lb"
}, {
"label": "Lesotho",
"value": "ls"
}, {
"label": "Liberia",
"value": "lr"
}, {
"label": "Libya",
"value": "ly"
}, {
"label": "Liechtenstein",
"value": "li"
}, {
"label": "Lithuania",
"value": "lt"
}, {
"label": "Luxembourg",
"value": "lu"
}, {
"label": "Macao",
"value": "mo"
}, {
"label": "Macedonia, the Former Yugoslav Republic of",
"value": "mk"
}, {
"label": "Madagascar",
"value": "mg"
}, {
"label": "Malawi",
"value": "mw"
}, {
"label": "Malaysia",
"value": "my"
}, {
"label": "Maldives",
"value": "mv"
}, {
"label": "Mali",
"value": "ml"
}, {
"label": "Malta",
"value": "mt"
}, {
"label": "Marshall Islands",
"value": "mh"
}, {
"label": "Martinique",
"value": "mq"
}, {
"label": "Mauritania",
"value": "mr"
}, {
"label": "Mauritius",
"value": "mu"
}, {
"label": "Mayotte",
"value": "yt"
}, {
"label": "Mexico",
"value": "mx"
}, {
"label": "Micronesia, Federated States of",
"value": "fm"
}, {
"label": "Moldova, Republic of",
"value": "md"
}, {
"label": "Monaco",
"value": "mc"
}, {
"label": "Mongolia",
"value": "mn"
}, {
"label": "Montenegro",
"value": "me"
}, {
"label": "Montserrat",
"value": "ms"
}, {
"label": "Morocco",
"value": "ma"
}, {
"label": "Mozambique",
"value": "mz"
}, {
"label": "Myanmar",
"value": "mm"
}, {
"label": "Namibia",
"value": "na"
}, {
"label": "Nauru",
"value": "nr"
}, {
"label": "Nepal",
"value": "np"
}, {
"label": "Netherlands",
"value": "nl"
}, {
"label": "New Caledonia",
"value": "nc"
}, {
"label": "New Zealand",
"value": "nz"
}, {
"label": "Nicaragua",
"value": "ni"
}, {
"label": "Niger",
"value": "ne"
}, {
"label": "Nigeria",
"value": "ng"
}, {
"label": "Niue",
"value": "nu"
}, {
"label": "Norfolk Island",
"value": "nf"
}, {
"label": "Northern Mariana Islands",
"value": "mp"
}, {
"label": "Norway",
"value": "no"
}, {
"label": "Oman",
"value": "om"
}, {
"label": "Pakistan",
"value": "pk"
}, {
"label": "Palau",
"value": "pw"
}, {
"label": "Palestine, State of",
"value": "ps"
}, {
"label": "Panama",
"value": "pa"
}, {
"label": "Papua New Guinea",
"value": "pg"
}, {
"label": "Paraguay",
"value": "py"
}, {
"label": "Peru",
"value": "pe"
}, {
"label": "Philippines",
"value": "ph"
}, {
"label": "Pitcairn",
"value": "pn"
}, {
"label": "Poland",
"value": "pl"
}, {
"label": "Portugal",
"value": "pt"
}, {
"label": "Puerto Rico",
"value": "pr"
}, {
"label": "Qatar",
"value": "qa"
}, {
"label": "Rรฉunion",
"value": "re"
}, {
"label": "Romania",
"value": "ro"
}, {
"label": "Russian Federation",
"value": "ru"
}, {
"label": "Rwanda",
"value": "rw"
}, {
"label": "Saint Barthรฉlemy",
"value": "bl"
}, {
"label": "Saint Helena, Ascension and Tristan da Cunha",
"value": "sh"
}, {
"label": "Saint Kitts and Nevis",
"value": "kn"
}, {
"label": "Saint Lucia",
"value": "lc"
}, {
"label": "Saint Martin (French part)",
"value": "mf"
}, {
"label": "Saint Pierre and Miquelon",
"value": "pm"
}, {
"label": "Saint Vincent and the Grenadines",
"value": "vc"
}, {
"label": "Samoa",
"value": "ws"
}, {
"label": "San Marino",
"value": "sm"
}, {
"label": "Sao Tome and Principe",
"value": "st"
}, {
"label": "Saudi Arabia",
"value": "sa"
}, {
"label": "Senegal",
"value": "sn"
}, {
"label": "Serbia",
"value": "rs"
}, {
"label": "Seychelles",
"value": "sc"
}, {
"label": "Sierra Leone",
"value": "sl"
}, {
"label": "Singapore",
"value": "sg"
}, {
"label": "Sint Maarten (Dutch part)",
"value": "sx"
}, {
"label": "Slovakia",
"value": "sk"
}, {
"label": "Slovenia",
"value": "si"
}, {
"label": "Solomon Islands",
"value": "sb"
}, {
"label": "Somalia",
"value": "so"
}, {
"label": "South Africa",
"value": "za"
}, {
"label": "South Georgia and the South Sandwich Islands",
"value": "gs"
}, {
"label": "South Sudan",
"value": "ss"
}, {
"label": "Spain",
"value": "es"
}, {
"label": "Sri Lanka",
"value": "lk"
}, {
"label": "Sudan",
"value": "sd"
}, {
"label": "Suriname",
"value": "sr"
}, {
"label": "Svalbard and Jan Mayen",
"value": "sj"
}, {
"label": "Swaziland",
"value": "sz"
}, {
"label": "Sweden",
"value": "se"
}, {
"label": "Switzerland",
"value": "ch"
}, {
"label": "Syrian Arab Republic",
"value": "sy"
}, {
"label": "Taiwan, Province of China",
"value": "tw"
}, {
"label": "Tajikistan",
"value": "tj"
}, {
"label": "Tanzania, United Republic of",
"value": "tz"
}, {
"label": "Thailand",
"value": "th"
}, {
"label": "Timor-Leste",
"value": "tl"
}, {
"label": "Togo",
"value": "tg"
}, {
"label": "Tokelau",
"value": "tk"
}, {
"label": "Tonga",
"value": "to"
}, {
"label": "Trinidad and Tobago",
"value": "tt"
}, {
"label": "Tunisia",
"value": "tn"
}, {
"label": "Turkey",
"value": "tr"
}, {
"label": "Turkmenistan",
"value": "tm"
}, {
"label": "Turks and Caicos Islands",
"value": "tc"
}, {
"label": "Tuvalu",
"value": "tv"
}, {
"label": "Uganda",
"value": "ug"
}, {
"label": "Ukraine",
"value": "ua"
}, {
"label": "United Arab Emirates",
"value": "ae"
}, {
"label": "United Kingdom",
"value": "gb"
}, {
"label": "United States",
"value": "us"
}, {
"label": "United States Minor Outlying Islands",
"value": "um"
}, {
"label": "Uruguay",
"value": "uy"
}, {
"label": "Uzbekistan",
"value": "uz"
}, {
"label": "Vanuatu",
"value": "vu"
}, {
"label": "Venezuela, Bolivarian Republic of",
"value": "ve"
}, {
"label": "Viet Nam",
"value": "vn"
}, {
"label": "Virgin Islands, British",
"value": "vg"
}, {
"label": "Virgin Islands, U.S.",
"value": "vi"
}, {
"label": "Wallis and Futuna",
"value": "wf"
}, {
"label": "Western Sahara",
"value": "eh"
}, {
"label": "Yemen",
"value": "ye"
}, {
"label": "Zambia",
"value": "zm"
}, {
"label": "Zimbabwe",
"value": "zw"
}, {
"label": "Others",
"value": "others"
}, {
"label": "Asia-Pacific North",
"value": "apac"
}, {
"label": "Australia and New Zealand",
"value": "anz"
}, {
"label": "Asia Pacific and Japan",
"value": "apj"
}, {
"label": "Belgium, Netherlands and Luxembourg.",
"value": "benelux"
}, {
"label": "Brazil, Russia, India, China and South Africa.",
"value": "brics"
}, {
"label": "Caribbean and Latin America",
"value": "cala"
}, {
"label": "Central and Eastern Europe, the Middle East and Africa",
"value": "cema"
}, {
"label": "Central and Eastern Europe",
"value": "cee"
}, {
"label": "Germany (D), Austria (A) and Switzerland (CH), widely used acronym in the German speaking area",
"value": "dach"
}, {
"label": "Germany, Austria and Switzerland (for the countries' respective names in German Deutschland, ร–sterreich, and Schweiz)",
"value": "dos"
}, {
"label": "Europe, the Middle East and Africa",
"value": "emea"
}, {
"label": "Europe, the Middle East, Africa and India.",
"value": "emeia"
}, {
"label": "Europe, the Middle East, Africa and Commonwealth of Independent States.",
"value": "emeacis"
}, {
"label": "Europe, Middle East, Africa and Caribbean.",
"value": "emeac"
}, {
"label": "Eastern Europe, Middle East and Africa. Some companies separate their Eastern European business from the rest of Europe, and refer to the EEMEA region separately from the Western/Central European (EU/EFTA) region.",
"value": "eemea"
}, {
"label": "Mainland China, Hong Kong, Macau, and Taiwan",
"value": "greater-china"
}, {
"label": "(International Developed Markets) Europe, Japan, Korea, Australia, etc -- total 57 countries",
"value": "idm"
}, {
"label": "India, Middle East and Africa",
"value": "imea"
}, {
"label": "Latin America",
"value": "latam"
}, {
"label": "Middle East, Africa, Russia and Turkey.",
"value": "mart"
}, {
"label": "Middle East and North Africa.",
"value": "mena"
}, {
"label": "Middle East and Pakistan.",
"value": "mep"
}, {
"label": "Middle East, Monaco and China",
"value": "memc"
}, {
"label": "North Atlantic and Central Europe",
"value": "nace"
}, {
"label": "North Africa, Middle East and Turkey",
"value": "namet"
}, {
"label": "North American Region, Canada and the US, NORAM (Mexico is included)",
"value": "noram"
}, {
"label": "North America and Latin America",
"value": "nala"
}, {
"label": "North American Free Trade Agreement",
"value": "nafta"
}, {
"label": "Portugal, Italy, Greece and Spain. (Some later variants include Ireland and Great Britain; PIIGS or PIIGGS)",
"value": "pigs"
}, {
"label": "South-East Asia.",
"value": "sea"
}, {
"label": "Southern Europe, Middle East and Africa.",
"value": "semea"
}, {
"label": "South-Eastern Europe, Middle East and Africa.",
"value": "seemea"
}, {
"label": "Global",
"value": "glb"
}
]

 

6-12-2020 2-23-28 PM.png

if we update this json its not reflecting in dropdown is this expected by design? if we need to add new value in future not now bun case if we need to add new region if we edit existing JSON its not reflecting.

 

0 Kudos
Alex_Combessie
Dataiker Alumni

The URL of CountryRegion.json is incorrect, as visible in the browser console:

Screenshot 2020-06-15 at 10.36.04.png

Based on your chosen structure for static resources you need to set:

 

var countryurl = '/local/static/JS/JSON/CountryRegion.json'

 

ananth
Level 3
Author

HI @Alex_Combessie 

 

i have my JSON in root not under JS folder and i donot have any 404 error as in my javascript i have 

6-15-2020 10-56-59 AM.png

var countryurl = '/local/static/JSON/CountryRegion.json';
var Subjectareaurl = '/local/static/JSON/SubjectArea.json';

 

now i have updated the json with new lable "Single Brand2 - Zoledronic-acid" (updated Single Brand1 - Zoledronic-acid)

"{
"label": "Single Brand2 - Zoledronic-acid",
"value": "zol-a""
 }

i did refresh -> clicked on preview also tried to refresh the whole page and checked still seeing the old value

6-15-2020 10-59-58 AM.png

 

0 Kudos
Alex_Combessie
Dataiker Alumni

Unfortunately, I cannot reproduce the issue using the same code you provided. Could you please:

1. Make sure all your changes have been saved in static resources:

Screenshot 2020-06-15 at 17.25.08.png

2. Hard refresh your browser page and refresh the preview of the webapp

3. Make sure there are no errors in your browser console

If that doesn't work, please send us the complete stack of your console.

ananth
Level 3
Author

Hi @Alex_Combessie ,

 

thanks you for the details, i was clicking on address bar and clicking enter and also reload button in browser, Ctrl and press F5 worked, i am able to see updated changes now. thanks for helping me

 

as far as console error i could see below error, for now no issue i could see because of this error. do you have any idea about this?

 

zone.js:3331 POST https://api.rollbar.com/api/1/item/ 429

{
"err": 1,
"message": "Over plan monthly limit and overages disabled. Project id 62598 access token 9193daa4de9e4aa38aac29a46e7c0c86."
}

 

6-15-2020 1-38-37 PM.png6-15-2020 1-38-18 PM.png

 

 

0 Kudos
Alex_Combessie
Dataiker Alumni

Great, glad to hear it is solved. The second error from api.rollbar.com is not related to DSS. I would advise contacting https://rollbar.com/. 

ananth
Level 3
Author

thank you @Alex_Combessie