Looking through results after Javascript "split" performed on string is interrupted

This code does what I want it to:

var countylistSplit=countylist.split('|');
for (i=0; i<countylistSplit.length; i++){
	currentcounty=countylistSplit[i];
	inserttext=inserttext+' <span class="nowrap"><span data-county="'+currentcounty+'">&#xf05c;</span> '+currentcounty+'</span>';
}

Open in new window


It splits my string, gets each individual value, and adds the <span> element to my inserttext variable, which I later write to the screen.

I added just one line of code:

var countylistSplit=countylist.split('|');
for (i=0; i<countylistSplit.length; i++){
	currentcounty=countylistSplit[i];
	inserttext=inserttext+' <span class="nowrap"><span data-county="'+currentcounty+'">&#xf05c;</span> '+currentcounty+'</span>';
	$('area[data-county="'+currentcounty+'"]').trigger('mouseover');
}

Open in new window


For some reason, my script fails. It no longer selects all of the counties in the list, it only grabs the first one. So something in that "trigger" event is causing the "for" loop to quit after the first iteration?

Is there a way for me to setup the trigger so that it doesn't interfere with the loop?

Thanks!
Brad BansnerWeb DeveloperAsked:
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.

Tom BeckCommented:
You are trying to trigger an event on an element before it is part of the DOM. You will need to append inserttext to the body somewhere first.
0
Brad BansnerWeb DeveloperAuthor Commented:
Sorry, there was an error in the script I was trying to paste. Here is the script that does NOT work:

for (i=0; i<countylistSplit.length; i++){
	console.log(countylist);
	currentcounty=countylistSplit[i];
	inserttext=inserttext+' <span class="nowrap"><span class="removecounty removelabel" data-county="'+currentcounty+'">&#xf05c;</span> '+currentcounty+'</span>';
	$('area[data-county="'+currentcounty+'"]').trigger('mouseover');
}

Open in new window


If I remove the line starting with "$('area...", the script works fine. I add that line, and the script fails.
0
Brad BansnerWeb DeveloperAuthor Commented:
So its not that inserttext isn't working, that part works fine. But inserttext fails because of the "trigger" line I added, for some reason. It doesn't seem to complete the loop.
0
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Alexandre SimõesManager / Technology SpecialistCommented:
First off, currentcounty and inserttext variables are being created as global variables.
Don't forget to always put a 'var' before a variable declaration. This will save you from a lot of useless debugging hours.

Second, how does it fail? What's the error?

Does the event get triggered?
My guess is that something in the event handler that is generating the error.
0
Brad BansnerWeb DeveloperAuthor Commented:
This is my entire Javascript function:

function refreshFilterList(countylist){
	var inserttext='';
	var currentcounty='';

	if (countylist!='|'){
		countylist=countylist.substring(1, countylist.length);
		countylist=countylist.substring(0, countylist.length-1);
		countylist=countylist.split('|').sort().join('|');
		inserttext=inserttext+'<p><b>Counties:</b>';
		var countylistSplit=countylist.split('|');
		for (i=0; i<countylistSplit.length; i++){
			currentcounty=countylistSplit[i];
			inserttext=inserttext+' <span class="nowrap"><span class="removecounty removelabel" data-county="'+currentcounty+'">&#xf05c;</span> '+currentcounty+'</span>';
			$('area[data-county="'+currentcounty+'"]').trigger('mouseover');
		}
		inserttext=inserttext+'</p>';
	}

	$('#currentfilters').html(inserttext);
}

Open in new window


I call it something like this:
refreshFilterList('Berks|Lancaster|Lebanon|York');

inserttext gets populated with an alphabetical list of county names, with the <span> markup as shown in the script.

This line in the script is causing the problem:
$('area[data-county="'+currentcounty+'"]').trigger('mouseover');

If I remove that line, everything works fine. When I add it back in, inserttext is only populated with the first county (alphabetically), it never makes it to the second county.

So that line in my code is somehow stopping the "for" loop from continuing, for some reason. I'm monitoring the console in Firebug, I don't see any error messages or anything.
0
Tom BeckCommented:
I did a complete test of your original code after your response to my first post and found no problems. The loop runs four times with no errors. Counties printed to the console. The jQuery line does not run at all because the selector refers to a nonexistent element. So, we are still missing some important piece of information.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var countylist = "county1|county2|county3|county4";
var countylistSplit=countylist.split('|');
var inserttext = "";
for (i=0; i<countylistSplit.length; i++){
	currentcounty=countylistSplit[i];
	console.log(currentcounty);
	inserttext=inserttext+' <span class="nowrap"><span class="removecounty removelabel" data-county="'+currentcounty+'">&#xf05c;</span> '+currentcounty+'</span>';
	$('area[data-county="'+currentcounty+'"]').trigger('mouseover');
}
document.body.innerHTML = inserttext;
</script>
<area>
</body>
</html>

Open in new window

0
Brad BansnerWeb DeveloperAuthor Commented:
The site is secured with a login, but I opened it up temporarily in case you might want to take a look:
http://subscribers.educatepa.com/search.htm

When you click the counties, they should be added to the list (in gray, right below the map). You will notice only the first county you click is added (alphabetically). But if you keep clicking counties, you will see the number of matches in the search results increase, so they are being added to the list.

The whole point of this is that I am trying to modify the script that highlights the image map. I want it to respond to a click rather than a mouseover, so that is why the "trigger" part of my script.

But when I call the trigger, not only is it not (yet) doing what I want, but won't allow the refreshFilterList function to finish.

Thanks.
0
Brad BansnerWeb DeveloperAuthor Commented:
I ended up taking an entirely different approach with this. I moved the logic that handles the image map highlights out of the "for" loop altogether. And I was able to do it without triggering mouseover, rather by using jQuery "data" statements, and another trigger available with the plugin, specifically this one:

.trigger('alwaysOn.maphilight');
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
Brad BansnerWeb DeveloperAuthor Commented:
I found a workaround and solution to the original problem.
0
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.