Can I combine two functions into one using Javascript?

Question

I have the following code that I would like to simplify. With javascript and jQuery is there an easy way that I could combine these two functions? Most of the code is the same but I am not sure how I could create a single function that works differently depending on what is clicked.

$(document).ready(function () {
    $('#ListBooks').click(ListBooks);
    $('#Create').click(Create);
});

function Create() {
    var dataSourceID = $('#DataSourceID').val();
    var subjectID = $('#SubjectID').val();
    var contentID = $('#ContentID').val();
    if (dataSourceID && dataSourceID != '00' && 
        subjectID && subjectID != "00" &&
        contentID && contentID != "00")
    {
        var e = encodeURIComponent,
            arr = ["dataSourceID=" + e(dataSourceID),
                   "subjectID=" + e(subjectID),
                   "contentID=" + e(contentID)];
        window.location.href = '/Administration/Books/Create?' + arr.join("&");
    } else {
        alert('Datasource, Subject and Content must be selected.');
    }
    return false;
}

function ListBooks() {
    var dataSourceID = $('#DataSourceID').val();
    var subjectID = $('#SubjectID').val();
    var contentID = $('#ContentID').val();
    if (dataSourceID && dataSourceID != '00' &&
        subjectID && subjectID != "00" &&
        contentID && contentID != "00") {
        var e = encodeURIComponent,
            arr = ["dataSourceID=" + e(dataSourceID),
                   "subjectID=" + e(subjectID),
                   "contentID=" + e(contentID)];
        window.location.href = '/Administration/Books/ListBooks?' + arr.join("&");
    } else {
        alert('Datasource, Subject and Content must be selected.');
    }
    return false;
}

meson10 · Accepted Answer · 2011-11-19 10:01:25Z

I have tried merging both your functions into a single event trigger.

See if this helps, If I missed out on any other (uncommon to both codes) bit, I can help you edit it.

$(document).ready(function () {
    $('#ListBooks').unbind('click').bind('click', function() {
        iClicked("list");
    });
    $('#Create').unbind('click').bind('click', function() {
        iClicked("create");
    });
});

var url_map = {
    'create':'/Administration/Books/Create',
    'list':'/Administration/Books/ListBooks'
};

function iClicked(trig) {
    if (!url_map[trig]) {
        alert("Unsupported event");
        return false;
    }
    var dataSourceID = $('#DataSourceID').val();
    var subjectID = $('#SubjectID').val();
    var contentID = $('#ContentID').val();
    if (dataSourceID && dataSourceID != '00' &&
        subjectID && subjectID != "00" &&
        contentID && contentID != "00")
    {
        var e = encodeURIComponent,
            arr = ["dataSourceID=" + e(dataSourceID),
                   "subjectID=" + e(subjectID),
                   "contentID=" + e(contentID)];
        window.location.href = url_map[trig] + '?' + arr.join("&");
    } else {
        alert('Datasource, Subject and Content must be selected.');
    }
    return false;
}

JercSi · Accepted Answer · 2011-11-19 09:52:06Z

2

Something like that ?

$(document).ready(function () {
    $('#ListBooks').click(function() { yourNewFunction('ListBooks'); });
    $('#Create').click(function() { yourNewFunction('Create'); });
});

yourNewFunction(type) {
  // code of both functions
  if ('ListBooks' == type) {
   // code for ListBook
  } else {
   // code for Create
  }
};

answered Nov 19, 2011 at 9:52

JercSi

1,0471 gold badge9 silver badges19 bronze badges

3 Comments

Samantha J T Star Over a year ago

Yeah I think this would be good. I was not sure how to call a function with parameters as you have done. Is there a common standard way for naming functions? I notice you used a lowercase for the first character.

Sasha Chedygov Over a year ago

@Melissa: JavaScript commonly uses camelCase with the first letter lowercase for variables and functions.

JercSi Over a year ago

Acutaly i don't know, probably there are coding standards. Many JS, PHP,... functions starts with lowercase. So i'm building application on the same way.

steveyang · Accepted Answer · 2011-11-19 10:08:17Z

What you need is to make a function perform differnt action based on the id you passed in $('#ListBooks') and $('#Create'). So instead of hardcoding the id into your function, you use this.id instead to retrive the value. Adjusted this line:

$('#ListBooks').click(combinedFunction);

and this

window.location.href = '/Administration/Books/'+ this.id + '?' + arr.join("&");

The final code:

$(document).ready(function () {
    $('#ListBooks').click(combinedFunction);
    $('#Create').click(combinedFunction);
});

function combinedFunction() {
    var divId = this.id;
    var dataSourceID = $('#DataSourceID').val();
    var subjectID = $('#SubjectID').val();
    var contentID = $('#ContentID').val();
    if (dataSourceID && dataSourceID != '00' && 
        subjectID && subjectID != "00" &&
        contentID && contentID != "00")
    {
        var e = encodeURIComponent,
            arr = ["dataSourceID=" + e(dataSourceID),
                   "subjectID=" + e(subjectID),
                   "contentID=" + e(contentID)];
        //Use this.id to retrive the value
        window.location.href = '/Administration/Books/'+ this.id + '?' + arr.join("&");
    } else {
        alert('Datasource, Subject and Content must be selected.');
    }
    return false;
}

gion_13 · Accepted Answer · 2011-11-19 10:15:31Z

function doBookAction(action) {
    var dataSourceID = $('#DataSourceID').val();
    var subjectID = $('#SubjectID').val();
    var contentID = $('#ContentID').val();
    if (dataSourceID && dataSourceID != '00' &&
        subjectID && subjectID != "00" &&
        contentID && contentID != "00") {
        var e = encodeURIComponent,
            arr = ["dataSourceID=" + e(dataSourceID),
               "subjectID=" + e(subjectID),
               "contentID=" + e(contentID)];
        window.location.href = '/Administration/Books/' + action + '?' + arr.join("&");
    } else {
        alert('Datasource, Subject and Content must be selected.');
    }
    return false;
} 

$('#ListBooks,#Create').click(function() { doBookAction($(this).attr('id')); });

Collectives™ on Stack Overflow

Can I combine two functions into one using Javascript?

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related