Question

This should be fairly simple; i’m pretty sure I’ve just not understood it.

FYI, the website is using jQuery to run ajax .load() on content.

On my main parent page, in the header I have my nav .load() jQuery code:-

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){

        $('a.nav').click(function() {
            page = $(this).attr('page');
            projID= $(this).attr('projID');

            if($("#mainRight").is(":visible")) { $('#mainRight').hide(200); }

            switch(page) {

            case 'projSettings': $("#mainRight").load("content.php?load=" + page, { projID: projID}); break;
            case 'projMetrics': $("#mainRight").load("content.php?load=" + page, { projID: '5000227' }); break;
            case 'projTags': $("#mainRight").load("content.php?load=" + page, { projID: projID}); break;
            case 'projShare': $("#mainRight").load("content.php?load=" + page, { projID: '5000227' }); break;

            }
            $('#mainRight').show(300);

        });

Now, basically I want the projID to be rememebred for use by other a.nav clicks that don’t supply it.

An linked anchor calling this looks like <a page="projSettings" projID="522" class="nav">Settings</a> and I’d it to save that 522. So, other requests (that don’t have the projID, as the data has been loaded into the DOM for other navs and they don’t know the projID. I hope that makes sense.

So, I’d like to know how to have links like <a page="projSettings" class="nav">settings</a> when the projID has already been used in the previous call.

Any thoughts?

Answer 1

Well, ironically you’re already saving projID globally (better said, within the window object by not using var in your declaration.

So you already can access projID from everywhere in your code, once it’s initialized.

Anyways this is not a good pratice, opposite, it’s a very bad pratice.

The best way I can think of is to create you own application object where you store all your data and access it from there.

var your_application = {
    var foo  = 'bar',
        base = 'ball';        
};

// your_application.foo = 'another bar';

You can push this principle pretty far with using closures and functional programming. An even better solution to store and keep data local and not global (window) could look like

var your_application = function(){
    var foo  = 'bar',
        base = 'ball';  

    return {
        getfoo: function(){
            return foo;
        },
        setfoo: function(newfoo){
            foo = newfoo;
        }
    };
});

var app = your_application();
app.setfoo('foobar!');
alert(app.getfoo());

That is the idea of methodical javascript programming. There a some good books out there, I would recommend to start of with Javascript: the good parts by Douglas Crockford.

Another solution for this should be the jQuery .data() method, which is capable of storing data in a global hash.

// store
$.data(document.body, 'projID', projID);

// access
var foo = $.data(document.body, 'projID');

// remove
$.removeData(document.body, 'projID');