homepage Welcome to WebmasterWorld Guest from 54.198.46.115
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Adding URLs with Javascript...
syllogism




msg:1476122
 11:32 am on Jul 15, 2005 (gmt 0)

I have a unique problem.

I'm looking to create a large number of automatically generated links using Javascript.

I have a list of store names, addresses and city's listed in a table.


<table>
<tbody>
<tr><td>Store name</td><td>555 Everywhere Street</td><td>New York</td></tr>
<tr><td>Store name</td><td>666 Everywhere Street</td><td>Los Angeles</td></tr>
</tbody>
</table>

I would want to automatically add a link to the store name using the values from the address and city field. Specifically, I'm looking to provide queries directly to Google Maps and would rather not maintain two sets of information (an address/city and a url).

So in essence:


<table>
<tbody>
<tr><td><a href="http://(address)(city)">Store name<a></td>
<td>555 Everywhere Street</td><td>New York</td></tr>
<tr><td><a href="http://(address)(city)">Store name</a></td>
<td>666 Everywhere Street</td><td>Los Angeles</td></tr>
</tbody>
</table>

Is it even possible to do this with Javascript?

 

lutherman




msg:1476123
 1:49 pm on Jul 16, 2005 (gmt 0)

howdy,

not sure if i understand what the target functionality is yet, but here's my first try...

put this script inside the table that will hold the links:

<table> 
<tbody>
<script language=javascript>
var name = new Array();
var city = new Array();
var address = new Array();
name[0]="Blah!";
city[0]="New York";
address[0]="555 Happening St.";
name[1]="~Yadi ya~";
city[1]="Los Angeles";
address[1]="111 Perfect Circle";
name[2]="Haha House!";
city[2]="Atlanta";
address[2]="123 Lucky St.";
for (i=0;i<name.length;i++)
document.write("<tr><td><a href='http://maps.google.com/maps?q="+address[i]+','+city[i]+"'>"+
name[i]+"<a></td><td>"+address[i]+"</td><td>"+city[i]+"</td></tr>");
</script>
</tbody>
</table>

however there also the issue of correctly formatting the address and city to be valid URLs when used for google maps.

EDIT: nevermind, i just pasted that code into a temp html file and it seemed to work fine with google maps.

syllogism




msg:1476124
 7:22 pm on Jul 16, 2005 (gmt 0)

Thanks a bunch lutherman - very helpful!

One small issue...

I can't generate the name/address/city content dynamically with Javascript because of accessibility issues. Your code pointed me in the right direction and I managed to come up with something that reads in the table values:


function addMap()
{
var tr,city,loc,area,createLink,pickText;

tr=document.getElementById('parklist').getElementsByTagName('tr');
for(i=0;i<tr.length;i++)
{
city=tr[i].childNodes[0].firstChild;
loc=tr[i].childNodes[1].firstChild;
area=tr[i].childNodes[2].firstChild;
createLink=document.createElement('a');
pickText=document.createTextNode(city.nodeValue);
createLink.appendChild(pickText);
createLink.setAttribute('href',"http://maps.google.com/maps?q="+loc.nodeValue+','+area.nodeValue+",("+city.nodeValue+")&hl=en");

if (tr[i].getElementsByTagName('td').length>0)
{
city.parentNode.insertBefore(createLink,city);
}
}
}

This almost works like I want it to with one exeception: I get two city names side by side, one with the link and one without.

I expect I can fix this by using replaceChild(), removeChild() or perhaps nodeValue.replace() but I can't seem to figure out how.

Suggestions?

syllogism




msg:1476125
 7:24 pm on Jul 16, 2005 (gmt 0)

Double-post.

ORBiTrus




msg:1476126
 4:16 am on Jul 17, 2005 (gmt 0)

Generate it serverside.

That said, it is possible:

eg:
function generateMapLinks () {
var rows = elm.getElementsByTagName('tr');
var rowsL = rows.length;
for (var i=0; i<rowsL; i++) {
var cols = rows[i].getElementsByTagName('td');

// we know that col[0] is the name where we want the link
// we know that col[1] is the location
var link = generateMapLink(col[0].innerHTML, col[1].innerHTML);

col[0].innerHTML = ""; // Empty col[0]
col[0].insertBefore(link, null); // set contents
}
}

