Friday, March 4, 2011

Best way to include unobtrusive information on a web page

So I've got some scripts I've written which set up a Google map on my page. These scripts are in included in the <head> of my page, and use jQuery to build the map with markers generated from a list of addresses on the page.

However, I have some exact co-ordinate data for each address which the javascript requires to place the markers correctly. This isn't information I want to be visible on the screen to the user, so what's the "best practice" way to put that data into my document?

From stackoverflow

  • If the information should not be visible to the user, it should not stay in the document. The data can stay in a script region for example. However if for various reasons this is not possible, you could use a div with style="display:none" that will hide the information.

  • My first thought was a hidden input with a CSV or similar of the data. Since the data is not really secret, just not for display.

     <input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />

    Then access it with jquery

     var myCoordsCSV = $("#coordinates").val();

    Edit: A below answer mentions JSON which would be a better solution combined with using multiple hidden inputs as pointed out in another answer.

  • I would not reccomend using style to hide something, it will show up in browsers without (or with disabled) css suppor and look strange.

    You could store it in a javascript variable or add a form with hidden values like this (inside an unused form to be sure it validates):

    <form action="#" method="get" id="myHiddenValues">
   <input type="text" name="hiddenval1" id="hiddenval1" value="1234"/>
   <input type="text" name="hiddenval2" id="hiddenval2" value="5678"/>
</form>

    wich you can read and update from javascript.

    joseph.ferris : +1. Clean and not hacky. Works in any browser.
    Gareth : Actually, using a form isn't a great solution because it won't work inside another form. But from the other discussion it seems that an inline script block is probably the most useful solution
    Stein G. Strindhaug : If you need the values inside a form you're actually submitting, then place the hidden values there. If you don't need to submit them, just read and write them through JS place them in a separate form. (The form is just there to make the input tags validate anyway..)

  • Gareth, you may want to take a look at JSON on http://www.json.org/

    Apart from the benefit of compactness it has got strong server side support and should you decide in the future to load the co-ordinates dynamically using HTTPRequest it would be very easy to do so without having to amend the existing script much.

    JSON — JavaScript Object Notation is effectively a native way of serializing JavaScript objects.

    Some examples here: http://www.json.org/example.html

    You can even store all of the address infromation in a JavaScript array of objects recorded in JSON and build the list on the screen dynamically. This will give you the ability to sort, filter and manipulate the addresses easilly in any way you need at "run time".

    The alternative way would be to embrace each address with a tag (a simple div will do) and introduce a new attribute for the tag containing the coordinates:

    <div id="addr1" coordinates="...">
    17 Coldwell Drive<br />
    Blue Mountain<br />
    BA93 1PF<br />
    United Kindom
</div>

    then

    var myCoordsCSV = $("addr1").coordinates;

    You can combine the second approach with JSON (store coordinates object) if you wish or add two attributes for each coordinate or keep a comma delimited list etc.

    The second approach also degrades nicely and is search bot friendly.

    Gareth : Sure, but regardless of the format, embedding

Subscribe to: Post Comments (Atom)