For a project I am trying to create an ajax-powered treeview control. My ajax scripts are working fine on the back end, but the tree is not being displayed properly. When I hard code the ajax response into my tree container, it is displayed properly:
However, when I try to load the tree via ajax I get this:
Here is my JS code:
$(document).ready(function() {
function customMenu(node) {
var items = {
createItem : {
label : "Generate random number(s)",
action: function() {
console.log("Creating children...");
var selectedId = $("#treeview").jstree("get_selected").attr("id");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "libs/add.php",
data: "fact_id=" + selectedId,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
}
}
return items;
}
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"], contextmenu: {items: customMenu, select_node: true}
});
$.ajax({
url: "libs/display.php",
dataType: "json"
}).success(function(data) {
$("#treeview ul").append(data);
});
});
Does anyone have any idea what my problem is? Any help would be appreciated.
EDIT
After looking closer, I realize that the exact problem is that the necessary classes are not being added to the child nodes when calling via ajax. Still, I'm not sure why.
ANOTHER EDIT
display.php now contains this response text:
[
{
"attr": {
"id": 1
},
"data": 649,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 108,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 86,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 46,
"state": "closed"
}
]
Am I headed in the right direction?
Is your stylesheet being included, and have you set up correct URLs to the icons? It looks to me like that's why your data isn't being styled. However, looking at your code, a more likely reason that you aren't getting your styling is because you are just calling an arbitrary AJAX call outside the jsTree scope.
Take a look at the docs for the json_data plugin for jsTree. It's easy to use, provided you set up display.php correctly to only fetch the node that jsTree is requesting. It will make concurrent calls and get the nodes it needs, your script simply needs to serve them to it:
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"],
"contextmenu": {
items: customMenu,
select_node: true
},
"json_data": {
"ajax": {
"url": "libs/display.php",
"data": function(n) {
return { id : n.attr ? n.attr("id") : 0
}
}
}
});
The json_data plugin basically acts as a wrapper for a jQuery AJAX call, but the events are bound directly the jsTree core and the returned results are handled by jsTree. You'll probably need to tweak your return values a bit depending on what display.php is responding with, and what you have set your tree up to look like structurally.
Edit
This is a similar post that might help you:
jsTree and AJAX > Load all data via ajax
Related
I am adding the jQuery Autocomplete plugin to my project. I have a source value which is an array of objects (from a mySQL database). I am unable to map them into desired format of autocomplete.
This is the data want to map:
[{
"value": "730",
"label": "iPhone"
}, {
"value": "731",
"label": "Screen Protector"
}, {
"value": "732",
"label": "Maxboost"
}, {
"value": "733",
"label": "JETech"
}, {
"value": "734",
"label": "Mr Shield"
}]
$("#product_one").autocomplete({
source: $.ajax({
type: "GET",
url: "/wp-json/product/product-info/",
success: function(res) {
$.each(res, function(key, val) {
return {
"label": val.label,
"value": val.value
}
});
}
});
});
Any suggestion or modification of question would be appreciated.
The issue is because you're providing source with a jqXHR object, not an array, string or function as it expects (docs)
Given the use of AJAX, it would make the most sense for you to use provide a function which uses the request and response arguments. Also note that as the data you retrieve is already in the correct format (ie. an array of objects with label and value properties), you can provide it directly to response() without needing to loop through it. Try this:
$("#product_one").autocomplete({
source: function(request, response) {
$.ajax({
type: "GET",
url: "/wp-json/product/product-info/",
success: function(data) {
response(data);
}
});
}
});
You should first load your data and then set them as the source of the autocomplete.
$.ajax({
type:"GET",
url: "/wp-json/product/product-info/",
success:function(res){
//Based on your object creation, it looks that you can directly use the response
$( "#product_one" ).autocomplete(res);
}
});
DataTable initialisation, give it the server url location
oTable = $('.entrys_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "entrys_table_server_side_source",
"type": "POST"
},
"language": {
"infoFiltered": " - filtered from _MAX_ records"
},
"columns": [
{ data: "engine" },
{ data: "browser" },
]
})
yadcf.init(oTable, [
{
column_number: 0,
filter_container_id: 'account1',
filter_type: 'select',
},
{
column_number: 1,
filter_container_id: 'account2',
filter_type: 'select',
},
], { externally_triggered: true });
But I would like to ask how to make yadcf URL location is different?
More hope is that each option can have a separate URL location?
And let the option can be updated independently of the data (again to the server to get the latest information)
Any help is appreciated.
The only possible way that can I think of is to use yadcf along with third party select plugin (chosen / select2) and load its data using ajax
Something like Jquery Chosen plugin - dynamically populate list by Ajax or Select2 Ajax (remote data)
In addition please take a look at the following issue that was eventually resolved and looks like it might be useful for you
ajax populated fields + externally_triggered + server_side removing fields value
I have been trying to make this work for sometime and its I cannot seem to find the solution to make this work.
I am able to output JSON with my coldfusion CFC without issue, not I am trying to use this JSON with Highcharts.js. I have verified that the JSON is valid but highcharts seems to have an issue because in the series data there is double quotes surrounding the data. I've looked everywhere for a solution and I cannot seem to find any help that can set me on the right path. If I remove the double quotes from around the array in the series.data the chart loads in fine but I get away from it being dynamic.
Here is my JSON output from my CFC:`
{
"series": [{
"data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),2.9],[Date.UTC(2017,06,04),3.1],[Date.UTC(2017,06,11),2.9]]",
"name": "ATC Main Pod A - B - C"
}, {
"data": "[[Date.UTC(2017,05,21),2.8],[Date.UTC(2017,05,28),2.6],[Date.UTC(2017,06,04),2.9],[Date.UTC(2017,06,11),2.9]]",
"name": "ATC Mays (ACB Blue)"
}, {
"data": "[[Date.UTC(2017,05,21),2.4],[Date.UTC(2017,05,28),2.6],[Date.UTC(2017,06,04),3],[Date.UTC(2017,06,11),3.2]]",
"name": "ATC Mays (ACB Purple)"
}, {
"data": "[[Date.UTC(2017,05,21),3.3],[Date.UTC(2017,05,28),3.3],[Date.UTC(2017,06,04),3.4],[Date.UTC(2017,06,11),3.3]]",
"name": "ATC R10 Pod D"
}, {
"data": "[[Date.UTC(2017,05,21),3.3],[Date.UTC(2017,05,28),3.4],[Date.UTC(2017,06,04),2.8],[Date.UTC(2017,06,11),1.9]]",
"name": "ATC TU Pod A - B"
}, {
"data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),2.9],[Date.UTC(2017,06,04),3.1],[Date.UTC(2017,06,11),3.4]]",
"name": "CTRC 1st Floor"
}, {
"data": "[[Date.UTC(2017,05,21),2.9],[Date.UTC(2017,05,28),3.3],[Date.UTC(2017,06,04),3.2],[Date.UTC(2017,06,11),2.3]]",
"name": "CTRC 2nd Floor"
}]
}
Here is what my ajax call looks like:
function loadChartData(c){
$.ajax({type: "POST", url: "CFCs/survey.cfc", data: {method:"results_RLU", CENTERID: c},dataType: 'json',success: function(data){
options.series = data.series
var chart = new Highcharts.Chart(options)
}
});
}
Not a problem!
Simply iterate each item in the series and parse the data to valid JSON object.
Enjoy :)
function loadChartData(c){
$.ajax({type: "POST", url: "CFCs/survey.cfc", data: {method:"results_RLU", CENTERID: c},dataType: 'json',success: function(data){
options.series = data.series.map(function(item)
{
item.data = JSON.parse(item.data);
return item;
});
var chart = new Highcharts.Chart(options)
}
});
}
Apologies in advance - I am new to this and so other answers have not been able to help me.
I have used AJAX to send data to a PHP script (part of a 3rd party API). The PHP script returns the results as JSON, but I have no idea how to format these on my HTML page.
Ultimately, I would like to save the JSON results as an array and then use JS/Jquery to format them on the page.
I am not sure how to modify the PHP and AJAX scripts to achieve this. Can anyone point me in the right direction?
My AJAX:
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {toPostcode: toPostcodeValue, parcelLengthInCMs: parcelLengthInCMsValue, parcelHeighthInCMs: parcelHeighthInCMsValue, parcelWidthInCMs: parcelWidthInCMsValue, parcelWeightInKGs: parcelWeightInKGsValue},
success: function(data) {
<!--NOT SURE WHAT TO PUT HERE-->
}
})
PHP (after the calculator does its thing - not sure if it needs to be changed):
$serviceTypesJSON = json_decode($rawBody);
echo json_encode($serviceTypesJSON);
The expected JSON results should look like:
{
"services": {
"service" : [
{
"code": "AUS_PARCEL_REGULAR",
"name": "Parcel Post (your own packaging)",
"speed": 2,
"price": 6.95,
"max_extra_cover": 5000,
"extra_cover_rule": "100,1.5,1.5",
"icon_url": "http://test-static.npe.auspost.com.au/api/images/pac/regular_post_box.png",
"description": "Based on the size and weight you've entered",
"details": "Check our ",
"delivery_time": "Delivered in up to 3 business days",
"ui_display_order": 1,
"options": {
"option": [
{
"code": "AUS_SERVICE_OPTION_STANDARD",
"name": "Standard Service",
"price": "0.00",
"price_type": "static",
"option_type": "optional",
"ui_display_order": 1
},
{
"code": "AUS_SERVICE_OPTION_SIGNATURE_ON_DELIVERY",
"name": "Signature on Delivery",
"price": 2.95,
"price_type": "static",
"option_type": "optional",
"tooltip": "Signature on Delivery provides you with the peace of mind that your item has been delivered and signed for.",
"ui_display_order": 2,
"suboptions": {
"option": {
"code": "AUS_SERVICE_OPTION_EXTRA_COVER",
"name": "Extra Cover",
"option_type": "optional",
"price_type": "dynamic",
"tooltip": "Extra Cover provides cover for loss, damage or theft of your item and will fully compensate you to the value specified for your item.",
"ui_display_order": 1
}
}
}
]
}
},
You can do two things, if the return data is JSON use dataType: "json" in the AJAX call.
Edit 1
If you are using dataType: "json". Which is more preferred if you are sure the data return is JSON string. data variable in the success will directly give you the JSON object. I think you can access it like data['services'].
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services;
}
Or you can just get the data then use jQuery.parseJSON() to parse the data string into JSON object.
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {
toPostcode: toPostcodeValue,
parcelLengthInCMs: parcelLengthInCMsValue,
parcelHeighthInCMs: parcelHeighthInCMsValue,
parcelWidthInCMs: parcelWidthInCMsValue,
parcelWeightInKGs: parcelWeightInKGsValue
},
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services; //or jsonObj["services"]
}
})
Your success function will never be called if you are using
echo json_encode(); in your php script.
You should add dataType:'json' after type:'POST' and then your success function will get called and will get the result returned by server in data
I am unable to figure out what is the problem with displaying json data..below is the code
var xhrGet1 = dojo.xhrGet({
url: "Page/",
handleAs: "json",
handle: function(response)
{
dojo.byId('json-data').innerHTML = response.questions[0];
}
});
Html
<div id='json-data'></div>
And my json file looks like this
{
"Info": {
"PURPOSE": ".... ",
},
"questions": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}
],
so on...any ideas??
The property handleAs : "json" in your xhr call makes the incoming json automatically eval'ed to javascript objects. So, you have to convert your javascript object back to string using JSON.stringify.
e.g. :
dojo.byId('json-data').innerHTML = JSON.stringify(response.questions[0]);
You can also use dojo.toJson for the same purpose. It uses json.stringify but has the benefit of having a second argument ("prettyprint"), allowing you to pretty-print out of the box, like this :
dojo.byId('json-data').innerHTML = dojo.toJson(response.questions[0], true);
wrap your JSON with PRE and CODE tags.
So:
dojo.byId('json-data').innerHTML = "<pre>code>" + response.questions[0] + "</code></pre>";
Also see: Display JSON as HTML for some libraries that can help you pretty-format your JSON when rendering in the browser