从URL哈希设置页面状态 - 语法错误(jQuery)

时间:2016-09-16 18:39:46

标签: javascript jquery wordpress fragment-identifier

我试图在WordPress网站上调试脚本,允许动态过滤作业列表(通过Jobvite。)当页面最初加载时没有附加任何URL参数 - 例如site.com/jobs/all-positions - 过滤器工作正常;但是,当页面加载/重新加载时附加了参数 - 例如。 site.com/jobs/all-positions#country=united-states&city=minneapolis,过滤器根本不起作用,我在控制台中看到以下jQuery错误:

  

语法错误,无法识别的表达式:#country%3Dunited-states%26city%3Dminneapolis

似乎URI组件没有正确编码(?),我想知道我是否在插件脚本中看不到处理过滤的错误,我和#39; m包括以下内容:

// 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();
    }
  }

这只是处理URI哈希组件的脚本部分,我认为这个问题必须在这里。真正令人沮丧的是,页面/脚本在测试服务器上运行得很好(因此在不同的WordPress安装上),但在登台服务器上却没有。但是,两者都具有相同版本的WP并且正在加载相同版本的jQuery。这里有任何想法,为什么脚本不能正确解析URI组件?

1 个答案:

答案 0 :(得分:1)

使用?而不是#

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