cdc

In case you can't tell I'm

learn

 ing 

JavaScript

  today.  Applause  Applause

I've got an area on my page where I want the text to be controlled by the menu above it. So when the user clicks on menuItemA, the text changes appropriately, etc. I've got it working fairly well, but I don't like my implementation.

My first thought was to use

AJAX

  (because everyone else is using

AJAX

 Applause but I thought it was overkill to have to reach back to the server everytime someone clicks a menu item. I don't expect this to happen too often, but it just doesn't make sense considering that I don't need any additional information from them so I should just send it with the initial request.

So I decided against

AJAX

  and have a

JavaScript

  function called menuItemAData() that sets the area to the appropriate text. And I just have what amounts to innerHTML="A whole bunch of HTML" in that function.

Is there a more efficient/elegant way to go about this? Or should I just use

AJAX

  and hope that Yahoo buys my site for $3M next year?

perkiset

quote author=cdc link=topic=112.msg525#msg525 date=1177534368

In case you can't tell I'm

learn

 ing 

JavaScript

  today.  Applause  Applause

Poor bastard.

quote author=cdc link=topic=112.msg525#msg525 date=1177534368

My first thought was to use

AJAX

  (because everyone else is using

AJAX

 Applause but I thought it was overkill to have to reach back to the server everytime someone clicks a menu item. I don't expect this to happen too often, but it just doesn't make sense considering that I don't need any additional information from them so I should just send it with the initial request.

Quite.

There are many ways to skin that cat (ref to another thread in a completely different place wonder who'll pick up on THAT one  Applause )

here are a couple:
for every menu item, simple make the menu item itself do the work. This is expedient but crappy for maintenance. Looks like this though:
<img src="agraphic.gif" onClick="document.getElementByID('targetID').innerHTML = 'New Text';">

note that people often forget that you can inline JS quite easily.

I don't like that though myself - shooting from the hip, I'd do something more like this:

<img src="agraphic.gif" id="graphic1" onClick="updateText(this)">

... then with accompanying JS...

function updateText(sender)
{
var targetID = sender.id;
var newMenu;
switch (targetID)
{
case 'graphic1':
newMsg = 'this is text 1';
break;
case 'graphic2':
newMsg = 'this is text 2';
break;
case 'graphic3':
newMsg = 'this is text 3';
break;
}
document.getElementById('targetDiv').innerHTML = newMsg;
}


Obviously, there are a whole bunch of things that you could and should do to this code to make it more robust and less brittle - as well as simply performing some error checking... but hopefully it'll get you going in the right direction. It's also a bit long winded (the compiler won't penalize you for that though) in an effort to be really readable...

/p

cdc

Ok, thanks. I just thought maybe there was a better way to do it than having these huge strings in my JS code. I guess not.

Do you think the SEs will index the text that is in that JS function? My guess is that they would, but what the hell do I know. I guess I'm going to find out soon enough...

perkiset

Lotsa debate on that one... my inclination is to say no... but I agree, WTF do I know  Applause

m0nkeymafia

You could use one

ajax

  call to pull off all the data from the server
Then use xsl to display it using a param as the branch variable.

Now when you need to update it, simply change the param using

javascript

  in your xsl processor. then re-transform the xml.

Job done, infinate transformations, one call, uber fast Applause
Im pretty sure its how the adwords stuff works on google, cos you can change the sorting on the table uber quick

thedarkness

quote author=cdc link=topic=112.msg537#msg537 date=1177537362

Ok, thanks. I just thought maybe there was a better way to do it than having these huge strings in my JS code. I guess not.

Do you think the SEs will index the text that is in that JS function? My guess is that they would, but what the hell do I know. I guess I'm going to find out soon enough...


Don't know.

An alternative approach. Create your page with all text in divs overalyed on top of each other with 100% opacity and different z-levels. As a menu item is clicked adjust the z-level accordingly? This is only a theory at the moment, but I believe it would handle the SE indexing issue for sure and still accomplish what you want in an efficient fashion.

Thoughts?

Cheers,
td


Perkiset's Place Home   Politics @ Perkiset's