Select2 search won't return the result - javascript

I'm having problem with the search when it Ajax load from json. Let's say I search for Yemen, the Yemen record won't be selected or highlighted.
Here's the full source, any setting not done correctly?
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
jQuery(document).ready(function() {
$('#allowedCountries').select2({
placeholder: 'Select allowed countries',
allowClear:true,
tokenSeparators: [',', ' '],
ajax: {
dataType : "json",
url : "countries2.json",
},
});
});
</script>
</head>
<body>
for select2<Br>
<div style="width:100%">
<select name="allowedCountries" class="js-states form-control" id="allowedCountries"><option></option></select>
</div>
</body>
</html>
Then for json file, sample data
{
"results": [
{
"id": 1,
"text": "Afghanistan"
},
{
"id": 2,
"text": "Aland Islands"
},
{
"id": 3,
"text": "Albania"
},
{
"id": 245,
"text": "Yemen"
},
{
"id": 246,
"text": "Zambia"
},
{
"id": 247,
"text": "Zimbabwe"
}
]
}

Scrolling quickly through the official documentation, could this be a problem?

Related

Surveyjs choicesOrder random except some value

I have a problem with choices order in surveyjs, I want to make random choices order except 1 value (example: camel) always at bottom.
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
I've created an example with your code and latest SurveyJS. It looks ok for me.
Could you please try to update SurveyJS version to the latest. Thanks.
Survey
.StylesManager
.applyTheme("default");
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
$("#surveyElement").Survey({model: survey});
<!DOCTYPE html>
<html>
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.0.53/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.0.53/survey.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>

How do I populate a table with an ajax request from a JSON file

With the following code I am able to populate a datatable table in below format using ajax request.
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: 'dataset1'
},
"columns": [
{
"data": "name"
},
{
"data": "age"
},
{
"data": "gender"
}]
});
However how could I get the same result with a dataset as the one below?
{
"DataSet2" : {
"-L5_3n2zzOprYrfRRowd" : {
"name" : "John",
"age" : "42",
"gender" : "M"
},
"-L5cf-S1s97ZHdy-0YeN" : {
"name" : "Mathew",
"age" : "39",
"gender" : "M"
}
}
}
UPDATE:
Below an update of what I am trying to get accomplished.
The data is different from the above but the idea is the same.
The below works for with a Json file as the shown below.
What I need however is to work with the same data but then from Firebase.
In firebase however each item has a push-key
The desired outcome should be like below.
enter image description here
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MK</title>
<!-- DATATABLES -->
<link rel="stylesheet" type="text/css" href="https://www.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<!-- RESPONSIVENESS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<!-- DATETIMEPICKER -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css">
<!-- DATATABLES FREE EDITOR -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css">
<!-- MYCSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type='text' id="dateTime" class="dateTime" placeholder="Date Time" readonly>
<div id='tableContainer'>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th><!-- COLUMN FOR RESPONSIVENESS -->
<th>INBOUND</th>
<th>ORG</th>
<th>STA</th>
<th>ETA</th>
<th>OUTBOUND</th>
<th>DES</th>
<th>STD</th>
<th>ETD</th>
<th>REMARKS</th>
<th>GATE</th>
<th>WHS</th>
<th>TEST</th>
<th>ARR</th>
</tr>
</thead>
</table>
</div>
</body>
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- DATATABLES -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- RESPONSIVENESS -->
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<!-- DATETIMEPICKER -->
<script src="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<!-- DATATABLES FREE EDITOR -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="datatablesAltEditor.js"></script>
<!-- MYJS -->
<script src="libs.js"></script>
JS:
$("#example").DataTable({
select: 'single',
responsive: true,
paging: true,
pageLength: 25,
order: [
[3, 'asc']
],
ajax: {
url: 'dbs.json',
dataSrc: 'dataset1'
},
"columns": [{
"data": null,
defaultContent: '',
className: 'control',
orderable: false
}, // RESPONSIVENESS
{
"data": "inbound"
},
{
"data": "org"
},
{
"data": "sta"
},
{
"data": "eta"
},
{
"data": "outbound"
},
{
"data": "des"
},
{
"data": "std"
},
{
"data": "etd"
},
{
"data": "remarks"
},
{
"data": "gate"
},
{
"data": "whs"
},
{
"data": null,
render: function(data, type, row) {
return data.flight + ' ' + data.org;
}
},
{
data: "arr"
}
]
});
JSON:
{
"dataset1": [{
"inbound": "MK509",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"outbound": "MK509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"arr": "X"
}, {
"inbound": "RT8101",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"outbound": "RT8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"arr": "X"
}],
"dataset2": [{
"flight": "KIKKER1",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"flight": "KE509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"ciss": "X",
"arr": "X"
}, {
"flight": "KIKKER2",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"flight": "QR8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"ciss": "X",
"arr": "X"
}]
}
Create an array of columns. Get the child for each object and Loop over it using Object.keys() to get value at key. Finally push the data into columns array
let columns = [];
let data = [];
firebase.db().ref("DataSet2").once("value", function(snap){
snap.forEach(snapshot => {
Object.keys(snapshot.val()).map(k => {
columns.push(Object.assign({}, {"data":k}))
data.push(Object.assign({}, {k:snapshot.val()[k]}))
})
})
})
console.log(columns)
console.log(data)
Now assign the columns and data to DataTable
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: data
},
"columns": columns
});

How to render images as dropdown lists using ajax and json?

I want to implement simple drop down list with images as values. I want to use ajax to render images on options lists and send partial post backs when i choose some values from option lists. Here are the codes.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
</head>
<body>
<select id="localeId">
</select>
<script type="text/javascript">
$select = $('#localeId');
$.ajax({
url: '../assets/json/languages.json',
dataType:'JSON',
success:function(data){
$select.html('');
$.each(data.languages, function (key, val) {
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
},
error:function(){
$select.html('<option id="-1">none available</option>');
}
});
</script>
</body>
</html>
This is Json Data.
"languages": [
{
"name": "English",
"id": 1,
"selected": false,
"description": "English",
"imageSrc": "assets/img/flags-icons/en-flag.png"
},
{
"name": "Postegues",
"id": 2,
"selected": false,
"description": "Postegues",
"imageSrc": "assets/img/flags-icons/pt-flag.png"
},
{
"name": "Russian",
"id": 3,
"selected": false,
"description": "Russian",
"imageSrc": "assets/img/flags-icons/ru-flag.png"
},
{
"name": "Spanish",
"id": 4,
"selected": false,
"description": "Spanish",
"imageSrc": "assets/img/flags-icons/es-flag.png"
}
]
The default HTML <select> uses the operating system to render the <opiton> under it. You'll have to build your own "selection/dropdown"-like component.
But, to your fortunate, jQuery has done it for you already!
check out their "select-menu" widget here: http://jqueryui.com/selectmenu/#custom_render

gantt chart using fusion charts. The chart doesn't get rendered a <div> element is created, with Chart type not supported as text

I wanted to create a gantt chart using fusion charts. The chart doesn't get rendered a element is created, with Chart type not supported as text. Using the fusion chart debugger I get an Error that p.init is not a function in fusioncharts.js
This is the code for the gantt chart.
enter code here
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Weekly Project Status Reports</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.gantt.js"></script>
<script type="text/javascript" src="fusioncharts/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
FusionCharts['debugger'].outputTo(function (id, sender,
eventName, eventArgs) {
console.log(id + ': '+eventName + ' from ' + sender+','+eventArgs);
});
FusionCharts['debugger'].outputFormat('verbose');
FusionCharts['debugger'].enable(true);
</script>
<script type="text/javascript">
FusionCharts.ready(function(){
var weeklyStatusChart = new FusionCharts({
"type": "gantt",
"renderAt": "chartContainer",
"width": "1000",
"height": "500",
"dataFormat": "json",
"dataSource": {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Project Gantt",
"subcaption": "From 1st Feb 2007 - 31st Aug 2007"
},
"categories": [
{
"category": [
{
"start": "02/01/2007",
"end": "03/01/2007",
"label": "Feb"
},
{
"start": "03/01/2007",
"end": "04/01/2007",
"label": "Mar"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 50 Customers"
}
]
},
"tasks": {
"task": [
{
"start": "02/04/2007",
"end": "02/10/2007"
},
{
"start": "02/08/2007",
"end": "02/19/2007"
}
]
}
}
})
weeklyStatusChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">--- Weekly Project Status</div>
</body>
</html>
The explicit loading of "fusioncharts.gantt.js" is not required, it will be automatically loaded by "fusioncharts.widgets.js".
If explicit loading is required, try loading "fusioncharts.widgets.js" followed by "fusioncharts.gantt.js"

Load JSON Data Using jQuery AJAX

I need to print this information when clicking a button and sorting if by date, so far i have this: I have json file that looks like this, but I haven't been able to print it on the page and still haven't got to the sorting by date part. I am not sure if the problem is the link to the ajax version i am using or what is the problem, because i saw an example that looks just like this on youtube and it works just fine.
JSON:
  [
{
"users": [
{
"name": "user1",
"Endorsement": "some comment",
"date": "8/11/2012"
},
{
"name": "user2",
"Endorsement": "some comment2",
"date": "9/27/11"
},
{
"name": "user3",
"Endorsement": "some comment3"
},
{
"name": "user4",
"Endorsement": "some comment4",
"date": "4/2/13"
},
{
"name": "user5",
"Endorsement": "some comment5"
},
{
"name": "user6",
"Endorsement": "some comment6",
"date": "3/17/13"
},
{
"name": "user7",
"Endorsement": "some comment7",
"date": "5/22/13"
},
{
"name": "user8",
"Endorsement": "some comment8",
"date": "9/27/13"
}
]
}
]
HTML updated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="shortcut icon" href="stridesFavicon.ico">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="shortcut icon" href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico' />
</head>
<body>
<!--Body content-->
<div id='Div1'>
Get JSON Data
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="myscript.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
JS updated:
$("#clickme").click(function () {
$.getJSON("users.json", function (data) {
var items = [];
$.each(data, function (key, dvalue) {
$.each(dvalue, function (key, value) {
items.push('<li id="' + key + '">' + value + '</li>');
});
});
$('<ul/>', {
'class': 'interest-list',
html: items.join('')
}).appendTo('body');
});
});
But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:
•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
the jason is missing some commas, every line inside the json should end with a comma unless it is the last child in the scope, which makes it:
[
{
"users": [
{
"name": "user1",
"Endorsement": "some comment",
"date": "8/11/2012"
},
{
"name": "user2",
"Endorsement": "some comment2",
"date": "9/27/11"
},
{
"name": "user3",
"Endorsement": "some comment3"
},
{
"name": "user4",
"Endorsement": "some comment4",
"date": "4/2/13"
},
{
"name": "user5",
"Endorsement": "some comment5"
},
{
"name": "user6",
"Endorsement": "some comment6",
"date": "3/17/13"
},
{
"name": "user7",
"Endorsement": "some comment7",
"date": "5/22/13"
},
{
"name": "user8",
"Endorsement": "some comment8",
"date": "9/27/3"
}
]
}
]
try !
$("button").click(function () {
$.getJSON("users.json", function (obj) {
$.each(obj.users, function (key, value) {
$("ul").append("<li>" + value.name + "</li>");
});
});
});
and if there is error then use debug console in browser.
and either make a fiddle or write what is error. and there seems no ul element in your html.
The json is not valid. I validated using http://jsonlint.com/ and it says error at line 6. You left a comma in below part:
"Endorsement": "some comment"
"date":"8/11/2012"
This is the first endorsement-date pair
$("button").click(function () {
$.getJSON("users.json", function (data) {
for (i in data)
{
for (k in data[i]) {
alert(data[i][k]);
}
});
});
$.ajax({
type:'POST',
url:'Default.aspx/GetPro',
data:"{Pid:'"+ faram+"'}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
cache: false,
success: function(msg) {
alert("{Pid:'"+ faram+"'}");
var orders =msg;
if (orders.length > 0) {
test(orders);
}
else {
alert("No Record Found");
}
},
error: function(xhr, textStatus, errorThrown) {
alert(xhr.status);
alert(errorThrown);
alert(xhr.responseText);
}
});
function test(data)
{
for (i in data)
{
//ProductName Is Property Field Of c# Object
alert(data[i]['ProductName'])
}
}

Categories