Survey.StylesManager.applyTheme("defaultV2");
function setOfficialCountryName(params) {
if (params.length < 2)
return;
var country = params[0];
var officialName = params[1];
var survey = this.survey;
if (!country || !country.length) {
survey.clearValue(officialName);
return;
}
survey.setVariable("request_processing", true);
survey.setVariable("request_error", null);
country = country
.charAt(0)
.toUpperCase() + country
.slice(1)
.toLowerCase();
$.ajax({
url: "https://surveyjs.io/api/CountriesExample?name=" + country,
type: "GET",
success: function (data) {
if (!!data && data.length > 0) {
var countryValue = data[0];
survey.setValue(officialName, countryValue.officialName);
survey.setVariable("hasError", false);
} else {
survey.setVariable("hasError", true);
survey.setVariable("request_error", "The country is not found.");
survey.clearValue(officialName);
}
survey.setVariable("request_processing", false);
},
error: function (xhr, ajaxOptions, thrownError) {
survey.setVariable("hasError", true);
survey.setVariable("request_error", "The country is not found.");
survey.clearValue(officialName);
}
});
}
Survey.FunctionFactory.Instance.register("setOfficialCountryName", setOfficialCountryName);
var json = {
"elements": [
{
"type": "text",
"name": "country",
"title": "Please enter the country"
},
{
"type": "html",
"name": "requesting",
"html": "The data is requesting",
"visibleIf": "{request_processing} = true"
},
{
"type": "text",
"name": "name_official",
"title": "Official name is:",
"readOnly": true,
"visibleIf": "{name_official} notempty"
},
{
"type": "html",
"name": "error",
"html": "The following error has happened: <b>{request_error}</b>",
"visibleIf": "{hasError} = true"
}
],
"triggers": [
{
"type": "runexpression",
"expression": "{country} notempty or {country} empty",
"runExpression": "setOfficialCountryName({country}, 'name_official')"
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Run Expression Trigger, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>