3
\$\begingroup\$

I have been working with AJAX and JSON for quite some years now, but to be honest I still do not know exactly what all the functionality are, and how to create optimized code for jQuery.

So my first question: Does anyone know a good tutorial, or better even a cheatsheet where are the functionalities are explained. I have Googled and looked at the normal jQuery documentation for years now, but I still can't manage to think in optimized paterns, if that makes any sense at all.

Now to illustrate this with a relevant problem. Currently I am developing a small public plugin that adds various counters to posts, nothing special here.

<ul id="container-60">
  <li class="counter-x">&nbsp;</li>
  <li class="counter-y">&nbsp;</li>
  <li class="counter-z">&nbsp;</li>
</ul>

<ul id="count-container-64">
  <li class="counter-x">&nbsp;</li>
  <li class="counter-y">&nbsp;</li>
  <li class="counter-z">&nbsp;</li>
</ul>

Now this has to be filled. The best way I could make this work is with the following json sting:

{ "posts" : 
    { "60" : 
        { "x" : "100", "y" : "200" , "z" : "300" }
    },
    { "64" : 
        { "x" : "400", "y" : "500" , "z" : "560" }
    }
}

Now as for the ajax there is a double loop:

    // AJAX blah blah blah above
success : function( data ){
    posts = data.posts;
    jQuery.each( posts, function( post_id, post_counts ) {
        jQuery.each( post_counts, function( item_name, item_count ) {
            jQuery( '#container-' + post_id + ' .counter-' + item_name ).text( item_count );
        });
    });
}

Now this works fine, but I bet there is a better way for doing this. Maybe change the json string to a more optimized version for doing things quicker.

jQuery has so many special functions.

Anyone have any suggestions.

\$\endgroup\$
  • \$\begingroup\$ I assume $async is jQuery \$\endgroup\$ – Neal Nov 14 '11 at 20:57
  • \$\begingroup\$ Oh oeps, Yeah Ill edit that out, it was for name collisions. \$\endgroup\$ – Saif Bechan Nov 14 '11 at 21:46
2
\$\begingroup\$

I don't think that I can give reasons why this is better (i.e. faster). Only I feel that it is more readable and scalable.

I like to use the data attributes for information like ids. For a long time, classes were the way to go but we had to deal with cluttered classes :(. Data attributes keep things cleaner in my opinion–plus it makes it easier to have multiple counters on the page.

<ul class="container">
  <li class="counter" data-counter="60-x">x</li>
  <li class="counter" data-counter="60-y">y</li>
  <li class="counter" data-counter="60-z">z</li>
</ul>

<ul class="container">
  <li class="counter" data-counter="64-x">x</li>
  <li class="counter" data-counter="64-y">y</li>
  <li class="counter" data-counter="64-z">z</li>
</ul>

Using the same data:

var data = {
    "posts": {
        "60": { "x" : "100", "y" : "200" , "z" : "300" },
        "64": { "x" : "400", "y" : "500" , "z" : "560" }
    }
};

And then using javascripts for-in:

var posts = data.posts;

for(var item in posts) {
    for(var counter in posts[item]) {
        var selector = "[data-counter=" + item + "-" + counter + "]",
            count = posts[item][counter];

        $(selector).text(count);   
    }
}
\$\endgroup\$
  • \$\begingroup\$ +1 Hi, this looks amazing.Fir starters I have never seen the for-in loop in JavaScript, but it looks like the best way to go. Why resort to frameworks when you can use build in functions. Next thing, I have never seen the data attributes, I have to look this up, but it looks great. I can use this for a lot of my other project. One thing I question, does this pass html validation and is it browser compatible. As I have never seen it before. Thanks for teaching me some new things. \$\endgroup\$ – Saif Bechan Nov 15 '11 at 3:04
  • \$\begingroup\$ @SaifBechan data attributes are common in html 5. They should also pass html 4 validation. XHTML strict probably won't pass. \$\endgroup\$ – natedavisolds Nov 15 '11 at 3:50
  • \$\begingroup\$ Yes, I've already implemented it, read in on all the features, and am looking at ways to implement this in some other projects. Works out great and no complaints from eclipse or any other validations. \$\endgroup\$ – Saif Bechan Nov 15 '11 at 4:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.