ansaurus

Question

On jQuery, Metadata, and XHTML Compliance

Answer 1

+1 A:

Is there any way that you can store the info inside the jQuery data method? Saves cluttering up the markup

For an example see here

snipplr.com/view/9715/the-jquery-data-store/

or the direct documentation

docs.jquery.com/Core/data#name

I have used it a couple of times for storing info about my elements, very useful function that doesn't seem to be know about widely!

Sorry can't post links i'm a new user :(

Nooshu 2009-05-19 16:21:50

Answer 2

+1 A:

Try this:

<html>
<head>


  <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
  <!--Using highlight effect to illustrate-->      
  <script src="scripts/jquery/jquery-ui-highlight.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".jquery-feature-trigger").click(function(){
        $("#target-" + $(this).attr("id")).effect("highlight", {}, 6000);

   });
});
</script>

</head>

<body>

 <div class="jquery-feature-trigger" id="1">Trigger 1</div>
 <div class="jquery-feature-trigger" id="2">Trigger 2</div>
 <div class="jquery-feature-trigger" id="3">Trigger 3</div>
 <div class="jquery-feature-target" id="target-1">Target 1</div>
 <div class="jquery-feature-target" id="target-2">Target 2</div>
 <div class="jquery-feature-target" id="target-3">Target 3</div>   

</body>
</html>

So I have decided to give the target divs the id "target-x" and give the trigger divs the id "x". This way, when you click on trigger x it affects target "target-x".

Notice the line that goes

$("#target-" + $(this).attr("id"))

its at that point that you get the id of the clicked div and concatenate it onto "target-" and that becomes the id of the target div.

Vincent Ramdhanie 2009-05-19 16:23:29

Answer 3

A:

And what about putting inside your div hidden inputs with appropriate names and ids? This way you keep XHTML clear. So you will use like that:

$( "div_name").find( "hidden_input_name").val()

Artem Barger 2009-05-19 16:25:20

Answer 4

+6 A:

You could investigate the jQuery Metadata plugin, which can store JSON metadata in the class attribute (or various other places). Example:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div>

Greg Campbell 2009-05-19 16:27:58

This is basically Option 2

kizzx2 2009-09-03 09:16:53

Answer 5

A:

I don't know exactly what you're doing, but would it possible to make the trigger be an anchor tag and then give the target an id? Like this:

<a href="#target1">Trigger 1</a>
<div id="target1">Target 1</div>

Then you could use jQuery to find the id of the target by looking at the href attribute.

If trigger 1 hides or shows target 1 or scrolls down to it, this method would have the added benefit of still doing something if JavaScript was disabled.

Matt Ephraim 2009-05-19 16:41:38

Answer 6

+4 A:

I would use data- attributes for this now, in spite of XHTML compliance, like this:

<div class="jquery-feature-trigger" data-actson="targetID">Trigger</div>

These are an HTML5 feature, but don't cause any issues in HTML4/XHTML other than not being valid attributes in the validator...but no actual problems result from this.

jQuery also has added built-in support for these since jQuery 1.4.3 in the .data() methods.

Nick Craver 2010-10-26 01:34:03

See also [HTML 5 data- Attributes](http://ejohn.org/blog/html-5-data-attributes/) by John Resig

Pavel Chuchuva 2010-10-26 03:10:51

ansaurus

tags:

views:

answers:

On jQuery, Metadata, and XHTML Compliance

related questions