Daniel St. Jules

Hey everyone, I was hoping to receive a little help in figuring out how to accomplish this fix of mine. For a recent design I need to create a little workaround for IE. Basically I need to find all td's with class "a, and create a div within those td's, surrounding its contents with class "b". So, if I had <table> <tr> <td class="a"> Content here <table> <tr> <td class="a"> More Content here </td> </tr> </table> </td> </tr> </table> It would render as: <table> <tr> <td class="a"><div class="b"> Content here <table> <tr> <td class="a"><div class="b"> More Content here </div></td> </tr> </table> </div></td> </tr> </table> Now, I figure I can use RegExp to get the td's with the class name "a", but I have no idea how to dynamically create a div like that, particularly finding a closing td that belongs to an opening td with class "a". Any thoughts on how to accomplish this? Thanks very much!

Hey all, I'm hoping someone may assist me in this matter. I have a form, and the form contains a select field with multiple="multiple", and a hidden field. I'd like to have the contents of the select, upon change, be added to the hidden field. To separate the different values of the select options in the hidden field, I'd like to use spaces. So, an example of the result would be: Select option 1 value = 20 option 2 value = 40 option 3 value = 50 option 5 value = 200 And, if option 1 and 5 were selected, then the value of the hidden field would look like this: 20 200 Any ideas as to how I could accomplish this? Any and all help would be greatly appreciated! Thanks.

But it shouldn't be empty. Here's an example. I input: 735856 The output ends up being: 115,88, Where as it should be: 115,88,86 For some reason $colouroftext[2] is always returning empty when it shouldn't, which is why I'm asking for help, cause I really have no idea why. Thanks again. -Edit: Nevermind, I think I figured it out.

I'm trying to convert a Hex colour value to RGB using a function I found at http://www.anyexample.com/programming/php/php_convert_rgb_from_to_html_hex_color.xml Here's the code: function html2rgb($color){ if ($color[0] == '#') $color = substr($color, 1); if (strlen($color) == 6) list($r, $g, $b) = array($color[0].$color[1],$color[2].$color[3],$color[4].$color[5]); elseif (strlen($color) == 3) list($r, $g, $b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]); else return false; $r = hexdec($r); $g = hexdec($g); $b = hexdec($b); return array($r, $g, $b); } $textcolour = addslashes($_POST["textcolour"]); $colouroftext = html2rgb($textcolour); echo "Text colour: $textcolour <br /> $colouroftext[0],$colouroftext[1],$colouroftext[2]"; The problem is, when I try to print the RGB values, only $colouroftext[0] and $colouroftext[1] work. $colouroftext[2] keeps showing empty, and I can't figure out why. Any help would be greatly appreciated in solving this. Thanks.

Ah, nvm, problem fixed. It's just because the $ function is already defined in prototype, so I just had to rename it for the color picker.

