CODEWITHSUNDEEP
javascriptjquery
Nitish Kumar
Nitish Kumar

Reputation: 6296

How to call function dynamically in JQuery

I've set of html codes, I want to have a function for each set where I can pull some data or do some activities, so basically I need to be calling function according to the html codes present in DOM, suppose I've header section I want to collect menu items and I've sliders where I want to collect slider information, So I need to call header function to do the activity accordingly and slider function to do the activity, I went across some info about eval() but I guess it has lot of demerits and is being obsolete. Please suggest me how can I achieve it.

HTML Code: Header

<div class="header" data-nitsid="1">
    <div class="branding">
        <h1 class="logo">
            <a href="index.html"><img src="images/[email protected]" alt="" width="25" height="26">NitsOnline</a>
        </h1>
    </div>
    <nav id="nav">
        <ul class="header-top-nav">
            <li class="has-children">
                <a href="index.html">Home</a>
            </li>
        </ul>
    </nav>
</div>

Slider

<div id="slideshow" data-nitsid="2">
    <div class="revolution-slider">
        <ul>    <!-- SLIDE  -->
            <!-- Slide1 -->
            <li data-transition="zoomin" data-slotamount="7" data-masterspeed="1500">
                <!-- MAIN IMAGE -->
                <img src="http://placehold.it/1920x1200" alt="">
            </li>
        </ul>
    </div>
</div>

Now I want to collect data from both elements and pass the data to my views of laravel framework where it will generate a popup for each section for editing purpose.

$('.page-content-wrapper').find('[data-nitsid]').each(function() {
    // getting data to call function
    var nits = $(this).data("nitsid");

    // calling function
    design.nits();
}

var design = {};

design.1 = function() {
    // do ajax request to views of header
}

design.2 = function() {
    // do ajax request to views of slider
}

Upvotes: 2

Views: 3725

Answers (2)

eisbehr
eisbehr

Reputation: 12452

You want to use design[nits]();.
This will get the property nits of design and execute it with ().

But there is another problem. Your design will be declared after the each loop, so it is not available inside. You have to place it before.

$(function() {
    var design = {};

    design.funcOne = function() {
        alert("funcOne called");
    }

    design.funcTwo = function() {
        alert("funcTwo called");
    }

    $('div[data-nitsid]').each(function() {
        var nits = $(this).data("nitsid");
        design[nits]();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-nitsid="funcOne">
  I will call 'funcOne'!
</div>
<div data-nitsid="funcTwo">
  I will call 'funcTwo'!
</div>

Upvotes: 1

user6586783
user6586783

Reputation:

You canot use literal number as a property name. If you want to call property 1 of object design use design[1] instead. Also, you cannot assing property to non-initialized variable, you must use var design = {}; to make it object. If your property of design object is stored in nits variable, then call it as design[nits]();. Also, next time don't forget to test your code before posting it here. You've forget ) after your first function.

$('.page-content-wrapper').find('[data-nitsid]').each(function() {
    // getting data to call function
    var nits = $(this).data("nitsid");
    // calling function
    design[nits]();
});

var design = {};

design[1] = function() {
    // do ajax request to views of header
};

design[2] = function() {
    // do ajax request to views of slider
};

Upvotes: 2

Related Questions