Setting page state from URL hash - syntax error (jQuery)

Question

I'm trying to debug a script on a WordPress site that that allows for dynamic filtering of job listings (via Jobvite.) When the page is initially loaded without any URL parameters attached-- e.g. site.com/jobs/all-positions-- the filters work fine; however, when the page is loaded/reloaded with parameters attached--e.g. site.com/jobs/all-positions#country=united-states&city=minneapolis, the filters don't work at all, and I see the following jQuery error in the console:

Syntax error, unrecognized expression: #country%3Dunited-states%26city%3Dminneapolis

It seems that the URI components are not being properly encoded (?) and I'm wondering if there's an error I'm not seeing in the plugin script that handles the filtering, which I'm including below:

// Update Filter hash
  function updateFilterHash() {
    var filterHash  = '#';

    if ( selectedCountryFilters.length !== 0 ) {
      filterHash += "country=" + selectedCountryFilters.join(",") + "&";
    }
    if ( selectedCityFilters.length !== 0 ) {
      filterHash += "city=" + selectedCityFilters.join(",") + "&";
    }
    if ( selectedCategoryFilters.length !== 0 ) {
      filterHash += "category=" + selectedCategoryFilters.join(",") + "&";
    }

    console.log(filterHash);

    $.History.go( filterHash );
  }

  // Set page state from URL hash
  if ( location.hash.length !== 0 ) {

    // Set Req detail view
    if ( location.hash.indexOf("#req-") !== -1 ) {
      var reqId = encodeURIComponent(location.hash.slice(1));
      $(".all-requisitions").hide();
      $(".all-open-positions-title").hide();
      $(".breadcrumbs").append( "<span> &gt; " + $("[data-id='" + reqId + "'] h1").text() + "</span>" );
      $(".requisition-detail[data-id='" + reqId + "']").fadeIn();
    }

    // Set Filters
    if ( location.hash.indexOf("&") !== -1 ) {
      var hashParts = encodeURIComponent(location.hash.slice(1)).split("%26");

      // Activate Filters
      for (var i = 0; i < hashParts.length; i++) {

        if ( hashParts[i] !== "" ) {
          var hashPairs  = hashParts[i].split("%3D");
              hashName   = hashPairs[0],
              hashValues = hashPairs[1].split("%2C");

          for (var j = 0; j < hashValues.length; j++) {
            $("a[href='#" + hashName + "-" + hashValues[j] + "']").addClass("selected");

            // Update appropriate Filter arrays and perform other Filter-specific actions
            switch (hashName) {
              case "country":
                selectedCountryFilters.push( hashValues[j] );

                // If Filter is a Country, reveal the Cities too
                updateCityFilters();
                break;

              case "city":
                selectedCityFilters.push( hashValues[j] );

                // If Filter is a city, activate the Country too
                var hashCountry = $("a[href='#" + hashName + "-" + hashValues[j] + "']").data("country");
                $("a[href='#country-" + hashCountry + "']").addClass("selected");
                selectedCountryFilters.push( hashCountry );
                break;

              case "category":
                selectedCategoryFilters.push( hashValues[j] );
                break;

              default:
                break;
            }

          }

        }
      }

      updateReqs();
      updateCategoryHeadings();
    }
  }

This is just the section of the script that handles the URI hash components, and I'm thinking the issue must lie somewhere here. What's truly frustrating, is that the page/script works perfectly fine on a testing server (and therefore on a different WordPress install) but not on the staging server. However, both have the same versions of WP and are loading the same versions of jQuery. Any ideas here as to why the script would not be properly parsing the URI components?

errors tell you where they are being thrown. Where in this code is that error generated? i suspect it is related to passing into jQuery selectors. Why are you using `encodeURIComponent()` to process what's coming from the url? would help if you scaled this down to a minimal representation of the problem — charlietfl, Sep 16 '16 at 18:43
thanks for the response @charlietfl - the console error just lists `jquery.js?ver=1.12.4:2`, thus not the plugin script itself. I didn't actually write this script myself, so I'm not sure why `encodeURIComponent()` was used-- should I try removing that function from the `reqId` and `hashParts` variables? — nickpish, Sep 16 '16 at 18:53
well it doesn't make sense to me to encode rather you need to decode if you are passing this into selectors. Alternative might be to use jQuery `filter()` instead of using selectors. — charlietfl, Sep 16 '16 at 18:56
@charlietfl would you expand a bit on how to use `filter()` in this case? — nickpish, Sep 16 '16 at 19:03
instead of using `$("[data-id='" + reqId + "'] h1")` you would find that element by filtering through `$("[data-id]').filter()` and test each value yourself and then get it's H1 text. I'm fairly sure the problem is in one of those selectors and probably this one `$("a[href='#country-" + hashCountry + "']")` — charlietfl, Sep 16 '16 at 19:09
This line doesn't seem right `var hashPairs = hashParts[i].split("%3D");`. I believe that should end in a comma like so... `var hashPairs = hashParts[i].split("%3D"),` — BA_Webimax, Sep 16 '16 at 19:44

score 1 · Answer 1 · answered Sep 16 '16 at 18:43

1

use ? instead of #

site.com/jobs/all-positions?country=united-states&city=minneapolis

answered Sep 16 '16 at 18:43

artemnih

4,136
2
18
28

thanks Art-- why do you think `?` would not result in the error? and would I just replace `var filterHash = '#';` with `var filterHash = '?';` – nickpish Sep 16 '16 at 18:54
@nickpish hashtag is the anchor tag and always comes the last in the URL. Question mark indicated query string. More on URL structure: [link](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL) – artemnih Sep 16 '16 at 18:57
Ok, so you think using `#` at the beginning could be causing the rest of the parameters to not be properly parsed/recognized by the script? – nickpish Sep 16 '16 at 19:00

Setting page state from URL hash - syntax error (jQuery)

1 Answers1