Alright, probably not the most descriptive title for the topic, but I figured it'd be the easiest way to get the message across. Basically, I'm trying to implement the color picker found at http://www.nofunc.com/DHTML_Color_Picker/ for a little page I'm whipin together. The page basically consists of a bunch of a divs surrounding a bunch of inputs and a submit, in which when the submit button is pressed, the contents of the div are replaced by the output of a php file. Unfortunately, as soon as I insert the colorpicker into my page, my ajax call no longer works and I cannot update the contents of the div. Here's some the code with all the unecessary stuff taken out for easier reading: <link href="plugin.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> $('load').style.display = 'none'; function send(){ var params = Form.serialize($('commentsForm')); new Ajax.Updater('updateDiv', 'generator.php', {asynchronous:true, parameters:params}); $('load').style.display = 'block'; } </script></head> <body> <div class="gen"> <div id="updateDiv"> <div id="plugin" style="TOP: 58px; Z-INDEX: 20;"> <div id="plugCUR"></div><div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">FFFFFF</div><br /> <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value"> <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div> </div> <form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue"> <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div> <div id="Hmodel"></div> </form> </div> <script type="text/javascript"> /* DHTML Color Picker : v1.0.4 : 2008/04/17 */ /* http://www.colorjack.com/software/dhtml+color+picker.html */ function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); } function $S(o) { o=$(o); if(o) return(o.style); } function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); } function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); } function toggle(v) { $S(v).display=($S(v).display=='none'?'block':'none'); } function within(v,a,z) { return((v>=a && v<=z)?true:false); } function XY(e,v) { var z=agent('msie')?[event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop]:[e.pageX,e.pageY]; return(z[zero(v)]); } function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); } /* COLOR PICKER */ var maxValue={'H':360,'S':100,'V':100}, HSV={H:360, S:100, V:100}; var slideHSV={H:360, S:100, V:100}, zINDEX=15, stop=1; function HSVslide(d,o,e) { function tXY(e) { tY=XY(e,1)-ab.Y; tX=XY(e)-ab.X; } function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); } function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); } function drag(e) { if(!stop) { if(d!='drag') tXY(e); if(d=='SVslide') { ds.left=ckHSV(tX-oo,162)+'px'; ds.top=ckHSV(tY-oo,162)+'px'; slideHSV.S=mkHSV(100,162,ds.left); slideHSV.V=100-mkHSV(100,162,ds.top); HSVupdate(); } else if(d=='Hslide') { var ck=ckHSV(tY-oo,163), r='HSV', z={}; ds.top=(ck-5)+'px'; slideHSV.H=mkHSV(360,163,ck); for(var i in r) { i=r.substr(i,1); z[i]=(i=='H')?maxValue[i]-mkHSV(maxValue[i],163,ck):HSV[i]; } HSVupdate(z); $S('SV').backgroundColor='#'+color.HSV_HEX({H:HSV.H, S:100, V:100}); } else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; } }} if(stop) { stop=''; var ds=$S(d!='drag'?d:o); if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); $S(o).zIndex=zINDEX++; } else { var ab=abPos($(o)), tX, tY, oo=(d=='Hslide')?2:4; ab.X+=10; ab.Y+=22; if(d=='SVslide') slideHSV.H=HSV.H; } document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; drag(e); } }; function HSVupdate(v) { v=color.HSV_HEX(HSV=v?v:slideHSV); $('textcolour').value=v; $('plugHEX').innerHTML=v; $S('plugCUR').background='#'+v; $S('plugID').background='#'+v; return(v); }; function loadSV() { var z=''; for(var i=165; i>=0; i--) { z+="<div style=\"BACKGROUND: #"+color.HSV_HEX({H:Math.round((360/165)*i), S:100, V:100})+";\"><br /><\/div>"; } $('Hmodel').innerHTML=z; }; /* COLOR LIBRARY */ color={}; color.cords=function(W) { var W2=W/2, rad=(hsv.H/360)*(Math.PI*2), hyp=(hsv.S+(100-hsv.V))/100*(W2/2); $S('mCur').left=Math.round(Math.abs(Math.round(Math.sin(rad)*hyp)+W2+3))+'px'; $S('mCur').top=Math.round(Math.abs(Math.round(Math.cos(rad)*hyp)-W2-21))+'px'; }; color.HEX=function(o) { o=Math.round(Math.min(Math.max(0,o),255)); return("0123456789ABCDEF".charAt((o-o%16)/16)+"0123456789ABCDEF".charAt(o%16)); }; color.RGB_HEX=function(o) { var fu=color.HEX; return(fu(o.R)+fu(o.G)+fu(o.B)); }; color.HSV_RGB=function(o) { var R, G, A, B, C, S=o.S/100, V=o.V/100, H=o.H/360; if(S>0) { if(H>=1) H=0; H=6*H; F=H-Math.floor(H); A=Math.round(255*V*(1-S)); B=Math.round(255*V*(1-(S*F))); C=Math.round(255*V*(1-(S*(1-F)))); V=Math.round(255*V); switch(Math.floor(H)) { case 0: R=V; G=C; B=A; break; case 1: R=B; G=V; B=A; break; case 2: R=A; G=V; B=C; break; case 3: R=A; G=B; B=V; break; case 4: R=C; G=A; B=V; break; case 5: R=V; G=A; B=B; break; } return({'R':R?R:0, 'G':G?G:0, 'B':B?B:0, 'A':1}); } else return({'R':(V=Math.round(V*255)), 'G':V, 'B':V, 'A':1}); }; color.HSV_HEX=function(o) { return(color.RGB_HEX(color.HSV_RGB(o))); }; /* LOAD */ loadSV(); HSVupdate({H:0, S:0, V:20}); $S('plugin').left=($('colorspy').offsetLeft+35)+'px'; $S('plugin').top=($('colorspy').offsetTop+35)+'px'; $S('plugin').display='block'; </script> <form id="commentsForm" action=""> <input id="textcolour" name="colour" value="" /> <div id="load" style="text-align: left;"> <img src="loading_dark.gif" alt="Loading..." /> </div> <br /> <input name="sendbutton" type="button" class="inputss" value="Send" onclick="send();" /> </form> </div> </div> </body> </html> I'm no JS expert as I'm more of a PHP guy, so I'm not really sure where the conflict is occuring. Err, actually, I have no idea. =P So, any help would be greatly appreciated. Thanks, Daniel

