SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    storing json in the DOM

    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.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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):

    Code html4strict:
    <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:

    Code JavaScript:
    var myjsonEl = document.getElementById('myjson').innerHTML,
        json = myjsonEl.text || myjsonEl.textContent || myjsonEl.innerHTML || '';
     
    // Do something with json...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    	
            //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:

    Code:
    		contentToLoad = '<div class="display_custom_item" value="'+customObj+'">';

    when i look in DOM is see this

    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •