Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 133
  • Last Modified:

check url parameter and make a variable with that value in Jquery

Hi,

I have a url parameter called "subjectId" that has a value and I have to turn that value into a variable called "recipientId"

This is what i'm starting with, but I don't know how to check the url with Jquery

Thanks!

<script>
 $(document).ready(function() { 
 var subjectId = "recipientId";
 });
 </script>

Open in new window

0
smfmetro10
Asked:
smfmetro10
1 Solution
 
GaryCommented:
Run this function when the page has loaded
function getURLParam(pair_name){
	params=[]
	qString = window.location.href.split("?")[1].split("&")
	for(var i = 0; i < qString.length; i++){
		pairs = qString[i].split('=');
		params[pairs[0]]=pairs[1];
	}
}

Open in new window


Then use this to get the querystring value of the parameter and assign to a var

somevar = params["querystring-name"]
0
 
leakim971PluritechnicianCommented:
$(document).ready(function() {  // you don't need to wait for page load
 var subjectId = new RegExp('[\?&]subjectId=([^&#]*)').exec(location.href).pop();
 }); // you don't need to wait for page load

Open in new window

0
 
smfmetro10Author Commented:
Hmm... I'm a bit confused.  Maybe I should have given you a more complete question.

This is what I'm trying to do... If you go here there is an example :

http://thelocalized.com/dc/contact.html?recipientId=3

since "recipientId is 3 then the middle div is in the active state as well as the link (black) with the correct div showing..

I just need it to work when "subjectId" is in the url... but still have the recipientId work as well in case the user clicks on another link...  I could probably do it on the sever side but this page uses Idoc script and I have never used that before.
Thanks!
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 

<script>
	$(document).ready(function () {	
			    $("#Coverage a:not, #ForMembers a:not,#GenInfo a:not(.button)").click(function () {			
			var v = $(this).attr("id");
			$("#recipientId ").val(v);

		
			var lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	         $("div.active").removeClass("active"); 
			  $("div a.active").removeClass("active"); 
			$("a[href='#"+lhash+"']").closest("div").addClass("active");
			$("a[href='#"+lhash+"']").closest("div a").addClass("active");
			

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}
			
			$("div a.active").addclass("active");
			$("div.active").removeClass("active"); 
			$("div.active").removeClass("active"); 
			$("div a.active").removeClass("active"); 
			if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");// do you mean that does'nt work
			$("#" + recipID).parent("div").addClass("active");// do you mean that does'nt work
		}
else {
   			$("#div6").show();
 			$("#6").addClass("active"); // please not 6 is not a valid id
			$("#6").parent("div").addClass("active"); // please not 6 is not a valid id
}
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});
          $("div.active").removeClass("active");
		url = window.location.search.substring(1);
		urlvars = url.split('?');
		var recipID = '';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
			
		}
	});
</script>


<style>
.greybackground {
	  background-color:#F3F3F3;
	width:630px;
	height:150px;
	-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
	

	#ForMembers {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 10px 5px;
		width:170px;
		height:95px;	
		margin-left:220px;
		margin-top:-120px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#ForMembers:hover {
	background-image:url(images/rectangle-med-blue-with-shadow_H.png);
	cursor:pointer;
	}

	#ForMembers a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
		
	}
	
	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
		
	}

	#ForMembers a:hover  {
		color:#000;
	}	
	
	#Coverage {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 10px 5px;
		width:170px;
		height:95px;	
		margin-left:420px;
		margin-top:-115px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-image:url(images/rectangle-med-blue-with-shadow_H.png);
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
		
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
	}

	#Coverage a:hover  {
		color:#000;
	}	

	#GenInfo {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 20px 5px;
		padding-top:10px;
		width:170px;
		height:90px;
		font-size:14px;
		margin-left:15px;
		margin-top:0px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-image:url(images/rectangle-med-blue-with-shadow_H.png);
		cursor:pointer;
	}	
	#GenInfo a  {
		
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
	}

	#GenInfo a.active {
		color:#000;
	}

	#GenInfo.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
	}

	#GenInfo a:hover {
		color:#000;
	}

	
	
	.label_copy {
		display:none;
	}
	#contactForm {
	width:610px;
	background-color:#F3F3F3;
	
	padding-left:20px;
	-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
</style>

</head>