Hello, I'm trying to setup Apache to relay any requests for media files such as images and video using the proxy module. So, to do this, I need to modify the httpd.conf to include the proxy module, then add something along the lines of? ProxyRequests Off ProxyPreserveHost On ProxyPass .*/.(jpe?g|gif|bmp|png)$ http://0.0.0.0:81/ ProxyPassReverse / http://0.0.0.0:81/ This was something I had whiped up, basing it on the idea that I could simply use conditions like an .htaccess file, but I have no idea if that's true or not as I haven't been able to find a read on what is permitted, or the "syntax" of the httpd.conf file. So, I was wondering if someone could confirm whether or not this is infact possible, or if I'm going about this all wrong. Any help would be greatly appreciated. Thanks.

Well, I've encountered yet another little snag. I'm currently trying to implement LightBox2 in this page: http://gamexe.net/smashbros/ssbb_characters.php and I seem to be doing something wrong yet again. The Problem Although LightBox works when the page is showing the default content (click on More screenshots! when going to http://gamexe.net/smashbros/ssbb_characters.php to see what I mean), when I click on a tab in the left menu and try to view screenshots, the rel="lightbox[ssbb]" no longer uses the lightbox function to work its magic. (The More Screenshots link at the bottom of the Fox tab is the only other link that uses lightbox) To view the error, try clicking on Fox, and then the More Screenshots! link at the bottom of the container. It's like the content, after Ajax has been used to display it, doesn't have access to the javascript code in my header. =/ The code (unimportant information has been removed) ssbb_characters.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" /> <link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" /> <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie6.css" /><![endif]--> <!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]--> <script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script> <script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script> <script type="text/javascript" src="http://www.gamexe.net/layout5/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://www.gamexe.net/layout5/lightbox.js"></script> <link rel="stylesheet" href="http://www.gamexe.net/layout5/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript"> function init () { var tabs = document.getElementsByClassName('tabs'); for (var i = 0; i < tabs.length; i++) { $(tabs[i].id).onclick = function () { getTabData(this.id); } } } function getTabData(id) { var url = '../smashbros/ssbb_characters_content.php'; var rand = Math.random(9999); var pars = 'id=' + id + '&rand=' + rand; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); } function showLoad () { $('load').style.display = 'block'; } function showResponse (originalRequest) { var newData = originalRequest.responseText; var response = newData.split("|||"); $('load').style.display = 'none'; document.getElementById('gcontent').innerHTML = response[0]; document.getElementById('gcontent2').innerHTML = response[1]; } </script> </head> <body onload="init()"> <div id="container"> <div id="content"><h1>Characters</h1> <div id="ginfo1"><div id="ginfo2"><div id="ginfo3"> <div id="ginfo_right"> <div style="padding: 0 10px;"> <div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div> <div id="gcontent"> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot1.jpg" rel="lightbox[ssbb]">More Screenshots!</a><br /> <div id="lightbox_preload"> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot2.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot3.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot4.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot5.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot6.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot7.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot8.jpg" rel="lightbox[ssbb]"></a> </div> Welcome to Gamexe.net's Super Smash Bros Brawl Character list. This page is dedicated to bringing you up-to-date information on all the Brawl characters announced and confirmed. As the game approaches release, more information will be added. Upon release, expect to find training videos and more for all your favourite Smash Bros characters.<br /><br /> Now, to start viewing, please click on the name of one of the characters in the left navigation. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> </div> </div> <div id="ginfo_left"> <div class="tabs" id="tab1">Bowser</div> <div class="tabs" id="tab2">Donkey Kong</div> <div class="tabs" id="tab3">Fox</div> <div class="tabs" id="tab4">Ike</div> <div class="tabs" id="tab5">Link</div> <div class="tabs" id="tab6">Mario</div> <div class="tabs" id="tab7">Peach</div> <div class="tabs" id="tab8">Pit</div> <div class="tabs" id="tab9">Samus</div> <div class="tabs" id="tab10">Snake</div> <div class="tabs" id="tab11">Wario</div> <div class="tabs" id="tab12">Yoshi</div> <div class="tabs" id="tab13">Zelda</div> <div class="tabs" id="tab14">Zero Suit Samus</div> </div> </div></div></div> <div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3"> <div id="gcontent2" align="center"><br /><br /></div> </div></div></div> </div><!-- content --> </div><!-- wrapper --> </body> </html> ssbb_characters_content.php: <?php $tabid = addslashes($_GET['id']); switch($tabid) { case 'tab1': $gcontent = ''; $gcontent2 = ''; break; case 'tab2': $gcontent = ''; $gcontent2 = ''; break; case 'tab3': $gcontent = ' <div align="center"><img src="http://www.gamexe.net/layout5/veteran.gif" alt="Veteran!" /></div><br /> <b>Name:</b> Fox<br /> <b>Quick-Bio:</b> <br /><br /><br /> <img src="http://www.gamexe.net/smashbros/ssbb/fox/fox.jpg" alt="" /> '; $gcontent2 = '<h4>Final Smash</h4><br /> <h4>Screenshots</h4> <div style="width: 394px;"> <div class="spacer"> </div> <div class="ginfo_screen"> <img src="http://www.gamexe.net/smashbros/ssbb/fox/screen1.jpg" alt="screenshot" /><br /> It\'s over 9000! </div> <div class="ginfo_screen"> <img src="http://www.gamexe.net/smashbros/ssbb/fox/screen2.jpg" alt="screenshot" /><br /> Head to head combat: redefined </div> <div class="ginfo_screen"> <img src="http://www.gamexe.net/smashbros/ssbb/fox/screen3.jpg" alt="screenshot" /><br /> EXTREME staring contest </div> <div class="ginfo_screen"> <img src="http://www.gamexe.net/smashbros/ssbb/fox/screen4.jpg" alt="screenshot" /><br /> Has anyone seen my gun? </div> <div class="spacer"> </div> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot1.jpg" rel="lightbox[ssbb]">More Screenshots!</a> </div> <div id="lightbox_preload"> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot2.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot3.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot4.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot5.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot6.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot7.jpg" rel="lightbox[ssbb]"></a> <a href="http://www.gamexe.net/smashbros/ssbb/fox/screenshot8.jpg" rel="lightbox[ssbb]"></a> </div>'; break; case 'tab4': $gcontent = ''; $gcontent2 = ''; break; case 'tab5': $gcontent = ''; $gcontent2 = ''; break; case 'tab6': $gcontent = ''; $gcontent2 = ''; break; case 'tab7': $gcontent = ''; $gcontent2 = ''; break; case 'tab8': $gcontent = ''; $gcontent2 = ''; break; case 'tab9': $gcontent = ''; $gcontent2 = ''; break; case 'tab10': $gcontent = ''; $gcontent2 = ''; break; case 'tab11': $gcontent = ''; $gcontent2 = ''; break; case 'tab12': $gcontent = ''; $gcontent2 = ''; break; case 'tab13': $gcontent = ''; $gcontent2 = ''; break; case 'tab14': $gcontent = ''; $gcontent2 = ''; break; case 'tab15': $gcontent = ''; $gcontent2 = ''; break; case 'tab16': $gcontent = ''; $gcontent2 = ''; break; default: $gcontent = 'There was an error.'; $gcontent2 = 'Please refresh this page.'; break; } $request_text = $gcontent . "|||" . $gcontent2; print $request_text; usleep(900000); ?> The CSS file for LightBox 2 has been slightly modified, but only barely, and it still wasn't working as intended before I made the changes. As for the JS files, they were copy-pasted. I know I'm a bit out of my league here, but I find that I only learn through trial and error. I just seems that while learning Ajax and javascript, it's been mostly error. ^^ Help with this issue would be greatly appreciated. Thank you, Daniel

