Solved

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

Posted on 2014-11-07
9
79 Views
Last Modified: 2014-11-13
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!
0
Comment
Question by:bbdesign
  • 6
  • 2
9 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:bbdesign
Comment Utility
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
 

Author Comment

by:bbdesign
Comment Utility
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
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:bbdesign
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:bbdesign
Comment Utility
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
 

Accepted Solution

by:
bbdesign earned 0 total points
Comment Utility
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
 

Author Closing Comment

by:bbdesign
Comment Utility
I found a workaround and solution to the original problem.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now