Better approach than hidden field for storing data in html

Question

I would like to know if there is a better approach for storing data in html content.
At the moment, I got some values ​​stored in my html file using a hidden field. These values ​​are generated by code.

Html:

<input type="hidden" id="hid1" value="generatedValue1" /> <input type="hidden" id="hid2" value="generatedValue2" /> 

And so I get these values ​​on the client side using jquery to pass them to the ajax request.

JQuery

 $.ajax({ data:{ var1 : $('#hid1').val(), var2 : $('#hid2').val() } ); 

So is this the right way to do this, or is there a smoother solution to achieve the same result? Since I do not need these values ​​to publish to the page, send input hidden , probably gross.

Answer 1

If you don’t need those in the form, just make them variables in your JavaScript. To output them, encode them using the JavaScriptSerializer class :

 <% // Presumably somewhere in your C# code... JavaScriptSerializer serializer = new JavaScriptSerializer(); %> <script> var hid1 = <%= serializer.Serialize(valueForHid1) %>; var hid2 = <%= serializer.Serialize(valueForHid2) %>; </script> 

(See note below on global values.)

Using them later:

 $.ajax({ data:{ var1 : hid1, var2 : hid2 } ); 

Globals: as shown in the figure, hid1 and hid2 end as global (in most browsers they are used when you also use hidden fields). I recommend not using global variables, but instead wrapping everything in scope:

 (function() { var hid1 = <%= serializer.Serialize(valueForHid1) %>; var hid2 = <%= serializer.Serialize(valueForHid2) %>; // .... $.ajax({ data:{ var1 : hid1, var2 : hid2 } ); })(); 

If for some reason you need to use global, use only one:

 var myOneGlobal = { hid1: <%= serializer.Serialize(valueForHid1) %>, hid2: <%= serializer.Serialize(valueForHid2) %> }; 

Using this later:

 $.ajax({ data:{ var1 : myOneGlobal.hid1, var2 : myOneGlobal.hid2 } ); 

You can output the entire graph of an object into a single variable (possibly myOneGlobal ) using the serializer:

 <script> var myOneGlobal = <%= serializer.Serialize(objectWithData) %>; </script> 

Answer 2

Usually I add values ​​as data - to the html form:

 <form data-field1="generatedValue1" data-field2="generatedValue2"> ... </form> 

And then, extract them using jQuery:

 ... $form = $( my_selector_to_take_the_form ); data:{ var1 : $('form').attr('data-field1'), var2 : $('form').attr('data-field1') } 

However, you will not post a hidden field

Answer 3

You must use the HTML5 data attribute.

ie <a href="#" data-YOURKEY="YOUR-VALUE">My Link</a>

You can easily access these ie attributes with jQuery

 $(".mylink").attr("data-YOURKEY"); 

John Resig explained this well: http://ejohn.org/blog/html-5-data-attributes/

Also read specifications from HTML5-Doctor http://html5doctor.com/html5-custom-data-attributes/

.. and if you like a little deeper: http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data- * -attributes

Answer 4

You can use the new "HTML5" data attributes. ( http://html5doctor.com/html5-custom-data-attributes/ )

Your codebehind section will do something like this:

 <ul data-listname="{put name here}"> <li data-key="{put key here}> Item1 </li> </ul> 

And then in your jQuery you can do:

 var firstId = $('li').first().data('id'); var list = $('ul').data('listname'); 

Be sure to use lowercase letters after data- I found that otherwise it will not work. You can also set such data as follows:

 $('#something').data('smthgnelse', 'Hi there');