$(document).ready(
    function() {
        //$('#cos').append('<div id="resposta"></div>');
        $('button.pass').after('<img src="img/ajax-loader.gif" id="preloader" />');
        $('#preloader').hide();
        $('button.pass').before('<input type="hidden" name="ajax" id="ajax" value="1" />');

        if (location.href.substr(location.href.length-3) == 'es/') {
            urlLang = 'processaCatRadio/es/';
        } else {
            urlLang = 'processaCatRadio/';
        }

        var options = {
            target:        '#resposta',   // target element(s) to be updated with server response
            beforeSubmit:  validate,      // pre-submit callback
            success:       showResponse,  // post-submit callback. Crec que no es necessari si indiquem el target
            url:           urlLang
        };

        // bind form using 'ajaxForm'
        $('#catradioForm').ajaxForm(options);

        function validate(formData, jqForm, options) {
            var queryString = $('#catradioForm').formSerialize();
            //alert(queryString);
            $('#preloader').show();
        }

        function showResponse(responseText, statusText)  { 
            // for normal html responses, the first argument to the success callback 
            // is the XMLHttpRequest object's responseText property 

            // if the ajaxForm method was passed an Options Object with the dataType 
            // property set to 'xml' then the first argument to the success callback 
            // is the XMLHttpRequest object's responseXML property 

            // if the ajaxForm method was passed an Options Object with the dataType 
            // property set to 'json' then the first argument to the success callback 
            // is the json data object returned by the server 

            //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +  '\n\nThe output div should have already been updated with the responseText.');
            $('#preloader').hide();
            //$('#catradioForm').resetForm();
            //$('#resposta').css('background-color', '#E1A421').css('border', '1px dashed black').css('text-align', 'center');
        }

    }
);