jQuery calling a variable that has variable inside a function

Question

I have written my javascript too much, and now the code keeps repeating itself, whereas I lack of knowledge on how to simplify matters. I have this idea of calling variable into function, but I don't know how to call this kind of function that contains dynamic variables.

Anyone got any tips on how can I achieve this?

var container    = '#content_container';

function container_load(){
    var data         = $(this).attr('data');
    var dataObject   = {command : data};
    var title        = '<h2 data="'+dataObject.command+'">'+
                        dataObject.command+'</h2>';

};

$(function(){
    $('nav')on.('click', 'a', function(){
        container_load();
        $(container).prepend(title);
    });
});

Apparently, console returned ReferenceError: Can't find variable: dataObject

rynhe · Accepted Answer · 2013-11-26 05:32:10Z

1

There is two issue is in your code

var container    = '#content_container';
var title;   //title should be declare as global,same as "container" variable
function container_load(dis){
    var data         = dis.attr('data');
    var dataObject   = {command : data};
    title        = '<h2 data="'+dataObject.command+'">'+
                        dataObject.command+'</h2>';

}

$(function(){
    $('nav').on('click', 'a', function(){
        container_load($(this)); //you have to pass the current element
        $(container).prepend(title); 
    });
});

Demo : Demo

answered Nov 26, 2013 at 5:32

rynhe

2,5291 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Mhetre · Accepted Answer · 2013-11-26 04:08:28Z

0

Try this :

var container    = '#content_container';

function container_load(currElementId){
    var data = $("#"+currElementId).attr('data');
    return '<h2 data="'+data+'">'+data+'</h2>';
};

$(function(){
    $('nav')on.('click', 'a', function(){
         var title = container_load(this.id);
        $(container).prepend(title);
    });
});

Here your problem is that you cannot 'this' in other function for that you need to pass it from your current function.

answered Nov 26, 2013 at 4:08

Ramesh Mhetre

4042 silver badges12 bronze badges

Comments

score 0 · Accepted Answer · 2013-11-26 04:26:17Z

0

There seems to be few mistakes in your code, The scope is wrong and the data attribute is used not correctly I presume. I suppose this is what you wanted http://jsfiddle.net/EjEqK/2/

HTML

<nav ><a href="#" data-val="abc">aaa</a></nav>
<div id="content_container"></div>

JS

function container_load() {
var data = $(this).data("val");
var dataObject = { command: data };
$("#content_container").prepend('<h2 data-val="' + dataObject.command + '">' + dataObject.command + '</h2>');
};

$(function () { $('nav > a').on('click', container_load); });

PS: If you don't need dataObject for anything else, directly use data

edited Nov 26, 2013 at 4:26

answered Nov 26, 2013 at 4:19

user2587132

Comments

Mohamed Rashid.P · Accepted Answer · 2013-11-26 06:11:41Z

0

I think this will help you :

function container_load(currElement){
var data = $(currElement).attr('data');
return '<h2 data="'+data+'">'+data+'</h2>';
}

$(function(){
var container    = '#content_container';
    $('nav')on.('click', 'a', function(){
         var title = container_load(this);
        $(container).prepend(title);
    });
});

answered Nov 26, 2013 at 6:11

Mohamed Rashid.P

1831 silver badge13 bronze badges

Comments

user1636522 · Accepted Answer · 2013-11-26 07:26:51Z

You could do the following :

var container = '#content_container',
    title; // make title global

function container_load() {
    var data = $(this).attr('data');
    var dataObject = { command: data };
    title = '<h2 data="' + dataObject.command + '">' + 
        dataObject.command + '</h2>';
};

$(function () {
    $('nav') on.('click', 'a', function () {
        container_load.call(this); // bind this to container_load
        $(container).prepend(title);
    });
});

But you could do even better :

$(function () {
    $('nav') on.('click', 'a', function () {
        var data = $(this).attr('data');
        $('#content_container').prepend(
            '<h2 data="' + data + '">' + data + '</h2>'
        );
    });
});

Collectives™ on Stack Overflow

jQuery calling a variable that has variable inside a function

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related