Ohhh, I was under the impression that when PHP would use the addslashes function, it would first replace the $variable, which the function is being used on, with its contents, and then add the slashes. I suppose I just didn't quite understand how it would be parsed. Well, that makes me feel so much safer with my website. ^^ Thanks for the help. =D

I've used addslashes previously to prevent SQL injection, but I still don't quite understand how it would be beneficial in this case. Actually, to be more precise, I don't understand how one can completely prevent SQL injection or hacking altogether in their script if they rely on user input. For example: The admin uses code like this to add slashes (it's the first reference to $_POST['thing'] in the script) $clean = addslashes($_POST['thing']); Now, if the user submitted the following code, couldn't he "break" the function? "urgonnabehackedlolz"); function randomfunction($string) {Make up some random function that doesn't do anything;}Now add some 'ol code that would do something completely evil $useless = randomfunction('2' If the user submitted that, then the code would look like: $clean = addslashes("urgonnabehackedlolz"); function randomfunction($string) { Make up some random function that doesn't do anything; } Now add some 'ol code that would do something completely evil $useless = randomfunction('2'); The function is just created so that there isn't a parse error when the script sees the extra ); I'm not a hacker, and far from it. (I don't know anything about hacking xP) I'm just concerned on how best to protect my pages, and I don't quite understand how to do this, or if it's even truly possible. Anyone mind shedding some light on this? O.o Also, I noticed the following function in my ssbb_characters_content.php file: function stringForJavascript($in_string) { $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string); $str = ereg_replace('"', '\\"', $str); Return $str; } What exactly does this do? The function is defined at the top of the script (this was copied/pasted off the tutorial) but isn't called to at all, well, to my knowledge. It seems to me that it's used for security purposes though, although I still don't quite understand it. Thanks for the help. And sorry about going a bit off topic. I just don't think the creation of a whole new topic would be necessary when these are all relevant to the script I'm trying to create. -Daniel

