Web Coding Question

[SaviorSelf]

Have an assignment for a page, not sure what approach to take. Thinking its AJAX/PHP, but again, don't know.

I have a selection list, and in there are 20 categories. Based on the category, the page should change. Do I need to redirect it to another page aka another html file? Or can the page just change based on the selection?

eg. Selection list is FFXI zones. If I picked X zone, it should list the mobs in that zone. If I switched to another zone, it should then load the mobs in that zone. It's not nearly as long as that, but that is one example I could think of.

I have the code for the selection list, but not sure where to go from there as to populating the page.

[Coren]

You'll want to use ajax and CSS. Updating a CSS div is fairly simple (as far as ajax is concerned). Just google the tutorial.

[SaviorSelf]

I don't know exactly what to google hence the thread. Updating a CSS file gives me the impression I (again) didn't explain it correctly. Have any links by chance?

[Kirbyprime]

There's so many freaking ways to do this it's hard to help without something more definite in what you're looking more. I mean, if it's "It's not nearly as long as that" do you mean it can be something that can be handled with just 20 static HTML pages? Does it need to be dynamic? Call to a DB? XML call? Exactly what is your prof expecting from this assignment.

[SaviorSelf]

I don't really have anything definite, it's not in the assignment I just thought it would be a nice touch, so I'm not sure how to approach it. More like I'm looking to see what's possible.

It would be simple to just make a list of the zones, and a link to a page with the mobs on it. What I wanted to try was a selection list, and a go button, that would I guess call to a script or a document and display that on a page. I really only know a little bit of java and VB as background, but I imagined it as:

<select name="list" id="list">
<option value="0">Zone</option>
<select>

if option 0 selected
then load text file

Can it all be done on that one page? Was just trying to keep the files limited and not have like, 20+ different variations of the same page with just slightly different content.
and iterate through that

[Maguspk]

What you are suggesting is that the page would have some logic for determining what to display. Client side logic for web pages is done primarily via javascript, this is what you want for something you described. You have the right idea, you might want to look into something like jQuery, it's very newbie friendly and it will allow you to do something simple like:

$('#button').click(function(){
    $('#result').load('path/to/txt');
});

Which should be pretty self explanatory.


People in this thread aren't even using the terms AJAX and CSS properly. CSS is a styling language, unless you're worried about making it look pretty you do not need to concern yourself with 'CSS'. AJAX is a pattern, it's not even a language, it's just a web development patterns that's risen in popularity involving making asynchronous (to the rest of the javascript execution) http requests.

That having been said, javascript is pretty complex and writing good javascript takes lots of skill. The good news, however, is that anybody can hack together javascript that will likely work and if you have trouble just post and if I happen to stumble into Tech again I'll help you debug. It's great that you're showing initiative in doing something you are completely unfamiliar with but you are so unfamiliar you might want to start with something simpler and learn slowly instead of trying to hack together something for this assignment which it isn't required for.

[sruon]

jQuery makes this kind of thing very easy.

[Coren]

People in this thread aren't even using the terms AJAX and CSS properly. CSS is a styling language, unless you're worried about making it look pretty you do not need to concern yourself with 'CSS'.

I have no experience with jquery, but here's the first google result for "use ajax to update a css div":
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

It goes all the way back to '05, so it's not brand new, but I think it does basically what he wants. Instead of using links to change the page on the fly, he could use his select box.

All that aside, depending on the functionality desired, if you don't mind pushing the "submit" button, you can do this all very easily with the update command in php, and no further scripting is required. Only if it needs to update automatically (click dropdown, page automatically updates) do you have to script anything.

[Maguspk]

Right so that was the first result but there is no such thing as a CSS div, it just isn't correct. Take out the css part 'use ajax to update a div' and you are on the right track to making sense. The article is very old, even if it works I would not recommend it. Especially in web development, things evolve so quickly, using an old article hurts you more than it helps, even if the content is exactly what you want. You will most likely need to use some very old, insecure, slow, buggy version of whatever library they suggest and likely a simpler solution exists. For example, in the article you linked to they are breaking so many best practices it's not even funny.

jQuery documentation is great: http://api.jquery.com/load/ http://api.jquery.com/html http://api.jquery.com/click

[Coren]

First, I was not necessarily suggesting using that article; I only mentioned it because the original poster said "I can't find this on google".

Second, what do you mean, "no such thing as a css div"? I know my knowledge of web coding is always way behind, but what the hell are you talking about? Last I checked, block-level division (ie, divs) are the basic building blocks of using CSS to lay out a web page.

As I mentioned, I have no experience with Jquery; it appears to be capable of doing everything he'd need.

[Maguspk]

A div is an html element, CSS is a language used in stylesheets, they are two entirely different things. A stylesheet might contain a selector which applies styles to a div, but there is no such thing as a CSS div. I can't put it more simply than that, maybe to you it sounds fine, but it is simply incorrect and makes no sense. At this point I'm sorry I even brought up the misuse of terminology as it's derailed the intent of the thread.

[Coren]

Since it appears jquery is the answer for the OP, then derailing is allowed?

Per the links you supplied, it appears that jquery's html() function basically does exactly what I said in my first reponse.

Just to educate myself, did div elements exist prior to CSS? What was their usage? It sounds like the issue at hand is really just semantics. You obviously know what you are talking about, but as I understand it, divs are the primary building blocks of many new websites. The CSS is the underlying code that tells the divs how to behave (position, etc). So although a div is an html element, nearly its entire purpose is to convey those stylesheet instructions.

[Maguspk]

Right, a div is just a block that can wrap content. Divs do make it simple to apply styles to the content they wrap yes, because other than being blocks they don't have any other styles associated with them.

A div could just as easily have styles directly applied to it (e.g. style="rules;") or used only as a target for other document manipulation like javascript (e.g. cssDIV = document.getElementById('css-div-id'); )