CODEWITHSUNDEEP
javascriptparsingshow-hide
user2875670
user2875670

Reputation: 19

How to hide div content based on URL values - multiple fields

I have a working code that would hide/show content based on the URL value. example:

www.domain.com/?filter_brands=gucci

will show content that's meant for 'gucci', the rest will remain hidden.

However, if the url gets additional fields/values it stops working.. Example:

www.domain.com/?filter_brands=gucci&query_type_brands=or

does not work.. What do I change in javascript so it reads the first filter_brands value and ignores the rest..? Thanks a lot guys!

Here is the javascript:

    $(document).ready(function() {
    var brands = 'gucci';
    var url = window.location.search;
    brands = url.match(/filter_brands=(.*)/)[1];
    showDiv(brands);
});
function showDiv(brands) {
    $('.boxes').hide();
    $('#' + brands).show();
}

Here is the html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>

Here is my the full code on fiddle http://jsfiddle.net/s7V26/

It doesn't hide content on fiddle, because you need to load url with ?filter_brands=gucci but the code works..

Upvotes: 0

Views: 1133

Answers (2)

Jesse
Jesse

Reputation: 825

this is the absolute simplest way you can do it since you are only using one url variable it doesn't have to use a complex function to get it you can use the split function to do it. this won't work if there are escaped characters in the name but you don't have any so it should not be an issue for your code. 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var key = url.split("=")[0];
    if(key == "brands") // if you want to check if they used brands as urlvar
        brands = url.split("=")[1];
    showDiv(brands);

  })

</script>

split will convert the urlvar to an array. for example ?brands=gucci will be converted to ["brands", "gucci"] if you are sending more then one variable however it gets more complicated you need to use a function call like some of the answers that others posted. like so

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    function getParameterByName(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var brands = getParameterByName("brands");
    showDiv(brands);

  })

</script>

Upvotes: 0

COLD TOLD
COLD TOLD

Reputation: 13599

I think you need a better function to get the query string 

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// based on this answer How can I get query string values in JavaScript?

showDiv(getParameterByName("filter_brands"));

Upvotes: 1

Related Questions