jquery_ujs_extended 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/MIT-LICENSE +20 -0
- data/README.md +61 -0
- data/lib/assets/javascripts/jquery_ujs_extended.js.coffee +45 -0
- data/lib/jquery_ujs_extended.rb +4 -0
- data/test/ajax.html +5 -0
- data/test/config.ru +14 -0
- data/test/index.html +74 -0
- data/test/rails.js +429 -0
- data/test/spinner.gif +0 -0
- metadata +53 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2012 Anthony Alberto
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,61 @@
|
|
1
|
+
jquery-ujs-extended
|
2
|
+
===================
|
3
|
+
|
4
|
+
Extend usage of html5 data attributes of the jquery UJS gem in the context of Ajax calls.
|
5
|
+
It's just global attributes listeners I find myself often needing to rewrite in my new projects to save time on javascript writing. I extracted it as a gem.
|
6
|
+
|
7
|
+
#Prerequisites
|
8
|
+
|
9
|
+
This has been tested on Rails 3.2.8 so far. Since it's just a collection of JS listeners, it should work on any version really.
|
10
|
+
|
11
|
+
Requires :
|
12
|
+
- Usage of asset pipeline
|
13
|
+
- Coffeescript
|
14
|
+
- jquery-rails
|
15
|
+
|
16
|
+
#Installation
|
17
|
+
|
18
|
+
Before it's released as a gem, you can open your Gemfile and in the asset group add :
|
19
|
+
|
20
|
+
gem 'jquery_ujs_extended', git: https://github.com/anthonyalberto/jquery-ujs-extended
|
21
|
+
|
22
|
+
#Usage
|
23
|
+
|
24
|
+
When specifying a target DOM element in custom data attributes, you have to use the [jQuery selector](http://api.jquery.com/category/selectors/) syntax. You can modify several elements on the DOM at once this way
|
25
|
+
|
26
|
+
##Ajax listeners
|
27
|
+
|
28
|
+
This applies to <form>, <a>, <input> and <select> elements. Needs to be used with `data-remote` from jquery-ujs
|
29
|
+
|
30
|
+
* data-update listener that automatically updates the DOM elements
|
31
|
+
|
32
|
+
link_to "Update", url_path, data: {remote: true, update: "#div1"}
|
33
|
+
form_for @object, data: {remote: true, update: "#div1"}
|
34
|
+
* data-destroy listener that automatically deletes the DOM elements
|
35
|
+
|
36
|
+
link_to "Destroy", url_path, data: {remote: true, destroy: ".class1"}
|
37
|
+
form_for @object, data: {remote: true, destroy: ".class1 .class2"}
|
38
|
+
* data-append listener that automatically appends to the DOM elements
|
39
|
+
|
40
|
+
link_to "Append", url_path, data: {remote: true, append: "#div1 span .class1"}
|
41
|
+
* data-loader. Takes a DOM element. Will show the DOM element before sending the request, and hide it when the request is completed. This is best used to show a spinner image during a request.
|
42
|
+
|
43
|
+
<%= link_to "Loader", url_path, data: {remote: true, append: ".loader"} %>
|
44
|
+
<%= image_tag "/my/image.jpg", style: {display:'none'}, class: 'loader' %>
|
45
|
+
* data-redirect. Takes a url. Redirects to the url on ajax success.
|
46
|
+
|
47
|
+
link_to "redirect", url_path, data: {remote: true, redirect: "/my/url"}
|
48
|
+
|
49
|
+
##Behaviour
|
50
|
+
|
51
|
+
* data-integer. If specified and applied to a text field, will prevent the field from being anything but an integer.Value: minimum value. Leave blank if you don't want one.
|
52
|
+
|
53
|
+
text_field_tag "quantity", 1, data: {integer: 1}
|
54
|
+
* data-float. If specified and applied to a text field, will prevent the field from being anything but a float.Value: minimum value. Leave blank if you don't want one.
|
55
|
+
|
56
|
+
text_field_tag "price", 1, data: {float: 0.01}
|
57
|
+
|
58
|
+
|
59
|
+
#Bugs? Thoughts? Ideas to make it better?
|
60
|
+
|
61
|
+
Don't hesitate to open an issue here and I'll see what I can do!
|
@@ -0,0 +1,45 @@
|
|
1
|
+
$ ->
|
2
|
+
ajaxSelectors = (attribute) ->
|
3
|
+
"input[#{attribute}], a[#{attribute}], form[#{attribute}], textarea[#{attribute}], select[#{attribute}]"
|
4
|
+
|
5
|
+
#Ugly ... there must be a better way to do it ...
|
6
|
+
updateNumberField = (element, min_value, value) ->
|
7
|
+
if(!isNaN(min_value) && ((value < min_value) || isNaN(value)))
|
8
|
+
element.val(min_value)
|
9
|
+
else if isNaN(min_value) && !isNaN(value)
|
10
|
+
element.val(value)
|
11
|
+
else if isNaN(value)
|
12
|
+
element.val('')
|
13
|
+
else
|
14
|
+
element.val(value)
|
15
|
+
|
16
|
+
|
17
|
+
$(document).on 'ajax:success', ajaxSelectors('data-update'), (evt, data) ->
|
18
|
+
$($(@).data 'update').html(data)
|
19
|
+
|
20
|
+
$(document).on 'ajax:success', ajaxSelectors('data-destroy'), (evt, data) ->
|
21
|
+
$($(@).data 'destroy').remove()
|
22
|
+
|
23
|
+
$(document).on 'ajax:success', ajaxSelectors('data-append'), (evt, data) ->
|
24
|
+
$($(@).data 'append').append(data)
|
25
|
+
|
26
|
+
$(document).on 'ajax:before', ajaxSelectors('data-loader'), (evt, data) ->
|
27
|
+
$($(@).data 'loader').show()
|
28
|
+
|
29
|
+
$(document).on 'ajax:complete', ajaxSelectors('data-loader'), (evt, data) ->
|
30
|
+
$($(@).data 'loader').hide()
|
31
|
+
|
32
|
+
$(document).on 'ajax:success', ajaxSelectors('data-redirect'), (evt, data) ->
|
33
|
+
window.location.replace($(@).data 'redirect')
|
34
|
+
|
35
|
+
$(document).on 'change', ajaxSelectors('data-integer'), (evt, data) ->
|
36
|
+
min_value = parseInt($(@).data('integer'))
|
37
|
+
value = parseInt($(@).val())
|
38
|
+
updateNumberField($(@), min_value, value)
|
39
|
+
|
40
|
+
$(document).on 'change', ajaxSelectors('data-float'), (evt, data) ->
|
41
|
+
min_value = parseFloat($(@).data('float'))
|
42
|
+
|
43
|
+
value = parseFloat($(@).val())
|
44
|
+
updateNumberField($(@), min_value, value)
|
45
|
+
|
data/test/ajax.html
ADDED
data/test/config.ru
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
require 'sprockets'
|
2
|
+
require 'coffee-script'
|
3
|
+
|
4
|
+
Root = File.expand_path("../..", __FILE__)
|
5
|
+
|
6
|
+
Assets = Sprockets::Environment.new do |env|
|
7
|
+
env.append_path File.join(Root, "lib", "assets", "javascripts")
|
8
|
+
end
|
9
|
+
|
10
|
+
map "/js" do
|
11
|
+
run Assets
|
12
|
+
end
|
13
|
+
|
14
|
+
run Rack::Directory.new(File.join(Root, "test"))
|
data/test/index.html
ADDED
@@ -0,0 +1,74 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Home</title>
|
6
|
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
7
|
+
<script type="text/javascript" src="/rails.js"></script>
|
8
|
+
|
9
|
+
|
10
|
+
<script type="text/javascript" src="/js/jquery_ujs_extended.js"></script>
|
11
|
+
<style>
|
12
|
+
div{background:#eee;float:left;margin-right:30px;padding:10px;margin-top:10px;}
|
13
|
+
#receiver{position:static;bottom:0;right:0;}
|
14
|
+
h2{margin:5px 0px;}
|
15
|
+
</style>
|
16
|
+
</head>
|
17
|
+
<body class="page-index">
|
18
|
+
|
19
|
+
<div>
|
20
|
+
<h2>Testing links data-*</h2>
|
21
|
+
<a href="/ajax.html" data-remote='true' data-update='#receiver'>update</a>
|
22
|
+
<a href="/ajax.html" data-remote='true' data-destroy='#destroyed'>destroy</a>
|
23
|
+
<a href="/ajax.html" data-remote='true' data-append='#receiver'>append</a><br/>
|
24
|
+
<a href="/ajax.html" data-remote='true' data-loader='#spinner'>loader</a>
|
25
|
+
<a href="/ajax.html" data-remote="true" data-redirect='/index.html?redirected=true'>redirect</a>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<div>
|
29
|
+
<h2>Testing forms data-*</h2>
|
30
|
+
<form data-remote='true' data-update='#receiver' method='get' action='/ajax.html'><input type="submit" value='update'/></form>
|
31
|
+
<form data-remote='true' data-destroy='#destroyed' method='get' action='/ajax.html'><input type="submit" value='destroy'/></form>
|
32
|
+
<form data-remote='true' data-append='#receiver' method='get' action='/ajax.html'><input type="submit" value='append'/></form>
|
33
|
+
<form data-remote='true' data-loader='#spinner' method='get' action='/ajax.html'><input type="submit" value='loader'/></form>
|
34
|
+
<form data-remote='true' data-redirect='/index.html?redirected=true' method='get' action='/ajax.html'><input type="submit" value='redirect'/></form>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<div>
|
38
|
+
<h2>Testing data-url</h2>
|
39
|
+
update <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-update='#receiver' data-type='html' name="quantity" data-integer='1'/><br/>
|
40
|
+
append <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-append='#receiver' data-type='html' name="quantity" data-integer='1'/><br/>
|
41
|
+
destroy <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-destroy='#destroyed' data-type='html' name="quantity" data-integer='1'/><br/>
|
42
|
+
loader <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-loader='#spinner' data-type='html' name="quantity" data-integer='1'/><br/>
|
43
|
+
redirect <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-redirect='/index.html?redirected=true' data-type='html' name="quantity" data-integer='1'/><br/>
|
44
|
+
<br/>
|
45
|
+
update <select data-url='/ajax.html' data-remote='true' data-update='#receiver' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
46
|
+
append <select data-url='/ajax.html' data-remote='true' data-append='#receiver' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
47
|
+
destroy <select data-url='/ajax.html' data-remote='true' data-destroy='#destroyed' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
48
|
+
loader <select data-url='/ajax.html' data-remote='true' data-loader='#spinner' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
49
|
+
redirect <select data-url='/ajax.html' data-remote='true' data-redirect='/index.html?redirected=true' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select>
|
50
|
+
</div>
|
51
|
+
|
52
|
+
<div>
|
53
|
+
<h2>Testing data-integer</h2>
|
54
|
+
Integer minimum 5 <input type="text" data-integer='5'/><br/>
|
55
|
+
Integer no minimum <input type="text" data-integer=''/><br/>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<div>
|
59
|
+
<h2>Testing data-float</h2>
|
60
|
+
Float minimum 5.3 <input type="text" data-float='5.3'/><br/>
|
61
|
+
Float no minimum <input type="text" data-float=''/><br/>
|
62
|
+
</div>
|
63
|
+
|
64
|
+
<div id="receiver">I am the receiver</div>
|
65
|
+
<div id="destroyed">I'll be destroyed</div>
|
66
|
+
<img src="/spinner.gif" style='display:none;' id="spinner"/>
|
67
|
+
<span id="date_receiver"></span>
|
68
|
+
<script type="text/javascript">
|
69
|
+
$(document).on('ajax:success', "[data-loader]", function(){
|
70
|
+
alert('Alert to show that the spinner does show up')
|
71
|
+
})
|
72
|
+
</script>
|
73
|
+
</body>
|
74
|
+
</html>
|
data/test/rails.js
ADDED
@@ -0,0 +1,429 @@
|
|
1
|
+
(function($, undefined) {
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Unobtrusive scripting adapter for jQuery
|
5
|
+
*
|
6
|
+
* Requires jQuery 1.6.0 or later.
|
7
|
+
* https://github.com/rails/jquery-ujs
|
8
|
+
|
9
|
+
* Uploading file using rails.js
|
10
|
+
* =============================
|
11
|
+
*
|
12
|
+
* By default, browsers do not allow files to be uploaded via AJAX. As a result, if there are any non-blank file fields
|
13
|
+
* in the remote form, this adapter aborts the AJAX submission and allows the form to submit through standard means.
|
14
|
+
*
|
15
|
+
* The `ajax:aborted:file` event allows you to bind your own handler to process the form submission however you wish.
|
16
|
+
*
|
17
|
+
* Ex:
|
18
|
+
* $('form').live('ajax:aborted:file', function(event, elements){
|
19
|
+
* // Implement own remote file-transfer handler here for non-blank file inputs passed in `elements`.
|
20
|
+
* // Returning false in this handler tells rails.js to disallow standard form submission
|
21
|
+
* return false;
|
22
|
+
* });
|
23
|
+
*
|
24
|
+
* The `ajax:aborted:file` event is fired when a file-type input is detected with a non-blank value.
|
25
|
+
*
|
26
|
+
* Third-party tools can use this hook to detect when an AJAX file upload is attempted, and then use
|
27
|
+
* techniques like the iframe method to upload the file instead.
|
28
|
+
*
|
29
|
+
* Required fields in rails.js
|
30
|
+
* ===========================
|
31
|
+
*
|
32
|
+
* If any blank required inputs (required="required") are detected in the remote form, the whole form submission
|
33
|
+
* is canceled. Note that this is unlike file inputs, which still allow standard (non-AJAX) form submission.
|
34
|
+
*
|
35
|
+
* The `ajax:aborted:required` event allows you to bind your own handler to inform the user of blank required inputs.
|
36
|
+
*
|
37
|
+
* !! Note that Opera does not fire the form's submit event if there are blank required inputs, so this event may never
|
38
|
+
* get fired in Opera. This event is what causes other browsers to exhibit the same submit-aborting behavior.
|
39
|
+
*
|
40
|
+
* Ex:
|
41
|
+
* $('form').live('ajax:aborted:required', function(event, elements){
|
42
|
+
* // Returning false in this handler tells rails.js to submit the form anyway.
|
43
|
+
* // The blank required inputs are passed to this function in `elements`.
|
44
|
+
* return ! confirm("Would you like to submit the form with missing info?");
|
45
|
+
* });
|
46
|
+
*/
|
47
|
+
|
48
|
+
// Cut down on the number if issues from people inadvertently including jquery_ujs twice
|
49
|
+
// by detecting and raising an error when it happens.
|
50
|
+
var alreadyInitialized = function() {
|
51
|
+
var events = $._data(document, 'events');
|
52
|
+
return events && events.click && $.grep(events.click, function(e) { return e.namespace === 'rails'; }).length;
|
53
|
+
}
|
54
|
+
|
55
|
+
if ( alreadyInitialized() ) {
|
56
|
+
$.error('jquery-ujs has already been loaded!');
|
57
|
+
}
|
58
|
+
|
59
|
+
// Shorthand to make it a little easier to call public rails functions from within rails.js
|
60
|
+
var rails;
|
61
|
+
|
62
|
+
$.rails = rails = {
|
63
|
+
// Link elements bound by jquery-ujs
|
64
|
+
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]',
|
65
|
+
|
66
|
+
// Select elements bound by jquery-ujs
|
67
|
+
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',
|
68
|
+
|
69
|
+
// Form elements bound by jquery-ujs
|
70
|
+
formSubmitSelector: 'form',
|
71
|
+
|
72
|
+
// Form input elements bound by jquery-ujs
|
73
|
+
formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
|
74
|
+
|
75
|
+
// Form input elements disabled during form submission
|
76
|
+
disableSelector: 'input[data-disable-with], button[data-disable-with], textarea[data-disable-with]',
|
77
|
+
|
78
|
+
// Form input elements re-enabled after form submission
|
79
|
+
enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled',
|
80
|
+
|
81
|
+
// Form required input elements
|
82
|
+
requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
|
83
|
+
|
84
|
+
// Form file input elements
|
85
|
+
fileInputSelector: 'input:file',
|
86
|
+
|
87
|
+
// Link onClick disable selector with possible reenable after remote submission
|
88
|
+
linkDisableSelector: 'a[data-disable-with]',
|
89
|
+
|
90
|
+
// Make sure that every Ajax request sends the CSRF token
|
91
|
+
CSRFProtection: function(xhr) {
|
92
|
+
var token = $('meta[name="csrf-token"]').attr('content');
|
93
|
+
if (token) xhr.setRequestHeader('X-CSRF-Token', token);
|
94
|
+
},
|
95
|
+
|
96
|
+
// Triggers an event on an element and returns false if the event result is false
|
97
|
+
fire: function(obj, name, data) {
|
98
|
+
var event = $.Event(name);
|
99
|
+
obj.trigger(event, data);
|
100
|
+
return event.result !== false;
|
101
|
+
},
|
102
|
+
|
103
|
+
// Default confirm dialog, may be overridden with custom confirm dialog in $.rails.confirm
|
104
|
+
confirm: function(message) {
|
105
|
+
return confirm(message);
|
106
|
+
},
|
107
|
+
|
108
|
+
// Default ajax function, may be overridden with custom function in $.rails.ajax
|
109
|
+
ajax: function(options) {
|
110
|
+
return $.ajax(options);
|
111
|
+
},
|
112
|
+
|
113
|
+
// Default way to get an element's href. May be overridden at $.rails.href.
|
114
|
+
href: function(element) {
|
115
|
+
return element.attr('href');
|
116
|
+
},
|
117
|
+
|
118
|
+
// Submits "remote" forms and links with ajax
|
119
|
+
handleRemote: function(element) {
|
120
|
+
var method, url, data, elCrossDomain, crossDomain, withCredentials, dataType, options;
|
121
|
+
|
122
|
+
if (rails.fire(element, 'ajax:before')) {
|
123
|
+
elCrossDomain = element.data('cross-domain');
|
124
|
+
crossDomain = elCrossDomain === undefined ? null : elCrossDomain;
|
125
|
+
withCredentials = element.data('with-credentials') || null;
|
126
|
+
dataType = element.data('type') || ($.ajaxSettings && $.ajaxSettings.dataType);
|
127
|
+
|
128
|
+
if (element.is('form')) {
|
129
|
+
method = element.attr('method');
|
130
|
+
url = element.attr('action');
|
131
|
+
data = element.serializeArray();
|
132
|
+
// memoized value from clicked submit button
|
133
|
+
var button = element.data('ujs:submit-button');
|
134
|
+
if (button) {
|
135
|
+
data.push(button);
|
136
|
+
element.data('ujs:submit-button', null);
|
137
|
+
}
|
138
|
+
} else if (element.is(rails.inputChangeSelector)) {
|
139
|
+
method = element.data('method');
|
140
|
+
url = element.data('url');
|
141
|
+
data = element.serialize();
|
142
|
+
if (element.data('params')) data = data + "&" + element.data('params');
|
143
|
+
} else {
|
144
|
+
method = element.data('method');
|
145
|
+
url = rails.href(element);
|
146
|
+
data = element.data('params') || null;
|
147
|
+
}
|
148
|
+
|
149
|
+
options = {
|
150
|
+
type: method || 'GET', data: data, dataType: dataType,
|
151
|
+
// stopping the "ajax:beforeSend" event will cancel the ajax request
|
152
|
+
beforeSend: function(xhr, settings) {
|
153
|
+
if (settings.dataType === undefined) {
|
154
|
+
xhr.setRequestHeader('accept', '*/*;q=0.5, ' + settings.accepts.script);
|
155
|
+
}
|
156
|
+
return rails.fire(element, 'ajax:beforeSend', [xhr, settings]);
|
157
|
+
},
|
158
|
+
success: function(data, status, xhr) {
|
159
|
+
element.trigger('ajax:success', [data, status, xhr]);
|
160
|
+
},
|
161
|
+
complete: function(xhr, status) {
|
162
|
+
element.trigger('ajax:complete', [xhr, status]);
|
163
|
+
},
|
164
|
+
error: function(xhr, status, error) {
|
165
|
+
element.trigger('ajax:error', [xhr, status, error]);
|
166
|
+
},
|
167
|
+
xhrFields: {
|
168
|
+
withCredentials: withCredentials
|
169
|
+
},
|
170
|
+
crossDomain: crossDomain
|
171
|
+
};
|
172
|
+
// Only pass url to `ajax` options if not blank
|
173
|
+
if (url) { options.url = url; }
|
174
|
+
|
175
|
+
var jqxhr = rails.ajax(options);
|
176
|
+
element.trigger('ajax:send', jqxhr);
|
177
|
+
return jqxhr;
|
178
|
+
} else {
|
179
|
+
return false;
|
180
|
+
}
|
181
|
+
},
|
182
|
+
|
183
|
+
// Handles "data-method" on links such as:
|
184
|
+
// <a href="/users/5" data-method="delete" rel="nofollow" data-confirm="Are you sure?">Delete</a>
|
185
|
+
handleMethod: function(link) {
|
186
|
+
var href = rails.href(link),
|
187
|
+
method = link.data('method'),
|
188
|
+
target = link.attr('target'),
|
189
|
+
csrf_token = $('meta[name=csrf-token]').attr('content'),
|
190
|
+
csrf_param = $('meta[name=csrf-param]').attr('content'),
|
191
|
+
form = $('<form method="post" action="' + href + '"></form>'),
|
192
|
+
metadata_input = '<input name="_method" value="' + method + '" type="hidden" />';
|
193
|
+
|
194
|
+
if (csrf_param !== undefined && csrf_token !== undefined) {
|
195
|
+
metadata_input += '<input name="' + csrf_param + '" value="' + csrf_token + '" type="hidden" />';
|
196
|
+
}
|
197
|
+
|
198
|
+
if (target) { form.attr('target', target); }
|
199
|
+
|
200
|
+
form.hide().append(metadata_input).appendTo('body');
|
201
|
+
form.submit();
|
202
|
+
},
|
203
|
+
|
204
|
+
/* Disables form elements:
|
205
|
+
- Caches element value in 'ujs:enable-with' data store
|
206
|
+
- Replaces element text with value of 'data-disable-with' attribute
|
207
|
+
- Sets disabled property to true
|
208
|
+
*/
|
209
|
+
disableFormElements: function(form) {
|
210
|
+
form.find(rails.disableSelector).each(function() {
|
211
|
+
var element = $(this), method = element.is('button') ? 'html' : 'val';
|
212
|
+
element.data('ujs:enable-with', element[method]());
|
213
|
+
element[method](element.data('disable-with'));
|
214
|
+
element.prop('disabled', true);
|
215
|
+
});
|
216
|
+
},
|
217
|
+
|
218
|
+
/* Re-enables disabled form elements:
|
219
|
+
- Replaces element text with cached value from 'ujs:enable-with' data store (created in `disableFormElements`)
|
220
|
+
- Sets disabled property to false
|
221
|
+
*/
|
222
|
+
enableFormElements: function(form) {
|
223
|
+
form.find(rails.enableSelector).each(function() {
|
224
|
+
var element = $(this), method = element.is('button') ? 'html' : 'val';
|
225
|
+
if (element.data('ujs:enable-with')) element[method](element.data('ujs:enable-with'));
|
226
|
+
element.prop('disabled', false);
|
227
|
+
});
|
228
|
+
},
|
229
|
+
|
230
|
+
/* For 'data-confirm' attribute:
|
231
|
+
- Fires `confirm` event
|
232
|
+
- Shows the confirmation dialog
|
233
|
+
- Fires the `confirm:complete` event
|
234
|
+
|
235
|
+
Returns `true` if no function stops the chain and user chose yes; `false` otherwise.
|
236
|
+
Attaching a handler to the element's `confirm` event that returns a `falsy` value cancels the confirmation dialog.
|
237
|
+
Attaching a handler to the element's `confirm:complete` event that returns a `falsy` value makes this function
|
238
|
+
return false. The `confirm:complete` event is fired whether or not the user answered true or false to the dialog.
|
239
|
+
*/
|
240
|
+
allowAction: function(element) {
|
241
|
+
var message = element.data('confirm'),
|
242
|
+
answer = false, callback;
|
243
|
+
if (!message) { return true; }
|
244
|
+
|
245
|
+
if (rails.fire(element, 'confirm')) {
|
246
|
+
answer = rails.confirm(message);
|
247
|
+
callback = rails.fire(element, 'confirm:complete', [answer]);
|
248
|
+
}
|
249
|
+
return answer && callback;
|
250
|
+
},
|
251
|
+
|
252
|
+
// Helper function which checks for blank inputs in a form that match the specified CSS selector
|
253
|
+
blankInputs: function(form, specifiedSelector, nonBlank) {
|
254
|
+
var inputs = $(), input, valueToCheck,
|
255
|
+
selector = specifiedSelector || 'input,textarea',
|
256
|
+
allInputs = form.find(selector);
|
257
|
+
|
258
|
+
allInputs.each(function() {
|
259
|
+
input = $(this);
|
260
|
+
valueToCheck = input.is(':checkbox,:radio') ? input.is(':checked') : input.val();
|
261
|
+
// If nonBlank and valueToCheck are both truthy, or nonBlank and valueToCheck are both falsey
|
262
|
+
if (!valueToCheck === !nonBlank) {
|
263
|
+
|
264
|
+
// Don't count unchecked required radio if other radio with same name is checked
|
265
|
+
if (input.is(':radio') && allInputs.filter('input:radio:checked[name="' + input.attr('name') + '"]').length) {
|
266
|
+
return true; // Skip to next input
|
267
|
+
}
|
268
|
+
|
269
|
+
inputs = inputs.add(input);
|
270
|
+
}
|
271
|
+
});
|
272
|
+
return inputs.length ? inputs : false;
|
273
|
+
},
|
274
|
+
|
275
|
+
// Helper function which checks for non-blank inputs in a form that match the specified CSS selector
|
276
|
+
nonBlankInputs: function(form, specifiedSelector) {
|
277
|
+
return rails.blankInputs(form, specifiedSelector, true); // true specifies nonBlank
|
278
|
+
},
|
279
|
+
|
280
|
+
// Helper function, needed to provide consistent behavior in IE
|
281
|
+
stopEverything: function(e) {
|
282
|
+
$(e.target).trigger('ujs:everythingStopped');
|
283
|
+
e.stopImmediatePropagation();
|
284
|
+
return false;
|
285
|
+
},
|
286
|
+
|
287
|
+
// find all the submit events directly bound to the form and
|
288
|
+
// manually invoke them. If anyone returns false then stop the loop
|
289
|
+
callFormSubmitBindings: function(form, event) {
|
290
|
+
var events = form.data('events'), continuePropagation = true;
|
291
|
+
if (events !== undefined && events['submit'] !== undefined) {
|
292
|
+
$.each(events['submit'], function(i, obj){
|
293
|
+
if (typeof obj.handler === 'function') return continuePropagation = obj.handler(event);
|
294
|
+
});
|
295
|
+
}
|
296
|
+
return continuePropagation;
|
297
|
+
},
|
298
|
+
|
299
|
+
// replace element's html with the 'data-disable-with' after storing original html
|
300
|
+
// and prevent clicking on it
|
301
|
+
disableElement: function(element) {
|
302
|
+
element.data('ujs:enable-with', element.html()); // store enabled state
|
303
|
+
element.html(element.data('disable-with')); // set to disabled state
|
304
|
+
element.bind('click.railsDisable', function(e) { // prevent further clicking
|
305
|
+
return rails.stopEverything(e);
|
306
|
+
});
|
307
|
+
},
|
308
|
+
|
309
|
+
// restore element to its original state which was disabled by 'disableElement' above
|
310
|
+
enableElement: function(element) {
|
311
|
+
if (element.data('ujs:enable-with') !== undefined) {
|
312
|
+
element.html(element.data('ujs:enable-with')); // set to old enabled state
|
313
|
+
// this should be element.removeData('ujs:enable-with')
|
314
|
+
// but, there is currently a bug in jquery which makes hyphenated data attributes not get removed
|
315
|
+
element.data('ujs:enable-with', false); // clean up cache
|
316
|
+
}
|
317
|
+
element.unbind('click.railsDisable'); // enable element
|
318
|
+
}
|
319
|
+
|
320
|
+
};
|
321
|
+
|
322
|
+
if (rails.fire($(document), 'rails:attachBindings')) {
|
323
|
+
|
324
|
+
$.ajaxPrefilter(function(options, originalOptions, xhr){ if ( !options.crossDomain ) { rails.CSRFProtection(xhr); }});
|
325
|
+
|
326
|
+
$(document).delegate(rails.linkDisableSelector, 'ajax:complete', function() {
|
327
|
+
rails.enableElement($(this));
|
328
|
+
});
|
329
|
+
|
330
|
+
$(document).delegate(rails.linkClickSelector, 'click.rails', function(e) {
|
331
|
+
var link = $(this), method = link.data('method'), data = link.data('params');
|
332
|
+
if (!rails.allowAction(link)) return rails.stopEverything(e);
|
333
|
+
|
334
|
+
if (link.is(rails.linkDisableSelector)) rails.disableElement(link);
|
335
|
+
|
336
|
+
if (link.data('remote') !== undefined) {
|
337
|
+
if ( (e.metaKey || e.ctrlKey) && (!method || method === 'GET') && !data ) { return true; }
|
338
|
+
|
339
|
+
var handleRemote = rails.handleRemote(link);
|
340
|
+
// response from rails.handleRemote() will either be false or a deferred object promise.
|
341
|
+
if (handleRemote === false) {
|
342
|
+
rails.enableElement(link);
|
343
|
+
} else {
|
344
|
+
handleRemote.error( function() { rails.enableElement(link); } );
|
345
|
+
}
|
346
|
+
return false;
|
347
|
+
|
348
|
+
} else if (link.data('method')) {
|
349
|
+
rails.handleMethod(link);
|
350
|
+
return false;
|
351
|
+
}
|
352
|
+
});
|
353
|
+
|
354
|
+
$(document).delegate(rails.inputChangeSelector, 'change.rails', function(e) {
|
355
|
+
var link = $(this);
|
356
|
+
if (!rails.allowAction(link)) return rails.stopEverything(e);
|
357
|
+
|
358
|
+
rails.handleRemote(link);
|
359
|
+
return false;
|
360
|
+
});
|
361
|
+
|
362
|
+
$(document).delegate(rails.formSubmitSelector, 'submit.rails', function(e) {
|
363
|
+
var form = $(this),
|
364
|
+
remote = form.data('remote') !== undefined,
|
365
|
+
blankRequiredInputs = rails.blankInputs(form, rails.requiredInputSelector),
|
366
|
+
nonBlankFileInputs = rails.nonBlankInputs(form, rails.fileInputSelector);
|
367
|
+
|
368
|
+
if (!rails.allowAction(form)) return rails.stopEverything(e);
|
369
|
+
|
370
|
+
// skip other logic when required values are missing or file upload is present
|
371
|
+
if (blankRequiredInputs && form.attr("novalidate") == undefined && rails.fire(form, 'ajax:aborted:required', [blankRequiredInputs])) {
|
372
|
+
return rails.stopEverything(e);
|
373
|
+
}
|
374
|
+
|
375
|
+
if (remote) {
|
376
|
+
if (nonBlankFileInputs) {
|
377
|
+
// slight timeout so that the submit button gets properly serialized
|
378
|
+
// (make it easy for event handler to serialize form without disabled values)
|
379
|
+
setTimeout(function(){ rails.disableFormElements(form); }, 13);
|
380
|
+
var aborted = rails.fire(form, 'ajax:aborted:file', [nonBlankFileInputs]);
|
381
|
+
|
382
|
+
// re-enable form elements if event bindings return false (canceling normal form submission)
|
383
|
+
if (!aborted) { setTimeout(function(){ rails.enableFormElements(form); }, 13); }
|
384
|
+
|
385
|
+
return aborted;
|
386
|
+
}
|
387
|
+
|
388
|
+
// If browser does not support submit bubbling, then this live-binding will be called before direct
|
389
|
+
// bindings. Therefore, we should directly call any direct bindings before remotely submitting form.
|
390
|
+
if (!$.support.submitBubbles && $().jquery < '1.7' && rails.callFormSubmitBindings(form, e) === false) return rails.stopEverything(e);
|
391
|
+
|
392
|
+
rails.handleRemote(form);
|
393
|
+
return false;
|
394
|
+
|
395
|
+
} else {
|
396
|
+
// slight timeout so that the submit button gets properly serialized
|
397
|
+
setTimeout(function(){ rails.disableFormElements(form); }, 13);
|
398
|
+
}
|
399
|
+
});
|
400
|
+
|
401
|
+
$(document).delegate(rails.formInputClickSelector, 'click.rails', function(event) {
|
402
|
+
var button = $(this);
|
403
|
+
|
404
|
+
if (!rails.allowAction(button)) return rails.stopEverything(event);
|
405
|
+
|
406
|
+
// register the pressed submit button
|
407
|
+
var name = button.attr('name'),
|
408
|
+
data = name ? {name:name, value:button.val()} : null;
|
409
|
+
|
410
|
+
button.closest('form').data('ujs:submit-button', data);
|
411
|
+
});
|
412
|
+
|
413
|
+
$(document).delegate(rails.formSubmitSelector, 'ajax:beforeSend.rails', function(event) {
|
414
|
+
if (this == event.target) rails.disableFormElements($(this));
|
415
|
+
});
|
416
|
+
|
417
|
+
$(document).delegate(rails.formSubmitSelector, 'ajax:complete.rails', function(event) {
|
418
|
+
if (this == event.target) rails.enableFormElements($(this));
|
419
|
+
});
|
420
|
+
|
421
|
+
$(function(){
|
422
|
+
// making sure that all forms have actual up-to-date token(cached forms contain old one)
|
423
|
+
csrf_token = $('meta[name=csrf-token]').attr('content');
|
424
|
+
csrf_param = $('meta[name=csrf-param]').attr('content');
|
425
|
+
$('form input[name="' + csrf_param + '"]').val(csrf_token);
|
426
|
+
});
|
427
|
+
}
|
428
|
+
|
429
|
+
})( jQuery );
|
data/test/spinner.gif
ADDED
Binary file
|
metadata
ADDED
@@ -0,0 +1,53 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jquery_ujs_extended
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Anthony Alberto
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-10-05 00:00:00.000000000 Z
|
13
|
+
dependencies: []
|
14
|
+
description:
|
15
|
+
email: alberto.anthony@gmail.com
|
16
|
+
executables: []
|
17
|
+
extensions: []
|
18
|
+
extra_rdoc_files: []
|
19
|
+
files:
|
20
|
+
- lib/assets/javascripts/jquery_ujs_extended.js.coffee
|
21
|
+
- lib/jquery_ujs_extended.rb
|
22
|
+
- README.md
|
23
|
+
- MIT-LICENSE
|
24
|
+
- test/rails.js
|
25
|
+
- test/config.ru
|
26
|
+
- test/spinner.gif
|
27
|
+
- test/index.html
|
28
|
+
- test/ajax.html
|
29
|
+
homepage:
|
30
|
+
licenses: []
|
31
|
+
post_install_message:
|
32
|
+
rdoc_options: []
|
33
|
+
require_paths:
|
34
|
+
- lib
|
35
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
36
|
+
none: false
|
37
|
+
requirements:
|
38
|
+
- - ! '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
42
|
+
none: false
|
43
|
+
requirements:
|
44
|
+
- - ! '>='
|
45
|
+
- !ruby/object:Gem::Version
|
46
|
+
version: '0'
|
47
|
+
requirements: []
|
48
|
+
rubyforge_project:
|
49
|
+
rubygems_version: 1.8.23
|
50
|
+
signing_key:
|
51
|
+
specification_version: 3
|
52
|
+
summary: Extends html5 attributes capabilities of jquery-ujs
|
53
|
+
test_files: []
|