Created
December 26, 2010 00:40
-
-
Save regis-leray/755127 to your computer and use it in GitHub Desktop.
jquery-ujs + add back :submit, :with features
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jquery-ujs | |
* | |
* add back the features ":submit",":with" features (link_to_remote) in the UJS | |
* manage this features by adding this with the HTML 5 attributes | |
* :with => data-with | |
* :submit => data-submit | |
* | |
* follow same behaviour http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/link_to_remote | |
* | |
*/ | |
jQuery(function ($) { | |
var csrf_token = $('meta[name=csrf-token]').attr('content'), | |
csrf_param = $('meta[name=csrf-param]').attr('content'); | |
$.fn.extend({ | |
/** | |
* Check if the attribute name exist in HTML element | |
* | |
*/ | |
hasAttr: function (name) { | |
return this.attr(name) !== undefined; | |
}, | |
/** | |
* Triggers a custom event on an element and returns the event result | |
* this is used to get around not being able to ensure callbacks are placed | |
* at the end of the chain. | |
* | |
* TODO: deprecate with jQuery 1.4.2 release, in favor of subscribing to our | |
* own events and placing ourselves at the end of the chain. | |
*/ | |
triggerAndReturn: function (name, data) { | |
var event = new $.Event(name); | |
this.trigger(event, data); | |
return event.result !== false; | |
}, | |
/** | |
* Permit to retreive the data of the current element | |
* | |
* "data-with", "data-submit" html attributes manage the partial dom submit features, | |
*/ | |
retreiveData: function (element) { | |
var element = this, data = ''; | |
if(element.hasAttr('data-with')){ | |
data = eval(element.attr('data-with')); | |
} | |
else if(element.hasAttr('data-submit')){ | |
data = $('#'+element.attr('data-submit')+' :input').serializeArray(); | |
} | |
else{ | |
data = el.is('form') ? el.serializeArray() : []; | |
} | |
return data | |
}, | |
/** | |
* Handles execution of remote calls. Provides following callbacks: | |
* | |
* - ajax:beforeSend - is executed before firing ajax call | |
* - ajax:success - is executed when status is success | |
* - ajax:complete - is executed when the request finishes, whether in failure or success. | |
* - ajax:error - is execute in case of error | |
*/ | |
callRemote: function () { | |
var el = this, | |
method = el.attr('method') || el.attr('data-method') || 'GET', | |
url = el.attr('action') || el.attr('href'), | |
dataType = el.attr('data-type') || ($.ajaxSettings && $.ajaxSettings.dataType); | |
if (url === undefined) { | |
throw "No URL specified for remote call (action or href must be present)."; | |
} else { | |
var $this = $(this); | |
var data = el.retreiveData(); | |
$.ajax({ | |
url: url, | |
data: data, | |
dataType: dataType, | |
type: method.toUpperCase(), | |
beforeSend: function (xhr) { | |
xhr.setRequestHeader("Accept", "text/javascript"); | |
if ($this.triggerHandler('ajax:beforeSend') === false) { | |
return false; | |
} | |
}, | |
success: function (data, status, xhr) { | |
el.trigger('ajax:success', [data, status, xhr]); | |
}, | |
complete: function (xhr) { | |
el.trigger('ajax:complete', xhr); | |
}, | |
error: function (xhr, status, error) { | |
el.trigger('ajax:error', [xhr, status, error]); | |
} | |
}); | |
} | |
} | |
}); | |
/** | |
* confirmation handler | |
*/ | |
$('body').delegate('a[data-confirm], button[data-confirm], input[data-confirm]', 'click.rails', function () { | |
var el = $(this); | |
if (el.triggerAndReturn('confirm')) { | |
if (!confirm(el.attr('data-confirm'))) { | |
return false; | |
} | |
} | |
}); | |
/** | |
* remote handlers | |
*/ | |
$('form[data-remote]').live('submit.rails', function (e) { | |
$(this).callRemote(); | |
e.preventDefault(); | |
}); | |
$('a[data-remote],input[data-remote]').live('click.rails', function (e) { | |
$(this).callRemote(); | |
e.preventDefault(); | |
}); | |
/** | |
* <%= link_to "Delete", user_path(@user), :method => :delete, :confirm => "Are you sure?" %> | |
* | |
* <a href="/users/5" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> | |
*/ | |
$('a[data-method]:not([data-remote])').live('click.rails', function (e){ | |
var link = $(this), | |
href = link.attr('href'), | |
method = link.attr('data-method'), | |
form = $('<form method="post" action="'+href+'"></form>'), | |
metadata_input = '<input name="_method" value="'+method+'" type="hidden" />'; | |
if (csrf_param !== undefined && csrf_token !== undefined) { | |
metadata_input += '<input name="'+csrf_param+'" value="'+csrf_token+'" type="hidden" />'; | |
} | |
form.hide() | |
.append(metadata_input) | |
.appendTo('body'); | |
e.preventDefault(); | |
form.submit(); | |
}); | |
/** | |
* disable-with handlers | |
*/ | |
var disable_with_input_selector = 'input[data-disable-with]', | |
disable_with_form_remote_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')', | |
disable_with_form_not_remote_selector = 'form:not([data-remote]):has(' + disable_with_input_selector + ')'; | |
var disable_with_input_function = function () { | |
$(this).find(disable_with_input_selector).each(function () { | |
var input = $(this); | |
input.data('enable-with', input.val()) | |
.attr('value', input.attr('data-disable-with')) | |
.attr('disabled', 'disabled'); | |
}); | |
}; | |
$(disable_with_form_remote_selector).live('ajax:before.rails', disable_with_input_function); | |
$(disable_with_form_not_remote_selector).live('submit.rails', disable_with_input_function); | |
$(disable_with_form_remote_selector).live('ajax:complete.rails', function () { | |
$(this).find(disable_with_input_selector).each(function () { | |
var input = $(this); | |
input.removeAttr('disabled') | |
.val(input.data('enable-with')); | |
}); | |
}); | |
var jqueryVersion = $().jquery; | |
if (!( (jqueryVersion === '1.4.3') || (jqueryVersion === '1.4.4'))){ | |
alert('This rails.js does not support the jQuery version you are using. Please read documentation.'); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment