CODEWITHSUNDEEP
javascriptjquery
user2413035
user2413035

Reputation:

Call Javascript Function with argument and use argument as a variable name

I've the following snip of a code:

var about = "about.html";

function loadPage(target){
    $("#dashboard").load(target);
}

$(".nav li").click(function(){
    loadPage($(this).attr("class"));
});

So when I click on a button like <li class="about">, target is = about.
But in that way, $("#dashboard").load(target); doesn't load the variable about which is the html-file which I want to load.

So how is it possible to call the variable in this way?

Upvotes: 1

Views: 86

Answers (5)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

You could put the "about" as an object or array reference similar to:

var pageReferences = [];
pageReferences["about"] = "about.html";

var otherReference = {
    "about": "about.html"
};

function loadPage(target) {
    alert(pageReferences[target]);
    alert(otherReference[target]);
    $("#dashboard").load(target);
}

$(".nav li").click(function () {
    loadPage($(this).attr("class"));
});

Both of these alerts will alert "about.html" referencing the appropriate objects.

EDIT: IF you wished to populate the object based on markup you could do:

var otherReference = {};

$(document).ready(function () {
    $('.nav').find('li').each(function () {
        var me = $(this).attr('class');
        otherReference[me] = me + ".html";
    });
});

You could even store the extension in an additional attribute:

var otherReference = {};

$(document).ready(function () {
    $('.nav').find('li').each(function () {
        var me = $(this).attr('class');
        otherReference[me] = me + "." + $(this).attr("extension");
    });
});

Better would be to simply put the page reference in a data element:

<li class="myli" data-pagetoload="about.html">Howdy</li>

$(".nav li").click(function () {
    loadPage($(this).data("pagetoload"));
});

Upvotes: 0

LeGEC
LeGEC

Reputation: 51850

A stupid answer : create a <a> tag, and set its href attribute to the correct value.

Otherwise :

A standard way to store key: values pairs in javascript is to use a plain object :

var urls = {};
urls['about'] = 'mysuperduperurlforabout.html';

function loadPage(target) {
    var url = urls[target];
    //maybe check if url is defined ?

    $('#dashboard').load(url);
}

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

You seem to miss the .html part. Try with

$("#dashboard").load(target+'.html');

But, supposing you have only one class on your li element, you'd better use this.className rather than $(this).attr("class").

EDIT :

if you want to use your about variable, you may do this :

$("#dashboard").load(window[target]);

But it would thus be cleaner to have a map :

var pages = {
   'about': 'about.html',
   'home': 'welcome.jsp'
}
function loadPage(target){
    $("#dashboard").load(pages[target]);
}
$(".nav li").click(function(){
    loadPage(this.className);
});

Upvotes: 3

Дамян Станчев
Дамян Станчев

Reputation: 2664

You can call the variables like this (if that's what you asked):

var test = 'we are here';
var x = 'test';
console.log(window[x]);

It's similar to the $$ in PHP. The output will be:

we are here in the console window.

Upvotes: 0

som
som

Reputation: 4656

$(".nav li").click(function(){
    loadPage($(this).attr("class") + ".html");
});

or

$("#dashboard").load(target+".html");

Upvotes: 0

Related Questions