Ajax form submit with mootools

De openkb
Aller à : Navigation, rechercher

Sommaire

Questions

I have a site that I built way back in 2007.. I had done some ajax stuff, and it worked fine.. Today, that site owner contacted me and said he noticed the forms were no longer working.

I went to take a look and the console showed that upon submitting it was getting an error: Refused to set unsafe header "Connection"

I assumed this had to be a change in browser security or something, since no code had changed and everything worked fine last time I looked at it.... So I did some googling and found some others mention this, and their solution was to update mootools.. I did, and what a headache, the entire API had changed.. So I fixed everything, and it seemed like it should all work, but it didn t. 

$( application_form ).addEvent( submit , function(e) {
  new DOMEvent(e).stop();

  updateText("Sending...");
  var progress_bar = $( bar );
  progress_bar.empty().addClass( ajax-loading );
  this.send({
    update: progress_bar,
    onSuccess: function(e) {
      progress_bar.removeClass( ajax-loading );
      (function() { mySlide.slideOut() }).delay(1500);
    }
  });
});

This results in an ajax request going to the url [Object object], rather than the actual .php script specified in the application_form s action attribute... I tried specifying a url option to tell it not to go to [Object object] but no good...

Answers

Here s a jsfiddle with a working example based on yours.
It shouldn t be too hard to upgrade yours.

http://jsfiddle.net/K976E/3/ http://jsfiddle.net/K976E/3/

Here s the html code in case the jsfiddle gets gone. 

<!DOCTYPE HTML>
<html>
    <body>
        <form id= application_form  action= http://www.scoobydoo.com/cgi-bin/scoobysnack >
            Count of Scooby Snacks: <input type= text  size= 5  /><br />
            <input id= submitButton  type= submit  value= Rut Roh Shaggy! />            
        </form>
        <div id= bar  style= margin-top:20px >
            Yikes!
        </div>

    </body>
</html>

And here s the javascript (place in onLoad): 

new Form.Request( application_form ,  bar , {
    onSend: function(){
    updateText("Sending...");
    var progress_bar = $( bar );
    progress_bar.empty().addClass( ajax-loading );
        $( submitButton ).set( value ,  Sending the form... ).set( disabled , true);
    },
    onComplete: function(){
    var progress_bar = $( bar );
    progress_bar.removeClass( ajax-loading );
    //(function() { mySlide.slideOut() }).delay(1500);        
    }
});


function updateText(txt){
    // do something here...
}

... and no, I didn t re-enabled the submit button within the onComplete...

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/8737444/ajax-form-submit-with-mootools

Related

Récupérée de « http://openkb.fr/index.php?title=Ajax_form_submit_with_mootools&oldid=652 »
Outils personnels
Espaces de noms

Variantes
Actions
Navigation
Outils