Working on a CMS and wanted to know if anybody could give me some advice on the best way (if possible) of storing json in the DOM. Thinking of storing it in a hidden input but would need to turn into a string (somthing similar to serialize in php?).
I would need to then revert it back into json when ready to use.
I use jquery 1.4.2. Had a look in api but couldn’t seem to find anything.
Any Clues?
Thanks in advance.
thanks for reply, yep that’s what i though. Thought i’d be able to collect data in obj and then insert into an input tag for future use. Here’s my code, what am i doing wrong?
//add custom product to order
$("#custom_product_details a").live("click", function(){
customName = $("input[name='custom_name']").val();
customDesc = $("input[name='custom_description']").val();
bouquetOption = $("select[name='custom_description']").val();
customQuantity = $("input[name='custom_quantity']").val();
customTotalCost = $("input[name='custom_total_cost']").val();
//stock association array
stockAssoc = new Array();
$.each($(".custom_stock_assoc_div"), function(){
producId = $(this).attr('value');
productQuantity = $(this).find("input[name='stock_assoc_quantity']").val();
objectToMerge = {
"productid" : producId,
"quantity" : productQuantity
};
stockAssoc.push(objectToMerge);
});
//create a json object
var customObj = {
"name": customName,
"desc": customDesc,
"bouquet": bouquetOption,
"quantity": customQuantity,
"totalcost": customTotalCost,
"stockassoc": stockAssoc
}
contentToLoad = '<div class="display_custom_item" value="'+customObj+'">';
if(isFinite(customObj.bouquet)){
if(customObj.bouquet != 0){
contentToLoad += "<p class='bouquet_option'>as a <span>"+customObj.bouquet+"</span> Bal Bouq</p>";
}
}
contentToLoad += '<div class="custom_name_display"><p class="name">'+customObj.name+'</p></div><p class="quantity">Quantity: <span>'+customObj.quantity+'</span></p><a href="#"><img src="'+CI_ROOT+'images/anyclues.png"/></a><a href="#"><img src="'+CI_ROOT+'images/page_white_edit.png"/></a><a href="#"><img src="'+CI_ROOT+'images/remove_red.png"/></a></div>';
$("#customs_addorder").prepend(contentToLoad);
alert('added to package');
return false;
});
everything else works as i want apart from this line:
contentToLoad = '<div class="display_custom_item" value="'+customObj+'">';
when i look in DOM is see this
<div value="[object Object]" class="display_custom_item">
it obviously isn’t expanding
thanks for your help. I’m struggling to get my head round this.
JSON, as you probably know, is just a data-interchange format. You can embed a piece of JSON wherever you want – it’s just like regular textual content on the page. You’ll obviously want it to be hidden though – even to readers with CSS disabled. The best way is probably to put it in a script element and change the type to “text/json” or something else (it doesn’t really matter):
<script type="text/json" id="myjson">
{
"foo": "bar",
"bar": 1234
}
</script>
Notice that I’ve given it an ID so that it can be retrieved via JS:
var myjsonEl = document.getElementById('myjson').innerHTML,
json = myjsonEl.text || myjsonEl.textContent || myjsonEl.innerHTML || '';
// Do something with json...