CODEWITHSUNDEEP
javascriptjquery
Namit
Namit

Reputation: 1322

return or send variable to onchange event

I am trying to achieve the same functionality of a function from two separate events. So the function I created is:

function adding_stuff() {
    var names = [];
    var dates = [];
    for(var i = 0; i < this.files.length; i++) {
        //adding stuff to names and dates
    }
    $(".primary .panel-content").append("<ul class='list-unstyled'></ul>");
    for(var i in names) {
        var li = "<li>";
        $(".primary .panel-content ul").append(li.concat(names[i]))
    }
}

There are two buttons primary and secondary. I want the same functionality for both the functions but the output in different <div>. Currently the selected <div> is ".primary", however I want this to depend on the button which has been clicked.

The function is triggered using: 

$("#primary").onchange = adding_stuff;
$("#secondary").onchange = adding_stuff;

NOTE: primary and secondary are inputs of type file.

Upvotes: 1

Views: 550

Answers (4)

bipen
bipen

Reputation: 36531

using jquery's change() event

function adding_stuff(obj,objClass) {
var names = [];
var dates = [];
for(var i = 0; i < obj.files.length; i++) {
  //adding stuff to names and dates
}
$("."+ objClass+" .panel-content").append("<ul class='list-unstyled'></ul>");
for(var i in names) {
    var li = "<li>";
    $("."+ objClass+" .panel-content ul").append(li.concat(names[i]))
}
}

$("#primary").change(function(){
   adding_stuff(this,'primary');
});
$("#secondary").change(function(){
    adding_stuff(this,'secondary');
});

Upvotes: 2

Alnitak
Alnitak

Reputation: 339826

You can add additional data when you register the callback, which will be made available within the event handler:

$('#primary').on('change', { target: '.primary' }, adding_stuff);
$('#secondary').on('change', { target: '.secondary' }, adding_stuff);

and then within the handler:

function adding_stuff(ev) {
    var cls = ev.data.target;  // extract the passed data
    ...
    // file handling code omitted

    $(".panel-content", cls).append(...)
}

Upvotes: 2

cosmin.danisor
cosmin.danisor

Reputation: 963

You can use $(this).attr("class") inside the function. It will return the class of button who triggered the event.

function adding_stuff() {
var div = $(this).attr("class");
var names = [];
var dates = [];
for(var i = 0; i < this.files.length; i++) {
    //adding stuff to names and dates to $div
}
$(div + " .panel-content").append("<ul class='list-unstyled'></ul>");
for(var i in names) {
    var li = "<li>";
    $(div + " .panel-content ul").append(li.concat(names[i]));
}
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

function adding_stuff(opselector) {
    return function() {
        var names = [];
        var dates = [];
        for (var i = 0; i < this.files.length; i++) {
            // adding stuff to names and dates
        }
        var ul = $("<ul class='list-unstyled'></ul>").appendTo(opselector)
        for (var i in names) {
            ul.append("<li>" + li.concat(names[i]) + "</li>")
        }
    }
}

$("#primary").change(adding_stuff('.primary .panel-content'));
$("#secondary").change(adding_stuff('.secondary .panel-content'));

Upvotes: 0

Related Questions