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

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.