function generateMapLink (text, location) {
var a = document.createElement('a');
var link = '.................';
a.href = link; // For browsers that don't support setAttribute
a.setAttribute('href', link);
a.innerHTML = text;

return a;
}

Edit:
Before I forget, if you attach any events on the Store Title beforehand, you will loose them. If you want to keep them, you will have to loop through all the children, removing them as you add them... it's not fun, but it's the only clean way.

I don't think you need to, it generally only is needed in thin-client applications (thin-client sounds better than Web, doesn't it?).

Edit #2:
Oh wait... you probably don't want to generate server-side because G.Maps is Javascript, so why show the link if they cann't handle Javascript, right? ...Smart.

syllogism




msg:1476127
 7:48 pm on Jul 17, 2005 (gmt 0)

ORBiTrus,

I can't seem to get your code to work mate. I understand what it's supposed to be doing, but can't seem to have it do it. Am I missing something incredibly simple?

Ps. You're right on about doing this client-side. If people have javascript turned off, I would rather they not wonder why the mapping won't work.

ORBiTrus




msg:1476128
 9:00 pm on Jul 17, 2005 (gmt 0)

In working format:

<script type='text/javascript'>
function generateMapLinks (elm) {
var rows = elm.getElementsByTagName('tr');
var rowsL = rows.length;
for (var i=0; i<rowsL; i++) {
var col = rows[i].getElementsByTagName('td');

// we know that col[0] is the name where we want the link
// we know that col[1] is the address
// we know that col[2] is the city
var link = generateMapLink(col[0].innerHTML, col[1].innerHTML+","+col[2].innerHTML);

col[0].innerHTML = ""; // Empty col[0]
col[0].insertBefore(link, null); // set contents
}
}

function generateMapLink (text, location) {
var a = document.createElement('a');
var link = "http://maps.google.com/maps?q="+location;
a.href = link; // For browsers that don't support setAttribute
a.setAttribute('href', link);
a.innerHTML = text;

return a;
}
</script>

<table id='me'>
<tbody>
<tr><td>Store name</td><td>555 Everywhere Street</td><td>New York</td></tr>
<tr><td>Store name</td><td>666 Everywhere Street</td><td>Los Angeles</td></tr>
</tbody>
</table>

<script type='text/javascript'>
generateMapLinks(document.getElementById('me'));
</script>

A few bug-fixes (mostly typos). Gotta love Fx web-dev extensions!

syllogism




msg:1476129
 11:01 pm on Jul 17, 2005 (gmt 0)

Wonderful!

A bit of tweaking for my uses, but it most definitely does the trick. Thanks a million ORBiTrus!

syllogism




msg:1476130
 11:38 pm on Jul 17, 2005 (gmt 0)

Slight modifications for my use. Posted and commented below in case anyone finds them useful.


<script type='text/javascript'>
function generateMapLinks (elm) {
var rows = elm.getElementsByTagName('tr');
var rowsL = rows.length;

for (var i=0; i<rowsL; i++) {
var col = rows[i].getElementsByTagName('td');
if (rows[i].getElementsByTagName('td').length>0) { // skip over non-td (e.g. th) elements

// we know that col[0] is the name where we want the link
// we know that col[1] is the address
// we know that col[2] is the city
var link = generateMapLink(col[0].innerHTML, col[1].innerHTML+","+col[2].innerHTML);

col[0].innerHTML = ""; // Empty col[0]
col[0].insertBefore(link, null); // set contents
}
}
}

function generateMapLink (text, location) {
var a = document.createElement('a');
var link = "http://maps.google.com/maps?q="+location",("+text+")"; //add location name to links
link=link.replace(/ /g,"+"); // tidy links for Google Maps - replace spaces with plus sign
a.href = link; // for browsers that don't support setAttribute
a.setAttribute('href', link);
a.innerHTML = text;

return a;
}
</script>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved