AJAX + PHP

[Amailer]

Or is it just JavaScript + php?
Either way, I need help learning, or help to start learning AJAX where I can implement it into PHP code.

I make basic websites (although I am far from making them perfect) and I want to make some neat sites like gmail.com. The problem is (and this is fairly a huge problem) I have little to no knowledge of JavaScript.

I am building this script where each team has its own ranks, but when you change the team of the player, the rank drop menu list doesn't automatically update with the new (selected) teams ranks and you have to edit the players profile gain to update his/her rank in his/her new team I need AJAX to solve this I think.

So what I'm asking is, what do I need to know? Where can I go to learn 'AJAX'?

Thanks!
P.S. YES! I, Amailer... 1...16 years old- I want to learn something XD Mainly because I need to and also because the holidays are coming up very soon. I hope to learn some better languages too during the summer. (And if your wondering why I would write this- well its simply because I never asked to learn anything, turly, and now I do ) [I must improve on my english too, make note of that]

[rdrake]

AJAX+PHP you ask? Well, AJAX is really only javascript. However, you can use PHP to generate said javascript. You typically use AJAX to pass values to a PHP script, then return it to the original document. For example, fetching a value from a database.

I'd highly recommending looking into the Prototype library for all your AJAX needs. It's the library Ruby on Rails uses. You can find more information on this here.

It's a pretty simple concept, what makes it complex is the fact that most browsers behave differently. Just search google for an AJAX tutorial, there are many which have the full script (20 or so lines) which will detect and create the object for each browser.

All that being said, this introduction seems quite good. Anything else on google is probably good as well.

Like I said before, PHP is meant more to take arguments and decide what to do with them accordingly. For example, displaying search results every x seconds.

[Amailer]

Hey,
Thanks for the links. I 'started' to try it out, I got this nice site that showed me some example code: http://24ways.org/advent/easy-ajax-with-prototype

Now I'm trying out something- with a drop down box, but the problem is you see this part:

code:

Event.observe('teams-name', 'keyup', teams, false);

How do I make that 'onselect' or 'onchange'? I tried changing it to 'Onchange' 'select' 'change' nothing seems to be working o.O

Thanks
EDIT: Oddness, 'change' seems to be working now

[rdrake]

Amailer wrote:

Hey,
Thanks for the links. I 'started' to try it out, I got this nice site that showed me some example code: http://24ways.org/advent/easy-ajax-with-prototype

Now I'm trying out something- with a drop down box, but the problem is you see this part:

code:

Event.observe('teams-name', 'keyup', teams, false);

How do I make that 'onselect' or 'onchange'? I tried changing it to 'Onchange' 'select' nothing seems to be working o.O

Thanks

Perhaps breaking down their example javascript would help you understand it better?

code:

Event.observe(window, 'load', init, false);                 function init(){                 $('greeting-submit').style.display = 'none';                 Event.observe('greeting-name', 'keyup', greet, false);         }         function greet(){                 var url = 'greeting.php';                 var pars = 'greeting-name='+escape($F('greeting-name'));                 var target = 'greeting';                 var myAjax = new Ajax.Updater(target, url, {    method: 'get',      parameters: pars});         }

As you can see, the javascript function greet calls a php script appropriately named "greeting.php" which outputs the name of the person which was entered.

How does this script work, might you ask? It doesn't call greet right away, a few things must happen first.

code:

Event.observe(window, 'load', init, false);

The above line, upon loading the page, triggers the "init()" function to be called. This in turn triggers another observation listener, as shown below.

code:

Event.observe('greeting-name', 'keyup', greet, false);

Every time a key is pressed and released, the "greet()" function is called, and the magic happens again. This is why it changes everytime you enter in a character.

How might you change this? Well, I would keep much of this intact. The part you should change is "keyup", which should obviously change to "onchange".

What you should do is just copy over their example and get it working. Afterwards, try altering it. Keep modifying the example until it stops working. Fix it, and understand why it stopped. Doing this will allow you to understand the example, and use code from it knowing what it really does.

[Amailer]

Thats what I'm trying to do, I tried out the example myself now I'm trying to alter the code so that insted of getting the greetname-value from a text box, you can now get it from a drop down box.

I figured it out though, oddly enough it wasn't 'OnChange' but 'Select'.

Is there a place where I can learn the diffrent ajax functions? Like Ajax.Updater- without looking at the actual .js file?

[rdrake]

Amailer wrote:

Is there a place where I can learn the diffrent ajax functions? Like Ajax.Updater- without looking at the actual .js file?

Honestly I'm not sure how good the following one is, but it seems quite decent from what I've seen of it so far. It can be found here.

Personally I like using the traditional approach. While it may seem like a waste of bandwidth, not every browser supports these shiny "web 2.0" technologies. However, it's really up to the designer how things work, and AJAX does seem quite nice and refreshing.

Oh yes, there's some more neat stuff for you to check out here .

[Amailer]

I'll be sure to check those sites out.

But first, more help please! XD
What I want to do now is make the script to pass more variable values, these values are static really, but I'm not sure how to pass more than one variable in that script...

code:

var pars = 'greeting-name='+escape($F('greeting-name'));

that's what I'm talking about really, but now I need to pass

code:

mode=edit id=1

How do I do that? I tried repeating var pars didn't work XD

Thanks!

[rdrake]

Amailer wrote:

I'll be sure to check those sites out.

But first, more help please! XD
What I want to do now is make the script to pass more variable values, these values are static really, but I'm not sure how to pass more than one variable in that script...

code:

var pars = 'greeting-name='+escape($F('greeting-name'));

that's what I'm talking about really, but now I need to pass

code:

mode=edit id=1

How do I do that? I tried repeating var pars didn't work XD

Thanks!

Try this.

code:

var pars = 'mode=' + 'edit' + '&id=' + 1;

An ampersand (&) is used in order to combine multiple parameters in URLs. Of course, + combines different parts to create one string.

[Amailer]

Thanks that worked perfectly, now to figure out how after sending a new value from dropbox number 1, to update dropbox number 2 with the new values relating to the selection in dropbox number 1.

EDIT: Woot I got it working, thanks for your help. Also I found this
http://www.sergiopereira.com/articles/prototype.js.html, its a libary for all (or almost all?) the function in the prototype.js script
EDIT 2: For an example of what I was trying to get http://www.zinx.ath.cx/tests/ajax/