   [web] ajax Question
  This one is hard to explain....I started using Ajax a few months ago, and I've ran into a delimma.  I have 3 pages - index.php, news.php, home.php.  index.php contains my div layout, where there is a div cell for a header (top), menu (left), main area (middle) and footer (bottom).  The contents of news.php are displayed in the main area while a user is logged out, and the contents of home.php are displayed in the main area when the user is logged in.  There are also several other menu buttons that can change out the content of main, and it all works fine.  So far, so good.The problem I have is, when a user logs in, I want to both change the content of the main div, and the content of the menu div.  Ie, there are different menu options between being logged in and logged out.  However, in the case that a user attempts to log in, but fails, I don't want to change the menu.  So, I'm stuck.  I'm not sure how to write a &#106avascript that can determine if the user logged in successfully and then update the contents of my menu div.  I thought of a few hoaky work-a-rounds (like, setting a session variables during the login process, then putting a onload command in a picture somewhere that forces the menu to update), but know there has to be a better way to do this.  I'm open to options.   
  Why bother with AJAX at all in this case? It looks like almost your entire page changes. Only the header and footer remain. Are the header and footer so big and resource hungry that you don't want to do a normal page load?   ;  Its not a matter of need, its a matter of feel.  I had the whole site coded at one point where each form posted to a script, the script read the information, and forwarded the user to another page with updated data as appropriate.  All the forwarding got to be a little old.  So, I was hoping to smooth things out a bit with Ajax.  The smarter thing to do would have been to group the menu and main body together.  But, when I was doing the layout, that didn't seem to be an obvious choice.   ;  I'm not quite sure I understand: for a user log in, you send a post request forcing a page reload anyway, right? Why can't you just use the server side session information to just render the page accordingly without the fancy Ajax scripting? Just like this very website. It's up to you, but it sounds a bit like over engineering. It breaks when the client has &#106avascript turned off, and it isn't particular search engine friendly.Quote:Original post by Cygnus_XSo, I'm stuck.  I'm not sure how to write a &#106avascript that can determine if the user logged in successfully and then update the contents of my menu div.If you persist on this solution, just send Ajax request to the server, which checks whether the user is logged in (session, database) and returns the appropriate content (probably in XML format). The body onload event is probably the best location to initiate that request.Feel free elaborate if I misinterpreted the situation. [smile]   ;  The only way I can explain it is to show a working example.   link is http://www.lordsofmidnight.com/Secret/index.php  You'll have to 'register', but there is no real email verification... so use void@lordsofmidnight.com (or void2 if void is taken, etc).  My HTML/PHP code has improved tremendously over the past 5 years (I registered here when I began this project and started coding in php and needed help), but my &#106avascript is awful.  I'm sure if you looked over my js code, it would be instantly apparent that I'm failing.  I'm really not 100% sure how it works.  I got it from a tutorial, but managed to form it to do what I wanted.  Anyways, if you register, it will log you in, and you'll see both the main area and the side menu change.  If you log out, it will revert back.  Both of these changes take place in different div tags.  I'd like to make them both change with 1 js call, but right now, i'm having to load div 'main', then have an image onload event that changes div 'menu'.  I wasn't able to figure out how to get the two to work in tandem inside js.   ;  I don't get why you're trying to do this, either. The parts of the page that you are changing are quite large and the surrounding parts quite small, so the benefit from selectively updating only those parts is minimal. The downside is that you have to write more code, you don't support no-&#106avascript visitors (including search engine crawlers), you lose the benefit of having an URL, and you have to handle connection errors on your own. On the other hand, a modern browser will keep the previous page on the screen until the new page is rendered, so the forwarding will be invisible to the user (unless you are doing things wrong, of course). If you really want to do this the hard way, you have to set up your AJAX request so that it retrieves an array of HTML elements, and replaces the contents of each of your div elements with one of the elements in the array.   ;  The choice for ajax is purely for show.  There is virtually no bandwidth saved.  I will eventually have a FF style combat take place where events will roll in via ajax at the bottom of the screen... 'locking out' user input until its their turn, stuff like that.  That page will require ajax, so I figured I'd continue forward with the theme.  And, believe it or not, what I've found to date is that coding is actually much simpler once everything is set up.  I know 'older browsers' can't handle the code, and some users may have ajax turned off... but that's about as frequent as people not having access to the internet.  I'm not going to make a board game because people don't have internet, so, similarly, I'm not going to avoid ajax and js code because old browsers can't support it.Question on returning an array.  My base code is as follows:<code>function changePage(str){ xmlHttp=GetXmlHttpObject();  //gets a new XMLHttpRequest(); if(xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } if(str == "foo"){  var url="foo.php";}else if(str == "bar"){  var url="bar.php";}xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("Middle").innerHTML=xmlHttp.responseText; } }</code>As stated before, the code works (found it via tutorial), but I don't quite understand it.  I know that when its done executing, and the .php document has return a result, it modifies the page.  Problem is, if i try to repeat the code:xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);using a different url, and targeting a different div, it doesn't work.  Whatever executes first always takes precedence.  If anyone could explain that part to me, it would be helpful.   ;  It's hard to tell what your problem could be, without seeing the exact code you tried that didn't work. Is it possible that you used the wrong url/parms?open just opens the connection to the server, and send *can* be used to send the parms (you can just include them with the url in the send function call if you want). The readystate changes to 4 when the response from the server is recieved. onreadystatechange is a "watch" of readystate. It calls the function you assign to it whenever readystate is changed.   ;  Well, if you decide Ajax and JS suck (which they do), you could switch to Adobe Flex instead.   ;  The problem is that you have only one XMLHttp object.  The return from the first call occurs before the second, and terminates your object.  There are a lot of really good libraries out there, but this one looks particularly nice, and simple to use.  I'm going to replace the funky code I found online, nad painfully made work, many years ago with it very soon.   