The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. October 14, 2019, 06:49:14 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Overkill For AJAX...but what?  (Read 3871 times)
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« on: April 25, 2007, 01:52:48 PM »

In case you can't tell I'm learning JavaScript today.  Need Help  D'oh!

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) 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?

Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: April 25, 2007, 02:20:22 PM »

In case you can't tell I'm learning JavaScript today.  Need Help  D'oh!
Poor bastard.

My first thought was to use AJAX (because everyone else is using AJAX) 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  ROFLMAO )

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...
Code:
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
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
cdc
Expert
****
Offline Offline

Posts: 105


View Profile
« Reply #2 on: April 25, 2007, 02:42:42 PM »

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...
Logged

Will code for food.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #3 on: April 25, 2007, 03:21:10 PM »

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

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
m0nkeymafia
Expert
****
Offline Offline

Posts: 240


Check it!


View Profile
« Reply #4 on: May 10, 2007, 02:03:51 PM »

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 Cheesy
Im pretty sure its how the adwords stuff works on google, cos you can change the sorting on the table uber quick
Logged

I am Tyler Durden
thedarkness
Lifer
*****
Offline Offline

Posts: 585



View Profile
« Reply #5 on: May 11, 2007, 05:58:41 PM »

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
Logged

"I want to be the guy my dog thinks I am."
 - Unknown
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!