Question

Unobtrusive JavaScript with jQuery is available in MVC3.But how can I use the unobtrusive Javascript ajax with mootools?

Answer 1

yeah, this is trivial to do. have a look at the recently released http://mootools.net/blog/2011/12/20/mootools-behavior/, I think it supports it.

I have used this approach in my Modal.BootStrap (view source on github, link’s there) as well whereby it uses data attributes to fetch data from an ajax resource, it’s not quite the same but it certainly is a start.

I just spent 10 mins making this and it’s a good start:

http://jsfiddle.net/dimitar/zYLtQ/

(function() {

    var ajaxify = this.ajaxify = new Class({

        Implements: [Options,Events],

        options: {
            mask: "form[data-ajax=true]",
            props: {
                ajaxLoading: "data-ajax-loading",
                ajaxMode: "data-ajax-mode",
                ajaxUpdate: "data-ajax-update",
                ajaxSuccessEvent: "data-event-success"
            }  
        },

        initialize: function(options) {
            this.setOptions(options);
            this.elements = document.getElements(this.options.mask);
            this.attachEvents();
        },

        attachEvents: function() {
            this.elements.each(function(form) {
                var props = {};
                Object.each(this.options.props, function(value, key) {
                    props[key] = form.get(value) || "";
                });

                form.store("props", props);
                form.addEvent("submit", this.handleSubmit.bind(this));
            }, this);

        },

        handleSubmit: function(e) {
            e && e.stop && e.stop();
            var form = e.target, props = form.retrieve("props"), self = this;
            var updateTarget = document.getElement(props.ajaxUpdate);

            new Request({
                url: form.get("action"),
                data: form,
                onRequest: function() {
                    if (props.ajaxLoading) {
                        var loading = document.getElement(props.ajaxLoading);
                        if (loading && updateTarget) {
                            updateTarget.set("html", loading.get("html"));
                        }

                    }
                },
                onSuccess: function() {                             
                    if (!updateTarget)
                       return;

                    if(props.ajaxMode != 'append') {
                        updateTarget.set("html", this.response.text);
                    }
                    else {
                        updateTarget.adopt(new Element("div", { html: this.response.text }));
                    }     

                    if (props.ajaxSuccessEvent)
                        self.fireEvent(props.ajaxSuccessEvent, this.response);       
                }

            }).send();

        }

    });

})();


new ajaxify({
    onContactFormSuccess: function(responseObj) {
        console.log(responseObj.text);
        alert("we are done.");
    }
});

works with a DOM of:

<form action="/echo/html/" data-ajax="true"  data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#update" data-event-success="contactFormSuccess" method="post">
    <input name="delay" value="4" type="hidden" />
    <input name="html" value="Thanks for your submission, this is the jsfiddle testing response" type="hidden" />
    <input name="name" placeholder="your name" />
    <button>submit</button>
</form>

<div id="update">The update will go here.</div>  
<div id="loading">loading...</div>        

you should be able to build on that. on refactor i’d move the request events into their own methods and add some more proofing etc but it’s fine. i don’t know all mvc does but one thing that is missing is form validation events. i also added a custom event that is fired when done so your ajaxifier instance can do something particular to that form (see data-event-success="contactFormSuccess")

also, it can use default request options if not implicitly specified, even what request object to create – Request, Request.HTML, Request.JSON etc. Events like onRequest, spinners etc are also feasible… I think you just need to work your way through the options that mvc provides and build them to get started.

Confirm     data-ajax-confirm
HttpMethod  data-ajax-method
InsertionMode   data-ajax-mode *
LoadingElementDuration  data-ajax-loading-duration **
LoadingElementId    data-ajax-loading
OnBegin     data-ajax-begin
OnComplete  data-ajax-complete
OnFailure   data-ajax-failure
OnSuccess   data-ajax-success
UpdateTargetId  data-ajax-update
Url     data-ajax-url