<body>

	<div id="GenInfo" >

		<span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" onClick="return false;" class="link" style="font-color:#F00;">Contact us by email</a>
	
	</div>
		<div id="ForMembers" >
	
		<span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" onClick="return false;" class="link">Report a Claim</a><br/>
		<a id="7" href="#7" onClick="return false;" class="link">Member Services </a><br/>
		<a id="8" href="#8" onClick="return false;" class="link">Patient Safety </a>

	</div>

	<div id="Coverage">
	
		<span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" onClick="return false;" class="link">Get a Quote</a><br/>
		<a id="4" href="#4" onClick="return false;" class="link">Apply for Coverage</a><br/>
		<a id="5" href="#5" onClick="return false;" class="link">Find an Agent</a>
	
	</div>
	
	</div>

	<div id="div1" class="label_copy">
		Claim info
        </div>

	<div id="div7" class="label_copy">
Members info
	</div>

	<div id="div8" class="label_copy">
Patient info
	</div>

	<div id="div3" class="label_copy">
Quote info
	</div>

	<div id="div4" class="label_copy">
	Apply info
	</div>

	<div id="div5" class="label_copy">
Agent info

	</div>

	<div id="div6" class="label_copy">
		General info
	</div>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
your current code seems to do all of that and more and I think it's the issue.
you should clean up your code and HTML

I believe you just need :

var subjectId = new RegExp('[\?&]subjectId=([^&#]*)').exec(location.href).pop();
var recipientId = new RegExp('[\?&]recipientId=([^&#]*)').exec(location.href).pop();
var isSubject = subjectId.length > 0;
var isRecipent = recipientId.length > 0;

and use this to hide or show your div
0
 
smfmetro10Author Commented:
hmm.. doesn't seem to work.

Can I just put that at the end of the function like this?
<script>
	$(document).ready(function () {	
			    $("#Coverage a:not, #ForMembers a:not,#GenInfo a:not(.button)").click(function () {			
			var v = $(this).attr("id");
			$("#recipientId ").val(v);

		
			var lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	         $("div.active").removeClass("active"); 
			  $("div a.active").removeClass("active"); 
			$("a[href='#"+lhash+"']").closest("div").addClass("active");
			$("a[href='#"+lhash+"']").closest("div a").addClass("active");
			

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}
			
			$("div a.active").addclass("active");
			$("div.active").removeClass("active"); 
			$("div.active").removeClass("active"); 
			$("div a.active").removeClass("active"); 
			if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");// do you mean that does'nt work
			$("#" + recipID).parent("div").addClass("active");// do you mean that does'nt work
		}
else {
   			$("#div6").show();
 			$("#6").addClass("active"); // please not 6 is not a valid id
			$("#6").parent("div").addClass("active"); // please not 6 is not a valid id
}
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});
          $("div.active").removeClass("active");
		url = window.location.search.substring(1);
		urlvars = url.split('?');
		var recipID = '';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
			var subjectId = new RegExp('[\?&]subjectId=([^&#]*)').exec(location.href).pop();
var recipientId = new RegExp('[\?&]recipientId=([^&#]*)').exec(location.href).pop();
var isSubject = subjectId.length > 0;
var isRecipent = recipientId.length > 0;
		}
	});
</script>

Open in new window

0
 
leakim971PluritechnicianCommented:
not really, by cleanup I would like to say, just remove the whole code and test the display/hide part using the logic described previously in the link

for example a simple page :

<script>
jQuery(function($) {
    var subjectId = new RegExp('[\?&]subjectId=([^&#]*)').exec(location.href).pop();
    var recipientId = new RegExp('[\?&]recipientId=([^&#]*)').exec(location.href).pop();
    var isSubject = subjectId.length > 0;
    var isRecipent = recipientId.length > 0;
    if(isRecipent) $(".subject").hide();
    if(isSubject) $(".recipient").hide();
});
</script> 

<div id="div6" class="recipient">I'm recipient 6</div>
<div id="div7" class="recipient">I'm recipient 7</div>
<div id="div8" class="recipient">I'm recipient 8</div>
<div id="div1" class="subject">I'm subject 1</div>
<div id="div2" class="subject">I'm subject 2</div>
<div id="div3" class="subject">I'm subject 3</div>

Open in new window

0
 
smfmetro10Author Commented:
will this work by itself... Like a simple version?

It doesnt seem to work

http://thelocalized.com/dc/contact_2.html?subjectId=3
0
 
leakim971PluritechnicianCommented:
use this to prevent the error:

jQuery(function($) {
    var subjectId = new RegExp('[\?&]subjectId=([^&#]*)').exec(location.href);
    if(subjectId.length) subjectId = subjectId.pop();
    var recipientId = new RegExp('[\?&]recipientId=([^&#]*)').exec(location.href);
    if(recipientId.length) recipientId = recipientId.pop();
    var isSubject = subjectId.length > 0;
    var isRecipent = recipientId.length > 0;
    if(isRecipent) $(".subject").hide();
    if(isSubject) $(".recipient").hide();
});

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now