Welcome Guest, Not a member yet? Register   Sign In
Has Anyone Got Some Simple AJAX Tutorial Resources?
#1

[eluser]mdavis1982[/eluser]
Hi all...

I've been working with CodeIgniter for a few months now, and my first project is about to go live.

However, I'm completely baffled when it comes to AJAX functionality, and would like to get my head around it as I think it could be really important to what I'm doing.

Does anyone have some links to some great tutorials or articles about using AJAX with CodeIgniter?

I'm not really bothered which JavaScript library it works with (I'll probably just choose one and stick with it forever), but at the moment I have no clue how to integrate anything with CodeIgniter, or what to do with it once it is integrated!

Any advice would be greatly appreciated!

Thanks...

Matt
#2

[eluser]Pascal Kriete[/eluser]
For a start there's http://video.derekallard.com/. Then you might want to check out some of sample applications - quite a few of those have ajax functionality.

In my personal opinion however, you shouldn't learn ajax on codeigniter, it just adds another layer of complexity. The way I learned was just a simple one page script such as this:
Code:
<?php

// This is our 'backend'
if(isset($_POST['ajax'])) {
    echo 'ajax works :D';
    exit;
}

?>
<html>
    <head>
        <title>Ajax Test</title>
        <script src="/prototype.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        <!--
            
            init = function() {
                $('callthatsucker').observe('click', ajaxify);
            }
            
            ajaxify = function(event) {
                event.stop();
                var url = '';    //Self submit
                new Ajax.Request(url, {
                    method: 'post',
                    parameters: {ajax: 'true'},
                    onSuccess: function(transport) {
                        $('content').update(transport.responseText);
                    }
                });
            }
            
            document.observe('dom:loaded', init);
        //-->
        </script>
    </head>
    <body>
        <div id='content'>Ajax not called yet :(</div>
        <a href='www.google.com' id='callthatsucker'>Ajaxify me</a>
        <div>If that link goes to google, something went wrong</div>
    &lt;/body&gt;
&lt;/html&gt;
Basically all your ajax calls self submit, that way you have your backend right there and don't go switching files looking for stupid little bugs. In fact, I still develop my javascript this way and plug it into the application when I know it works.

Make sure to get a decent grounding in javascript and it's screwed up syntax before attempting ajax stuff, it'll make your life easier in the long run.
#3

[eluser]mdavis1982[/eluser]
Thanks fro your reply!

It all seems a bit complicated!

Maybe I need to get a book or something! A grounding in JS would probably help things along too!

Are there any AJAX libraries for CI?

Cheers...

Matt
#4

[eluser]Pascal Kriete[/eluser]
There are, but you don't want my take on those Tongue . It's not a hard language to learn, just click your way through this then stop by this page and you'll be up and running in no time. It's just like learning any other language - it's all ancient greek when you first start.
#5

[eluser]mdavis1982[/eluser]
Thanks for the link!

That will certainly help!

I'm interested in doing form validation and stuff with AJAX to make sure that forms are submitted without errors without redirecting to the same page time and time again.

I'm sure there are lots of other use for it, but that's my main aim at the moment!

Thanks...

Matt
#6

[eluser]ontguy[/eluser]
This link gives an example of form validation with ajax.
http://www.roscripts.com/Ajax_form_validation-152.html

It could be combined with CI's validation class.
#7

[eluser]winter[/eluser]
[quote author="inparo" date="1203886505"]
Make sure to get a decent grounding in javascript and it's screwed up syntax before attempting ajax stuff, it'll make your life easier in the long run.[/quote]

I'm sure you know what you are talking about. I just wonder what screwed up syntax are you talking about?
#8

[eluser]Pascal Kriete[/eluser]
Hehe, I did lots of traditional java programming before starting javascript, so seeing things like nested functions was confusing at first. As was javascript object notation. And then stuff like prototypal inheritance, closures, and mutable objects(!) came along which just didn't help. And don't try applying regular design patterns to javascript, you need to use a bunch of odd tricks to bend it to your will.

It has since become one of my favourite languages, because it's so easy to spontaneously make something. Just type and go. No downloads, no web server, no compiler. It's great.
#9

[eluser]Nick Husher[/eluser]
Javascript is, architecturally, more related to Scheme than it is to Java. It's also become a beloved language to me because of its immense flexibility and expressiveness. There are some bad design decisions (and some good but confusing ones) that were made with it that can trip up newbies, but it's still an awesome language.

The best way to think about ajax requests is to imagine that the web page the client interacts with is a small application. At some point, this application wants more data or wants to interact with some feature your server has and so asks the server, "Hey, can I get more information on X?" or "Hey, can you log this user in?" or "Can you store this data in your database?" Some amount of time later (it could be 100 milliseconds or 5 seconds), the server responds, "Here's the information you asked for..." or "Yeah, I logged that user in." or "I tried to store the data, but you need to give me a unique id..." etc.

All this takes place through HTTP requests, which makes it very flexible with how you want to return your data. Many ajax solutions simply pass back snippets of html that you can then insert into your web page using the innerHTML property.

With that in mind, your basic workflow is to (1) formulate a request in javascript, (2) send that request to the server and (3) wait for the response (4) process the response (or show an error if the connection times out).




Theme © iAndrew 2016 - Forum software by © MyBB