11 November, 2011

AlloyUI form submition

Here is the code to submit the form using ajax call within popup.

Liferay 5 with jQuery

Liferay 5 used jQuery, so, submitting form performed with using jQuery ajaxForm like:
<script type="text/javascript">
    jQuery(
        function() {
            var form = jQuery(document.<portlet:namespace />myForm);
            form.ajaxForm(
                {
                    target: ".ui-dialog-content",
                    type: "POST",
                    beforeSubmit: function() {
                        document.getElementById('<portlet:namespace />myButton').disabled = true;
                    },
                    success: function() {
                        Liferay.Popup.close(this);
                    }
                }
            );
        }
    );
</script>

<form method="POST" action="<portlet:actionURL name="someAction"/>" name="<portlet:namespace />myForm">

<input id="<portlet:namespace />myButton" type="submit"/>

</form>

Liferay 6 with Alloy UI

Liferay 6 using AlloyUI which is based on YUI3, so, we can do ajax submit of form with using io-form plugin.
Like:
function showPopup() {
AUI().use('aui-dialog', 'aui-io', 'event-custom', 'io-form', function(A) {
   
        var dialog = new A.Dialog({
            title: 'Popup Title',
            centered: true,
            draggable: true,
            modal: true,
            buttons: [{
                text: 'Save',
                handler: function() {
                    var cfg = {
                        method: 'POST',
                        form: {
                            id: '<portlet:namespace/>myForm'
                        },
                        on: {
                            success: function(id, resp, args) {
                                dialog.close();
                            },
                        }
                    };
                   
                    var request = A.io('<%= actionURL %>', cfg);
                }
            }]
        }).plug(A.Plugin.IO, {uri: '<%= someRenderURL.toString() %>'}).render();
       
        dialog.show();
    });
}
</script>
 
Hope it will be useful !!!!!!!!

Popular Posts

Featured Post

Liferay 7.3 compatibility matrix

Compatibility Matrix Liferay's general policy is to test Liferay Portal CE against newer major releases of operating systems, open s...