Yeap, I've been validating and filtering data submitted through POST for a while now, so I've got that covered. It's just that I've never used GET before, which was why I didn't quite understand how I'd validate that. But anyway, everything's working fine. I greatly appreciate the help. =) @sayedsohail: I don't see how addslashes is going to help in this case. The code only performs actions if the result of GET equals to a few particular cases. And how exactly would I use regex to help validate content? O.o

Oops, I hadn't noticed that I had already used the id "content" in my layout. Well, I changed the value of the two ids which would be affected by js, as you said, and it work perfectly now. =) Curious, but how much text is too much? =P I plan on having maybe 600-1000 words between the two content divs, for each tab case. Would that cause a drastic increase in loading times, or just a slight one? Also, my next question isn't exactly Ajax related, but I figured I'd ask here anyway. switch($_GET['id']) { case 'tab1': $content = 'This is content for tab 1.'; $content2 = 'This is secondary content for tab 1.'; break; case 'tab2': $content = 'This is content for tab 2.'; $content2 = 'This is secondary content for tab 2.'; break; case 'tab3': $content = 'This is content for tab 3.'; $content2 = 'This is secondary content for tab 3.'; break; case 'tab4': $content = 'This is content for tab 4.'; $content2 = 'This is secondary content for tab 4.'; break; default: $content = 'There was an error.'; $content2 = 'Please refresh this page.'; break; } How would you go about validating the data submitted by $_GET to prevent things such as SQL injection? Or is it even necessary? I've always been one to use $_POST instead, so I'm really not sure about it. Well, I appreciate the help so far. You've been a great help. Thanks, Daniel

