Please help me make this (working) jQuery bit less terribly redundant

Question

While the next jQuery bit works fine on my site, it seems terribly redundant. Is there a better way to do this?

$(function(){ $('#sidebar #filters ul#filters-surnames li a').click(function(e){ e.preventDefault(); var querySurname = $(this).data('surname'); querySurnameInput = '<input type="hidden" name="querySurname" value="' + querySurname + '" />'; $('form#formHidden').append(querySurnameInput); $('form#formHidden').submit(); return false; }); $('#sidebar #filters ul#filters-givennames li a').click(function(e){ e.preventDefault(); var queryGivenName = $(this).data('givenname'); queryGivenNameInput = '<input type="hidden" name="queryGivenName" value="' + queryGivenName + '" />'; $('form#formHidden').append(queryGivenNameInput); $('form#formHidden').submit(); return false; }); $('#sidebar #filters ul#filters-towns li a').click(function(e){ e.preventDefault(); var queryTown = $(this).data('town'); queryTownInput = '<input type="hidden" name="queryTown" value="' + queryTown + '" />'; $('form#formHidden').append(queryTownInput); $('form#formHidden').submit(); return false; }); $('#sidebar #filters ul#filters-locations li a').click(function(e){ e.preventDefault(); var queryLocation = $(this).data('location'); queryLocationInput = '<input type="hidden" name="queryLocation" value="' + queryLocation + '" />'; $('form#formHidden').append(queryLocationInput); $('form#formHidden').submit(); return false; }); $('#sidebar #filters ul#filters-years li a').click(function(e){ e.preventDefault(); var queryYear = $(this).data('year'); queryYearInput = '<input type="hidden" name="queryYear" value="' + queryYear + '" />'; $('form#formHidden').append(queryYearInput); $('form#formHidden').submit(); return false; }); $('#sidebar #filters ul#filters-types li a').click(function(e){ e.preventDefault(); var queryType = $(this).data('recordtype'); queryTypeInput = '<input type="hidden" name="queryType" value="' + queryType + '" />'; $('form#formHidden').append(queryTypeInput); $('form#formHidden').submit(); return false; }); }); 

The structure of the code to which it relates looks like something that is displayed when displaying HTML:

 <h2>Record Type</h2> <ul id="filters-types"> <li><a href="#" data-recordtype="birth">Birth <span class="facet-count">(40395)</span></a></li> <li><a href="#" data-recordtype="death">Death <span class="facet-count">(54458)</span></a></li> </ul> <h2>Surname</h2> <ul id="filters-surnames"> <li><a href="#" data-surname="menkes">Menkes <span class="facet-count">(1254)</span></a></li> <li><a href="#" data-surname="bardach">Bardach <span class="facet-count">(875)</span></a></li> </ul> 

(etc.)

Answer 1

I like just direct functioning to get started:

 function AddClickHandler (idSuffix, queryType, inputName) { $('#sidebar #filters ul#filters-' + idSuffix + ' li a').click (function (e) { e.preventDefault (); var valQuery = $(this).data (queryType); var inputHTML = '<input type="hidden" name="' + inputName + '" value="' + valQuery + '" />'; $('form#formHidden').append (inputHTML); $('form#formHidden').submit( ); return false; } ); } $(function () { AddClickHandler ('surnames', 'surname', 'querySurname'); AddClickHandler ('givennames', 'givenname', 'queryGivenName'); AddClickHandler ('towns', 'town', 'queryTown'); AddClickHandler ('locations', 'location', 'queryLocation'); AddClickHandler ('years', 'year', 'queryYear'); AddClickHandler ('types', 'recordtype', 'queryType'); }); 

Answer 2

You do not need to be so explicit. Especially if we are dealing with an identifier, there is nothing quicker to request that the identifiers have to be unique in the markup. So:

 'surnames givennames towns givennames years types'.split(/\s/).forEach(function( id ) { $('ul#filters-' + id + 'li a').click(function( myid ) { return function( e ) { var myValue = $(this).data( myid.replace(/s$/, '') ); $('form#formHidden').append( '<input type="hidden" name="query' + myid + '" value="' + myValue + '" />' ); $('form#formHidden').submit(); return false; }; }(id)); }); 

You do not need to explicitly call the .preventDefault() of the event object when returning false from the event handler.

This should give you a general idea of ​​how to do this. I tried to distract some of your redundant variable names.

Even this solution is probably too specific. You can probably use a type selector

 $('#sidebar li a').each(function( _, anchor) { // do the same stuff }); 

if there is no other unordered list in #sidebar , this will also remove the explicit loop over the string list.

Answer 3

You can use an array with various parameters, and then iterate over it to bind to events, something like this:

 var fields = [{selector:"#filters-surnames li a",field:"surname"]] for (var field in fields) { $(field.selector).click(function(e){ e.preventDefault(); var query = $(this).data(field.field); queryInput = '<input type="hidden" name="query'+field.field+'" value="' + query + '" />'; $('form#formHidden').append(queryInput); $('form#formHidden').submit(); return false; }); } 

Answer 4

I changed it to depend on the UL identifier (which is bad).

 $(function(){ $('#filters ul li a').click(function (e) { e.preventDefault(); var filter_id = $(this).parents('ul').attr('id'); var filter_name = /^filters-(.+)s$/.exec(filter_id)[1]; var queryData = $(this).data(filter_name); var queryInput = $('<input />').attr('type', 'hidden').attr('name', 'query' + filter_name).val(queryData); $('form#formHidden').append(queryInput).submit(); }); }); 

I would add some integrity checks and backups (in case of bad identifiers).

Answer 5

Something like this .. Please note that I have not tested this yet.

 $(function(){ $('#sidebar #filters ul[id^="filters"]li a').click(function(e){ e.preventDefault(); $this = $(this); var name; var splitId = $this.id.split("-")[1]; // the if statement below is necessary to handle recordtype(s) to "type" and any other names that end in the letter "s" if (splitId == "recordtype") { name = "type"; } else if ( splitId.charAt(splitId.length - 1) == "s") { name = splitId.substring(0, splitId.length - 2); } else { name = splitId; } var nameValue = $this.data(); nameInput = '<input type="hidden" name="query' + name + '" value="' + nameValue + '" />'; $('form#formHidden').append(nameInput); $('form#formHidden').submit(); return false; }); }); 

Answer 6

To add another option:

 var lists = [ '#filters-surnames', '#filters-givennames', '#filters-towns', '#filters-locations', '#filters-years', '#filters-types' ]; for (var l = 0; l < lists.length; l++){ $(lists[l] + ' li a').click(function(e){ $('#formHidden').append( $('<input>').attr({ type: 'hidden', name: $(this).data('inputname'), value: $(this).data('inputvalue') }) ).submit(); return false; }); } // Requirements: // - Each element have two data-values: // data-inputname Name of the hidden field to add to the form // data-inputvalue value to place within that hidden field 

Demo