CODEWITHSUNDEEP
javascriptphpjqueryhtml
Vg.
Vg.

Reputation: 133

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

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;}

Upvotes: 1

Views: 2340

Answers (3)

Reena Parekh
Reena Parekh

Reputation: 941

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.

Upvotes: 1

Tony Freed
Tony Freed

Reputation: 71

Changing location.href value will refresh the page anyway.

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

  1. get the value by searching in url params.
  2. 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.

Upvotes: 1

renakre
renakre

Reputation: 8291

How about this:

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

Upvotes: 1

Related Questions