Hmm.. That didn't quite work out for me. I used the code you mentioned (unless I misplaced it?) and now it seems that the contents of $content2 aren't displayed at all, and the surrounding divs continue to disappear upon clicking the tabs. The following is the updated code: ssbb_characters_content.php <?php function stringForJavascript($in_string) { $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string); $str = ereg_replace('"', '\\"', $str); Return $str; } switch($_GET['id']) { case 'tab1': $content = 'This is content for tab 1.'; $content2 = 'This is secondary content for tab 1.'; break; case 'tab2': $content = 'This is content for tab 2.'; $content2 = 'This is secondary content for tab 2.'; break; case 'tab3': $content = 'This is content for tab 3.'; $content2 = 'This is secondary content for tab 3.'; break; case 'tab4': $content = 'This is content for tab 4.'; $content2 = 'This is secondary content for tab 4.'; break; default: $content = 'There was an error.'; $content2 = 'Please refresh this page.'; break; } $request_text = $content . "|||" . $content2; print $request_text; usleep(900000); ?> and ssbb_characters.php (irrelevant code removed): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" /> <link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" /> <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]--> <script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script> <script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script> <script type="text/javascript"> function init () { var tabs = document.getElementsByClassName('tabs'); for (var i = 0; i < tabs.length; i++) { $(tabs[i].id).onclick = function () { getTabData(this.id); } } } function getTabData(id) { var url = '../smashbros/ssbb_characters_content.php'; var rand = Math.random(9999); var pars = 'id=' + id + '&rand=' + rand; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); } function showLoad () { $('load').style.display = 'block'; } function showResponse (originalRequest) { var newData = originalRequest.responseText; var response = newData.split("|||"); $('load').style.display = 'none'; document.getElementById('content').innerHTML = response[0]; document.getElementById('content2').innerHTML = response[1]; } </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .tabs { width: 50px; margin-right: 10px; padding:4px; cursor: pointer; display: block; } #content { clear:both; } #load { display: none; text-align: center; padding-top: 100px; } </style> </head> <body onload="init()"> <div id="container"> <h1>Characters</h1> <div id="ginfo1"><div id="ginfo2"><div id="ginfo3"> <div id="ginfo_left"> <div class="tabs" id="tab1">Tab 1</div> <div class="tabs" id="tab2">Tab 2</div> <div class="tabs" id="tab3">Tab 3</div> <div class="tabs" id="tab4">Tab 4</div> </div> <div id="ginfo_right"> <div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div> <div id="content"></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />I'd like $content to be echoed right here. </div> </div></div></div> <div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3"> <div id="content2"></div> <br /><br /><br /><br /><br /><br />I'd like $content2 to be echoed right here. The contents of both variables should be dependant on what tab the user has clicked on. </div></div></div> </div> </body> </html> You can also just check out the url of the page posted above to see what I mean. I wonder if I may have done something wrong while implementing your code, or misunderstood something? Again, I'm new to javascript, so I wouldn't be surprised if I made some really baby-ish error. ^^" Again, help with this matter would be appreciated. Thanks.

