Help with JavaScript/PHP Question?
Posted August 20th, 2005 @ 10:42pm by Erik J. Barzeski
I have a list of 10 unordered links on a web page, where each links via href="#" and has an onClick that performs a function called changeText(). The changeText() function changes the "innerHTML" value of a div on the same page, replacing the text "Click one of the names above" with a bunch of HTML styled content - images, italics, tables, etc.
In an effort to keep the main page clean, I've been attempting different methods of using PHP and JavaScript (primarily via PHP's include()) to split off each of the 10 different "contents" into separate files.
This works great… unless the included file has a carriage return in it.
So now I'm taking a breather and looking into other ways of doing this. Clearly, I'd rather not re-load the page and pass a parameter via GET or POST, which is why I'm using JavaScript to begin with.
Any suggestions?
Donate Life
Posted 20 Aug 2005 at 11:11pm #
Maybe include a div for each section that can be shown, and have all the HTML in them from the start. But all of them, by default, will have the style 'display: none;' and each link merely uses JavaScript to change that to 'display: block;' for whichever one.
You can still use PHP to include the HTML, the difference being that it would be directly in the divs, rather than in JavaScript strings.
Posted 20 Aug 2005 at 11:33pm #
That's what I tried right after posting this entry, in fact. It's not pretty, having 10 or so lines to turn all of the divs off and then 10
iftests to turn one div on, but it seems to be working just fine.Posted 21 Aug 2005 at 12:21am #
You could put the names of the divs in a Javascript array and iterate over that hiding each one except the one whose name is passed in as a parameter to the function. It's a little bit better than 10 lines to turn on and 10 lines to turn off.
Another, overkill-yet-kinda-cool option is to use the king of web buzzwords -- Ajax. Your Ajax query though just fetches the relevant section of the page from the server and inserts it into the DOM. So I guess it's not really AjaX so much as Aj. 😉
Posted 21 Aug 2005 at 12:37am #
Yes, I can put them in a loop, but then I've gotta have the ten-line array setup. So I'm really not saving much space.
The solution seems to be working fine, which only proves once again that as soon as i post to my blog or a mailing list, I tend to think of the answer myself. 😛
Posted 21 Aug 2005 at 10:35am #
Something else I just thought of is that you could derive the array of div names from the DOM itself, if the 10 divs are nicely contained in another div or identifiable container. That way, if you add more divs, you don't need to remember to update an array or multiple functions to make it work.
Data-driven programming -- it's the way to go 😉
Posted 21 Aug 2005 at 10:26pm #
Or you can use the number as part of the name (div1...div10, etc)