preloader
軟體工程

CoffeeScript gets URL parameters for HTML select tags' multiple options

Use CoffeeScript and JQuery to bind click event at website for getting parameters of a form at URL.

  • In someone.js.coffee file. The following example is modified from reference 1,2,3 and 4 to meet my need.
get_parameters_from_url = ->
  aryParams = {} # Initial an empty object
  rawVars = window.location.search.substring(1).split("&") #window is used to getting global variables of browsers in coffeescript. location.search is the query string at URL including the question mark(?). substring(1) starts from first character, which follows question mark. split("&") divides every parameter as this format: yourparam=parametervalue .
  queryMultipleValuePattern = /query[]/ #Initialize a variable of regular expression I want
  if rawVars?.length # Appending question mark to end of a variable can check whether it's null and undefined or not in coffeescript. It returns false only when it's null or undefined, otherwise it returns true. In addition, if appending question mark, dot and length together, you could example a variable whether it's an empty string, null or undefined. Only returning false if it's an empty string, null or undefined, otherwise it returns true.
    i = 1
    for element in rawVars
      [key,val] = element.split("=") #divide parameter and its value into one array as key and value respectively.

      if (decodeURIComponent(key)).match(queryMultipleValuePattern) # function decodeURIComponent(key) is transforming value of key from URIcompact string(such as %5B) into normal string. 
        aryParams[(decodeURIComponent(key)) + "_#{i}"] = decodeURIComponent(val) # storing key and value into object: aryParams' attribute and value respectively. I transform query[] to this regular expression: query[]_{d}+ so I must rollback its type before using it correctly in program.
        i += 1
      else
        aryParams[decodeURIComponent(key)] = decodeURIComponent(val)

 

If you want to append values of captured URI parameters into a specified form, you must rollback to the type that you had transformed.

  • Same in someone.js.coffee file. The function I build is append_previous_params_of_form_to_latest_request.
append_previous_params_of_form_to_latest_request = (previousParams) ->

  if previousParams?
    delete previousParams['query-time'] if previousParams['query-time']? # Delete if there are duplicate parameters
    
    delete previousParams['page'] if previousParams['page'] # Delete if there are duplicate parameters
    
    $('#filter-veggie-query input[type=hidden]').remove() # Remove all input's type are hidden under document id is filter-veggie-query
    
    queryMultipleValuePattern = /query[]_[d]+/ # Initialize the regular expression I want to rollback
    
    for property in Object.keys(previousParams) # Object.keys(previousParams) is used to getting attributes' name in previousParams
      
      if property.match(queryMultipleValuePattern)? #Check whether there is match or not for specified pattern.
        $('#filter-veggie-query').append('<input type="hidden" name="query[]" value="' + previousParams[property] + '">') # append what I want if there is matched. This is the rollback for transformed types.
      else
        $('#filter-veggie-query').append('<input type="hidden" name="' + property + '" value="' + previousParams[property] + '">') # append as normal if there is no matched.

 

If you want to submit a form through jquery without having a button, you could follow instructions at reference 7.

Must aware identation in CoffeeScript. 

 

References:

  1. https://stelfox.net/blog/2013/12/access-get-parameters-with-coffeescript/ 
  2. http://stackoverflow.com/questions/8127883/easiest-way-to-check-if-string-is-null-or-empty/8127920#8127920
  3. http://stackoverflow.com/questions/5128292/using-a-html-select-element-to-add-get-parameters-to-url
  4. http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter?page=1&tab=active#tab-top
  5. http://stackoverflow.com/questions/7231157/how-to-submit-form-on-change-of-dropdown-list
  6. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
  7. http://stackoverflow.com/questions/7704976/submit-a-html-form-without-having-a-submit-button