Solved

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

Posted on 2014-09-19
9
128 Views
Last Modified: 2014-09-26
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
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40333408
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40333433
$(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
 

Author Comment

by:smfmetro10
ID: 40333691
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 82

Expert Comment

by:leakim971
ID: 40333730
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
 

Author Comment

by:smfmetro10
ID: 40333920
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40333928
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
 

Author Comment

by:smfmetro10
ID: 40333937
will this work by itself... Like a simple version?

It doesnt seem to work

http://thelocalized.com/dc/contact_2.html?subjectId=3
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40333960
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
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40335402
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question