CODEWITHSUNDEEP
javascriptjquery
V4n1ll4
V4n1ll4

Reputation: 6099

jQuery consolidate code into one function

Is it possible to consolidate the two sections of code below. If you look at each section you will notice they are almost identical. I have another 3 or 4 sections of code which are also identical. I'm wondering if there's a neater way for me to use the same code?

$("#agencies").on("click", ".applyClick", function(event) {
    event.stopPropagation();
    event.preventDefault();
    var target = $(this);
    var currentParent = $(this).closest('tr');
    var id = currentParent.attr('id');
    var items = $("input,select,textarea", currentParent);
    var strData = items.serialize() + '&id=' + id;
    $.post("agencies.php", strData, function(data) {
        var data = $.parseJSON(data);

        if(data.redirect_location){
            window.location = data.redirect_location;
        }
        else{
            var type = data.type;
            var result = $.map(data, function(val,index) {
                if(index != 'type'){
                    var str = val;
                }
                return str;
            }).join("<br>");

            if(type == 'error'){
                alert(result);
            }
            else{
                $("div#messages").html('<div class="'+ type +'-message">' + result + '</div>').slideDown("slow");
                closeRow('quit', target);
            }
        }
    });
});

$("#builders").on("click", ".applyClick", function(event) {
    event.stopPropagation();
    event.preventDefault();
    var target = $(this);
    var currentParent = $(this).closest('tr');
    var id = currentParent.attr('id');
    var items = $("input,select,textarea", currentParent);
    var strData = items.serialize() + '&id=' + id;
    $.post("builders.php", strData, function(data) {
        var data = $.parseJSON(data);

        if(data.redirect_location){
            window.location = data.redirect_location;
        }
        else{
            var type = data.type;
            var result = $.map(data, function(val,index) {
                if(index != 'type'){
                    var str = val;
                }
                return str;
            }).join("<br>");

            if(type == 'error'){
                alert(result);
            }
            else{
                $("div#messages").html('<div class="'+ type +'-message">' + result + '</div>').slideDown("slow");
                closeRow('quit', target);
            }
        }
    });
});

Upvotes: 0

Views: 47

Answers (2)

Roamer-1888
Roamer-1888

Reputation: 19288

This question is in the margins of Code Review and SO.

The only difference between the two handlers appears to be the .post URL, and that appears to be derivable from the ID of the click target.

So do a little string handling to build the URL and attach your modified function as click handler to both elements :

$("#agencies, #builders").on("click", ".applyClick", function(event) {
    ...
    $.post(this.id + '.php', strData, function(data) {
    ...
}

Upvotes: 0

FarazShuja
FarazShuja

Reputation: 2370

I will recomend to add attribute to your buttons like this

<input type="button" data-url="agencies" id="agencies" />
<input type="button" data-url="builders.php" id="builders" />

and same code like this

$("#agencies, #builders").on("click", ".applyClick", function(event) {
    var url = $(this).attr('data-url');
    ....
    $.post(url, strData, function(data) {
    ...
    ...
});

Upvotes: 1

Related Questions