Log in

View Full Version : String Object Method Help


bigalo
11-20-2009, 07:45 PM
Hello,

I was able to solve an issue I had in previous post in writing some code to grab a section of a cookie value string (2 letter state ex MD) and check against it to do something. That was easy because the state was at the end of the string and all I had to do was use the slice() method. Now I was to be able to grab the 2 letter state from a string that looks like this:

BALTIMORE, MD|blah blah|blah blah|blah blah (the real cookie value string will always be separated with pipes (|))

Can anyone please help?

Thanks in advance!



<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<SCRIPT LANUAGE="JavaScript">

function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
</SCRIPT>
</HEAD>
<BODY>
<script>
$(function(){
$('div').each(function(){
if($(this).hasClass('stateSelect1')){
if (getCookie("location")!=null){
var state = getCookie("location").slice(-2).toLowerCase();
var stateArray = [];
stateArray = $(this).attr('rel').toLowerCase().split(',');
if($.inArray(state,stateArray) >= 0){
$(document).ready(function(){
$(".stateSelect0").css("display","none");
$(".stateSelect1").css("display","block");
});
}
}
}
});
});
</script>
<strong>Step 1. Copy and paste in cookie set text field:</strong> <br>
<br>
<strong>Show Image1:</strong><br>
CHARLOTTE, NC|blah blah|blah blah|blah blah|blah blah<br>
BALTIMORE, MD|blah blah|blah blah|blah blah<br>
<br>
<strong>Show Image2:</strong><br>
COLUMBIA, SC|blah blah|blah blah|blah blah<br>
RESTON, VA|blah blah|blah blah|blah blah<br>
<br>
<strong>Show Image3:</strong><br>
LOS ANGELES, CA|blah blah|blah blah|blah blah<br>
SEATLE, WA|blah blah|blah blah|blah blah<br>
<br>
<br>
<strong>Step 2.</strong>
<input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location"))' />
<br>
<br>
<strong>Step 3.</strong> Now refresh page. <br>
<br>
<style>
.default{ border:3px solid limegreen; margin-bottom:5px; width:200px}
.div1{ border:3px solid red; margin-bottom:5px; width:200px}
.div2 { border:3px solid purple; margin-bottom:5px; width:200px}
.div3 { border:3px solid yellow; margin-bottom:5px; width:200px}
.div4 { border:3px solid blue; margin-bottom:5px; width:200px}
</style>
<!--DEFAULT IMAGE IF NO COOKIE SET OR NON LISTED STATE-->
<div class="stateSelect0 default"> DEFAULT IMAGE </div>
<!--DEFAULT IMAGE IF NO COOKIE SET OR NON LISTED STATE-->
<div class="stateSelect1 div1" rel="NC,MD" style="display:none">Image 1 - DIV 1</div>
<div class="stateSelect2 div2" rel="SC,VA" style="display:none">Image 2 - DIV 2</div>
<div class="stateSelect3 div3" rel="WA,CA" style="display:none">Image 3 - DIV 3</div>
</BODY>
</HTML>
jscheuer1
11-21-2009, 04:50 AM
The rel attribute is not a valid attribute for the div element. The organization of some of the page elements is non-standard, encoding and DOCTYPE are missing, other minor non-standard issues are present in the HTML. Aside from that, there are several logical 'whoopsies' in the script code. Also, don't you think it would be nice if:


Although using jQuery, other libraries could be used on the page?
The change is recorded in the cookie, but also takes effect immediately?


Correcting the problems stated, and adding the functionality (nice ifs):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.default{ border:3px solid limegreen; margin-bottom:5px; width:200px}
.div1{ border:3px solid red; margin-bottom:5px; width:200px}
.div2 { border:3px solid purple; margin-bottom:5px; width:200px}
.div3 { border:3px solid yellow; margin-bottom:5px; width:200px}
.div4 { border:3px solid blue; margin-bottom:5px; width:200px}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
function runit($, state){
var ss = $('.stateSelect');
ss.each(function(){
if(this.id.indexOf(state) > -1){
ss.css('display', 'none');
$(this).css('display', 'block');
}
});
}
(function($){
var state;
if((state = getCookie('location'))){
state = state.split('|')[0].slice(-2);
$(function(){
runit($, state)
});
}
})(jQuery);
jQuery(function($){
$('input[value="Set Cookie"]').bind('click', function(){
var state;
setCookie('location', state = prompt('Enter your location'));
runit($, state.split('|')[0].slice(-2));
});
});
</script>
</HEAD>
<BODY>
<strong>Step 1. Copy and paste in cookie set text field:</strong> <br>
<br>
<strong>Show Image1:</strong><br>
CHARLOTTE, NC|blah blah|blah blah|blah blah|blah blah<br>
BALTIMORE, MD|blah blah|blah blah|blah blah<br>
<br>
<strong>Show Image2:</strong><br>
COLUMBIA, SC|blah blah|blah blah|blah blah<br>
RESTON, VA|blah blah|blah blah|blah blah<br>
<br>
<strong>Show Image3:</strong><br>
LOS ANGELES, CA|blah blah|blah blah|blah blah<br>
SEATLE, WA|blah blah|blah blah|blah blah<br>
<br>
<br>
<strong>Step 2.</strong>
<input type="button" value="Set Cookie">
<br>
<br>
<strong>Step 3.</strong> Now refresh page. <br>
<br>
<!-- DEFAULT IMAGE IF NO COOKIE SET OR NON LISTED STATE -->
<div class="stateSelect default"> DEFAULT IMAGE </div>
<!-- DEFAULT IMAGE IF NO COOKIE SET OR NON LISTED STATE -->
<div class="stateSelect div1" id="NC_MD" style="display:none">Image 1 - DIV 1</div>
<div class="stateSelect div2" id="SC_VA" style="display:none">Image 2 - DIV 2</div>
<div class="stateSelect div3" id="WA_CA" style="display:none">Image 3 - DIV 3</div>
</BODY>
</HTML>

P.S. I'm still not real thrilled with your cookie unit ;) - Also, if you really want to use jQuery, I believe it has one or more cookie units available that you may want to check out.
bigalo
11-23-2009, 01:35 PM
Thanks so much for your tips and help John! I'm still trying to learn jQuery, but I have a long way to go.

BTW - That cookie script is throw away, I just needed something to create a cookie for me to test.


Cheers!