CODEWITHSUNDEEP
htmlhidden
olamundo
olamundo

Reputation: 24991

storing additional data on a html page

I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else? is there some standard way?

Upvotes: 1

Views: 401

Answers (7)

zamuka
zamuka

Reputation: 941

For small amounts of additional data you can use HTML5 "data-*" attribute 

<div id="mydiv" data-rowindex="45">

then access theese fields with jQuery data methods

$("#mydiv").data("rowindex")

or select item by attribute value

$('div[data-rowindex="45"]')

attach additional data to element 

$( "body" ).data( "bar", { myType: "test", count: 40 } );

Upvotes: 0

austin cheney
austin cheney

Reputation:

You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.

Then use JavaScript to change the style of the container when you are ready:

var blockit = function () {
    var container = document.getElementById("containerid");
    container.style.display = "block";
};

Upvotes: 0

Nick Larsen
Nick Larsen

Reputation: 18877

Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.

Upvotes: 0

James Black
James Black

Reputation: 41848

If I need to put some information in the html that will be used by the javascript then I use 

<input id="someuniqueid" type="hidden" value="..." />

Upvotes: 0

Matthew Scharley
Matthew Scharley

Reputation: 132504

I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.

Upvotes: 1

cletus
cletus

Reputation: 625397

One of:

  1. Hidden input fields (if you want to submit it back to the server); or
  2. Hidden elements on the page (hidden by CSS).

Each has applications.

If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.

Upvotes: 0

Martin v. L&#246;wis
Martin v. L&#246;wis

Reputation: 127567

I don't think there is a standard way; I would store them in JavaScript source code.

Upvotes: 1

Related Questions