Looking for the best and most simple way to embed and style the data returned from a JSON call, on another web page. Ideally I would like to do this with some sort of simple embed code that someone can place on there page. If not I would like to provide some php code (perhaps along with some css and jquiry) that would allow the user to style the information. themselves. Any ideas would be much appreciated.
Thanks!
The simplest of all embed codes is to supply the html for an iframe - pointing to a (X)HTML document with its own CSS and eventual scripts. Anything else can sure be done, but I wouldn't swear on the simple part...
This is a snippet from an App I working on, I get some data from PHP (JSON), I use "function log" to put the table into a div, you can customize a CSS (div class="yourCSSClass") to get a fancy div.
function log(message, div) {
switch(div){
case 1: $("#log").empty();
$("<div/>").html(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
break;
case 2: $("#log2").empty();
$("<div/>").html(message).prependTo("#log2");
$("#log2").attr("scrollTop", 0);
break;
}
}
$('#item').autocomplete({
source: function(request, response) {
$.ajax({
url: "itemsJson.php",
dataType: "json",
data: {
term: request.term,
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label,
value: item.value,
id: item.id,
name: item.name,
location: item.location,
rfidpic: item.rfidPicture
}
}))
}
})
},
select: function(event, ui) {
log(ui.item ? ( "<table border=0><tbody><tr><td colspan='3'><b>" + ui.item.id + "</b></td><td></td><td><img src='" + ui.item.rfidpic + "' style='margin: 0 right; width=" + "'60'" + " height=" + "'60'" + "'/></td></tr>"
+ "<tr><td colspan='2' align='center'>Name</td><td colspan='2' align='center'>Location</td></tr>"
+ "<tr><td colspan='2' align='center'>" + ui.item.name + "</td><td colspan='2' align='center'>" + ui.item.location + "</td></tr></tbody></table>"
) : "Please select an item" + this.id, 1);
}
});