Hello, I'm new to Ajax and am attempting to implement it in a part of my website. I've been following this tutorial in order to create a sort of tabbed browsing-based page: http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/ Here's the page that I've been working on: http://gamexe.net/smashbros/ssbb_characters.php The basic CSS, PHP and HTML is all set, but of course, being new to javascript as I am, I can't get it to work as I'd like. My Goal: I'd like to code the page so that when a user clicks on a tab in the left menu, a PHP script is processed and two variables are accessed depending on which tab the user clicked on. These variables, $content and $content2, would then be echoed on the page. The $content variable would be echoed within the series of divs to the top, and $content would be displayed in the series of divs toward the bottom. The Problem: 1. When clicking on a tab, the divs surrounding the content are removed. It only echoes the contents of $content. I'd like to make it so that the surrounding container as well as their backgrounds remain visible at all times, no matter the tab that was selected. 2. The script only echoes the content of $content and not $content2. Both variables are set properly, so I imagine I'm just not calling $content2 properly with javascript? Fixed this part of the problem. =) The Code: ssbb_characters.php (irrelevant code removed. See http://gamexe.net/smashbros/ssbb_characters.php for exact code) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Gamexe.net - Super Smash Bros Brawl - Characters</title> <link href="http://www.gamexe.net/layout5/layout.css" rel="stylesheet" type="text/css" /> <link href="http://www.gamexe.net/layout5/favicon.ico" rel="shortcut icon" /> <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://www.gamexe.net/layout5/ie.css" /><![endif]--> <script type="text/javascript" src="http://www.gamexe.net/layout5/general.js"></script> <script type="text/javascript" src="http://www.gamexe.net/layout5/prototype.js"></script> <script type="text/javascript"> function init () { var tabs = document.getElementsByClassName('tabs'); for (var i = 0; i < tabs.length; i++) { $(tabs[i].id).onclick = function () { getTabData(this.id); } } } function getTabData(id) { var url = '../smashbros/ssbb_characters_content.php'; var rand = Math.random(9999); var pars = 'id=' + id + '&rand=' + rand; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); } function showLoad () { $('load').style.display = 'block'; } function showResponse (originalRequest) { var newData = originalRequest.responseText; $('load').style.display = 'none'; $('content').innerHTML = newData; $('content2').innerHTML = newData; } </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .tabs { width: 50px; margin-right: 10px; padding:4px; cursor: pointer; display: block; } #content { clear:both; } #load { display: none; text-align: center; padding-top: 100px; } </style> </head> <body onload="init()"> <div id="content"> <h1>Characters</h1> <div id="ginfo1"><div id="ginfo2"><div id="ginfo3"> <div id="ginfo_left"> <div class="tabs" id="tab1">Tab 1</div> <div class="tabs" id="tab2">Tab 2</div> <div class="tabs" id="tab3">Tab 3</div> <div class="tabs" id="tab4">Tab 4</div> </div> <div id="ginfo_right"> <div id="load"><img src="http://www.gamexe.net/layout5/loading.gif" alt="Loading..." /></div> <div id="content"></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />I'd like $content to be echoed right here. </div> </div></div></div> <div id="ginfo_b1"><div id="ginfo_b2"><div id="ginfo_b3"> <div id="content2"></div> <br /><br /><br /><br /><br /><br />I'd like $content2 to be echoed right here. The contents of both variables should be dependant on what tab the user has clicked on. </div></div></div> </div><!-- content --> </body> </html> ssbb_characters_content.php <?php function stringForJavascript($in_string) { $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string); $str = ereg_replace('"', '\\"', $str); Return $str; } switch($_GET['id']) { case 'tab1': $content = 'This is content for tab 1.'; $content2 = 'This is secondary content for tab 1.'; break; case 'tab2': $content = 'This is content for tab 2.'; $content2 = 'This is secondary content for tab 2.'; break; case 'tab3': $content = 'This is content for tab 3.'; $content2 = 'This is secondary content for tab 3.'; break; case 'tab4': $content = 'This is content for tab 4.'; $content2 = 'This is secondary content for tab 4.'; break; default: $content = 'There was an error.'; $content2 = 'Please refresh this page.'; break; } print stringForJavascript($content); usleep(900000); ?> Well, I really don't know how to solve this issue. I'm very new to Ajax as well as Javascript (I understand the basic syntax, but I don't know any of the functions, etc) so chances are that there's a much more efficient and better way of accomplishing what I'd like to do. For all I know, I could be doing this completely wrong. " So, any help at all would be greatly appreciated. Thanks, Daniel St. Jules EDIT: I just noticed why $content2 wasn't being echoed. I forgot to call it in ssbb_characters_content.php. =P So I just added print stringForJavascript($content2); right below print stringForJavascript($content); and that works now. However, the surrounding divs are still disappearing. Any ideas on how to fix this?