How I prevent code duplication in jquery?

Question

I have to use same block of jQuery code several time in my page. Only changing selector names and url parameters.

My code look something like this:

$(document).ready(function () {  
  $("#year").change(function() {
    var url = ''; 
    var c = $("#category").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=summery"+url;  
  })

  $("#category").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=summery"+url;  
  })
});


$(document).ready(function () {  
  $("#year2").change(function() {
    var url = ''; 
    var c = $("#category2").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=card"+url;  
  })

  $("#category2").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year2").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=card"+url;  
  })
});

$(document).ready(function () {  
  $("#year3").change(function() {
    var url = ''; 
    var c = $("#category3").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=chart"+url;  
  })

  $("#category3").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year3").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=chart"+url;  
  })
});

There are lot of code duplication. My question is, can any body help me to prevent this code duplication. Reason is, I have to this code block for lot of selectors and urls.

Hope somebody may help me out. Thank you.

Create a function that takes ID and urlFragment arguments

jedifans
– jedifans

2016-09-07 05:53:39 +00:00
Commented Sep 7, 2016 at 5:53 — jedifans
– jedifans, Commented Sep 7, 2016 at 5:53
@jedifans, can you kindly show me an example?

user3733831
– user3733831

2016-09-07 05:55:16 +00:00
Commented Sep 7, 2016 at 5:55 — user3733831
– user3733831, Commented Sep 7, 2016 at 5:55
Better asked in CodeReview.SE.

Derek 朕會功夫
– Derek 朕會功夫

2016-09-07 05:55:24 +00:00
Commented Sep 7, 2016 at 5:55 — Derek 朕會功夫
– Derek 朕會功夫, Commented Sep 7, 2016 at 5:55

jedifans · Accepted Answer · 2016-09-07 06:10:16Z

2

Extract the common code into a function:

function navigateBasedOnInput(monthInput, categoryInput, urlFragment) {
    var url = '',
          category = $(categoryInput).val(),
          month = $(monthInput).val();

    if (category.trim().length) {
        url += '&cat=' + encodeURIComponent(category);
    }
    if (month.trim().length) {
        url += '&mth=' + encodeURIComponent(month);
    }

    location.href = "?p=" + encodeURIComponent(urlFragment) + url;
}

$(document).ready(function () {
    $("#year, #category").change(function() {
        navigateBasedOnInput('#year', '#category', 'summery');
    });

    $("#year2, #category2").change(function() {
        navigateBasedOnInput('#year2', '#category2', 'card');
    });

    $("#year3, #category3").change(function() {
        navigateBasedOnInput('#year3', '#category3', 'chart');
    });
});

answered Sep 7, 2016 at 6:10

jedifans

2,2971 gold badge13 silver badges9 bronze badges

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

1 Comment

jedifans Over a year ago

Never trust user input. A user might have put & in the form field, which would cause &cat=the&st&mth=2. encodeURIComponent() escapes any & characters and a few more.

Prem Raj · Accepted Answer · 2016-09-07 05:57:42Z

1

Try moving the common stuff out into a function.

function commonFunc(c, d, pStr) {
    var url = '';
    if (d.trim().length) {
        url+='&mth='+d;
    } 
    if (c.trim().length) { 
        url+='&cat='+c;
    } 
    return pStr+url;
}

Then in the change function it will be:

$("#year").change(function() {
    var c = $("#category").val(); 
    var d = $(this).val(); 
    location.href = commonFunc(c, d, '?p=chart');  
  });

Plus you can also put all the listeners in one ready function

[EDIT] It's a good habbit to add ; to the end of your statements

answered Sep 7, 2016 at 5:57

Prem Raj

8475 silver badges15 bronze badges

1 Comment

naortor Over a year ago

he can also put the 'twin' element id on data-attribute for example on the #year element `<select id="year" class="general" data-element="category" /> and then can put an event listener on the class and get the other element by the data attribute.

baba · Accepted Answer · 2016-09-08 06:55:13Z

0

maybe you can do it like this:

var urls={
  year1:"",
  year2:"",
  year3:""
};
["year1","year2","year3"].forEach(function(e){
    var self = $("#"+e);
    self.change(function(){
        var url = urls[e], 
        c = self.val(),
        d = $(this).val(); 
        if(c.trim().length) { url+='&cat='+c } 
        if(d.trim().length) { url+='&mth='+d } 
        location.href="?p=card"+url;  
    });
});

edited Sep 8, 2016 at 6:55

answered Sep 7, 2016 at 6:08

baba

11 bronze badge

Collectives™ on Stack Overflow

How I prevent code duplication in jquery?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related