How to hide and show div if url is set to specific value using jquery/javascript?

Question

I'm sending a specific value through url and after that my page get refreshes. The URL value is dynamic.Whenever URL sets I want to show div which is already hidden.

<button  id="show_id"  onclick="location.href='opdcasepaperreport.php?patient_nm='+document.getElementById('patient_id').value;" > View Report </button>

When user clicks on View Report , report div will be displayed. I tried following 2 coding methods:

$( document ).ready(function()
{
    $("#show_id").click(function()
   {
       $('#main').toggle();

  });

});

and

$(document).ready(function () 
{
   if(window.location.href.indexOf("?patient_nm"))
   {
       //alert("your url contains ");
       //show code;
  }
});

in 1st case because of page refresh div get visible and un visible again. Is there any solution for this like in php if(isset(---)){//do this;}

do you want to hide/show div on main page or the redirected page after click? — Toretto
– Toretto, Commented Apr 3, 2015 at 12:28
You are doing two things with the button. Making div hide/show with jquery function and you have also applied onclick to redirect the page to specific url. Is it intentional? If you keep this implementation the page will refresh/redirect due to later function (onclick) — Hammad
– Hammad, Commented Apr 3, 2015 at 12:31

Tony Freed · Accepted Answer · 2015-04-03 13:08:44Z

Changing location.href value will refresh the page anyway.

In order to hide/show div depending on url value you need to:

get the value by searching in url params.
show / hide div.

Get URL params.

You can use this script in order to get url params:

 var getQuery = function () {
  var url_params = {};
  var query = window.location.search.substring(1);
  if (query.length === 0) return false;
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (typeof url_params[pair[0]] === "undefined") {
      url_params[pair[0]] = pair[1];
    } else if (typeof url_params[pair[0]] === "string") {
      var arr = [ url_params[pair[0]], pair[1] ];
      url_params[pair[0]] = arr;
    } else {
      url_params[pair[0]].push(pair[1]);
    }
  } 
 return url_params;
};

It will return an object (key, value).

Show / Hide div

If you using jQuery, you can simply is .toggle()

$("#your_div_name").toggle();

Or by using .show() / .hide()

So:

var query = getQuery();
if (query && query.some_param !== undefined) {
    $("#your_div_name").show()
} else {
    $("#your_div_name").hide()
}

But it's better not to use url params in order to change view.

Have fun.

renakre · Accepted Answer · 2015-04-03 12:25:30Z

1

How about this:

$("#show_id").click(function(e)
{
  e.preventDefault();//this will prevent page refresh
  $('#main').toggle();
});

answered Apr 3, 2015 at 12:25

renakre

8,3318 gold badges55 silver badges114 bronze badges

Comments

Reena Parekh · Accepted Answer · 2015-04-03 13:08:51Z

Try following code:

 $( document ).ready(function()
    {
    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 hasParam = getParameterByName('patient_nm');
        if(hasParam !== 'undefined') {
         $('#main').toggle();
        }
    });

As per your code, on button click the element will get toggled but after that the page gets refreshed immediately. On page refresh the element will be hidden again, so you are not able to view the effect.

As per my code above, when the page refreshes/loads, it will search for the parameter "patient_nm" that you are adding in the URL. If this parameter is not empty it will toggle the element. Since this process happens after page load, you will be able to see the results.

Hope this helps.

Collectives™ on Stack Overflow

How to hide and show div if url is set to specific value using jquery/javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related