Welcome Guest, Not a member yet? Register   Sign In
help with unobtrusive ajax with prototype
#1

[eluser]ammonkc[/eluser]
I need to submit a form via ajax with prototype.js unobtrusively. How do I unobtrusively attach the script to submit with prototype? I've done it with jQuery before, but I need to use prototype on this one. Basically I need to do with prototype.js what the below script does with jquery.js. I would appreciate any help. Thanks
Code:
$(function() { // onload...do
  $('#contestForm').submit(function() {
    var inputs = [];
    $(':input', this).each(function() {
      inputs.push(this.name + '=' + escape(this.value));
    })
    jQuery.ajax({
      data: inputs.join('&'),
      url: this.action + '?type=ajax',
      timeout: 2000,
      error: function() {
        console.log("Failed to submit");
      },
      success: function(r) {
        jQuery.facebox(r);
      }
    })
    return false;
  })
})
#2

[eluser]thinkigniter[/eluser]
Hi ammonkc,
Welcome to the forum.

I'm also a big fan of JQ and have never tried Prototype so I was also interested.

So after reading your post I googled prototype ajax form submit.

The second link was 24 ways: Easy Ajax with Prototype.

So I clicked on this [email=http://24ways.org/2005/easy-ajax-with-prototype]link[/email] and clicked on {[email=http://24ways.org/examples/easy-ajax-with-prototype/]Try the example[/email]} at the bottom of the page.

The code behind this great example was...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
    &lt;title&gt;Easy Ajax&lt;/title&gt;
    [removed][removed]
    [removed][removed]
&lt;/head&gt;
&lt;body&gt;
    &lt;form method="get" action="greeting.php" id="greeting-form"&gt;

        <div>
            <label for="greeting-name">Enter your name:</label>
            &lt;input id="greeting-name" name="greeting-name" type="text" /&gt;
            &lt;input id="greeting-submit" name="greeting-submit" type="submit" value="Greet me!" /&gt;
        </div>
        <div id="greeting"></div>
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

I checked out the source of the ajax.js file and...
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});
    }
I noticed a lovely little initialisation init() function with a, well named, event observe feature passing the contents of the greeting-name textbox to the greet() function every time the keyboard key came up. O'h and it also ignored any return.

The greet() function then, after doing some housekeeping with posted(get..ed) content, used the magic Ajax.Updater, again well named, feature to send this information to the greeting.php file.

It took me 2 minutes to track this example down and another 10 minutes to reply to this post.

Isn't it amazing what you can do with, in my case, a PC, google, common sense and the internet!

Cheers




Theme © iAndrew 2016 - Forum software by © MyBB