AJAX Request

Hey

Can anyone help me achieve the following:

Basically I want to have a form and once the form the user presses enter a loading image appears (maybe fades in below the form) and then once the PHP is done processing anything outputted in the PHP file overwrites the loading image.

I don't mind using a framework but I'm stuck from then onwards.

 

well, if you don't mind it, build yourself a version of mootools and here is how you get started:

<div style="float: left">
    <!-- some form with an id we can reference -->
    <form id="myform" action="/elements.html">
    <input type="text" /><br />
    <input type="text" /><br />
    <input id="mysubmit" type="submit" /> 
    </form>
</div>
<!-- response text can go here -->
<div id="response" style="margin: 10px; border: 1px solid #000; float: left; width: 400px; height: 300px; overflow: hidden; background: #ffffaf">
</div>

<script type="text/javascript">
window.addEvent("domready", function() {
    
    var loader = $("response"); 
    
    // set a handler for click event...
    $("mysubmit").addEvents({
        click: function(e) {
            // stop the event
            e.stop();
            
            // we can do checks to see if the fields are filled or whatever.
            
            // assume ok, so set background to spinning / loading ajax thing.
            loader.set({
                styles: {
                    background: "#fff url(/images/8-0.gif) no-repeat center center"
                },
                opacity: .5, // going to fade this into full opacity when ajax data comes back for effect
                html: "Loading..." // not needed but some text may help.
            });
            
            this.getParent().send(); // fire the send handler
        }
    });
    
    // set the request.send handler
    $("myform").set("send", {
        method: "get", // can also go as post etc
        // you can add url: "url.php" or uses the action=" target from the form itself
        onComplete: function() {
            
            // we are delaying this for effect by 1 second (so users can see the ajax loader)
            (function() {
                loader.set({
                    styles: {
                        background: "#fff"
                    },
                    html: this.response.text
                }).fade(1);
            }).bind(this).delay(1000); // 1 second.
        }
    }).addEvent("submit", function(e) {
        // this is to handle keypresses of ENTER and not mouse clicks on the submit button
        e.stop();
        // enter? stop the keyclick and simulate a click on the submit instead where it does our background
        $("mysubmit").fireEvent("click");
    });
    
    
    
}); // end domready
</script>

HTML:

this is pretty basic, I hope it gives you an idea of what's involved. you can grab mootools from mootools.net.

 

Try KoolAjax, simple and easy-to-use PHP Ajax Control

<?=KoolScripting::Start();?>
    <updatepanel id="myPanel">
        <content>
            <!-- Your form here, you handle callback here in the same way as you handle normal postback-->
            <input type="button" id="callbackButton" value=" Do callback"/>
        <content>
        <triggers>
            <trigger elementid="callbackButton" event="onclick"/>
            <!-- list all element to trigger updatepanel to reload -->
        </triggers>
        <loading image="ajax_loader.gif" />
    <updatepanel>
<?=KoolScripting::End();?>

Code (markup):

A simple login example: http://www.koolphp.net/support/demos/#koolajax.example_update_login