Revision 17f39e02
Von Moritz Bunkus vor mehr als 11 Jahren hinzugefügt
| SL/ClientJS.pm | ||
|---|---|---|
| 14 | 14 |
|
| 15 | 15 |
my %supported_methods = ( |
| 16 | 16 |
# ## Non-jQuery methods ## |
| 17 |
flash => 2, # display_flash(<TARGET>, <ARGS>) |
|
| 17 |
flash => 2, # kivi.display_flash(<TARGET>, <ARGS>)
|
|
| 18 | 18 |
|
| 19 | 19 |
# ## jQuery basics ## |
| 20 | 20 |
|
| ... | ... | |
| 217 | 217 |
First some JavaScript code: |
| 218 | 218 |
|
| 219 | 219 |
// In the client generate an AJAX request whose 'success' handler |
| 220 |
// calls "eval_json_response(data)":
|
|
| 220 |
// calls "eval_json_result(data)":
|
|
| 221 | 221 |
var data = {
|
| 222 | 222 |
action: "SomeController/the_action", |
| 223 | 223 |
id: $('#some_input_field').val()
|
| 224 | 224 |
}; |
| 225 |
$.post("controller.pl", data, eval_json_response);
|
|
| 225 |
$.post("controller.pl", data, eval_json_result);
|
|
| 226 | 226 |
|
| 227 | 227 |
Now some Perl code: |
| 228 | 228 |
|
| ... | ... | |
| 278 | 278 |
|
| 279 | 279 |
=item 1. The "client_js.js" has to be loaded before the AJAX request is started. |
| 280 | 280 |
|
| 281 |
=item 2. The client code needs to call C<eval_json_response()> with the result returned from the server.
|
|
| 281 |
=item 2. The client code needs to call C<kivi.eval_json_result()> with the result returned from the server.
|
|
| 282 | 282 |
|
| 283 | 283 |
=item 3. The server must use this module. |
| 284 | 284 |
|
| SL/Controller/Base.pm | ||
|---|---|---|
| 512 | 512 |
L<SL::Request/is_ajax>. If it is a normal request then it outputs a |
| 513 | 513 |
standard HTTP redirect header (HTTP code 302). If it is an AJAX |
| 514 | 514 |
request then it outputs an AJAX response suitable for the |
| 515 |
C<eval_json_result> function from the L<SL::ClientJS> module. |
|
| 515 |
C<kivi.eval_json_result> function from the L<SL::ClientJS> module.
|
|
| 516 | 516 |
|
| 517 | 517 |
=item C<run_before $sub, %params> |
| 518 | 518 |
|
| SL/Template/Plugin/L.pm | ||
|---|---|---|
| 185 | 185 |
|
| 186 | 186 |
$url = _J($url); |
| 187 | 187 |
$form_selector = _J($form_selector); |
| 188 |
my $onclick = qq|submit_ajax_form('${url}', '${form_selector}')|;
|
|
| 188 |
my $onclick = qq|kivi.submit_ajax_form('${url}', '${form_selector}')|;
|
|
| 189 | 189 |
|
| 190 | 190 |
return $self->button_tag($onclick, $text, @slurp); |
| 191 | 191 |
} |
| ... | ... | |
| 580 | 580 |
Creates a HTML 'input type="button"' tag with a very specific onclick |
| 581 | 581 |
handler that submits the form given by the jQuery selector |
| 582 | 582 |
C<$form_selector> to the URL C<$url> (the actual JavaScript function |
| 583 |
called for that is C<submit_ajax_form()> in C<js/client_js.js>). The
|
|
| 584 |
button's label will be C<$text>. |
|
| 583 |
called for that is C<kivi.submit_ajax_form()> in
|
|
| 584 |
C<js/client_js.js>). The button's label will be C<$text>.
|
|
| 585 | 585 |
|
| 586 | 586 |
=item C<button_tag $onclick, $text, %attributes> |
| 587 | 587 |
|
| js/client_js.js | ||
|---|---|---|
| 4 | 4 |
// "scripts/generate_client_js_actions.pl". See the documentation for |
| 5 | 5 |
// SL/ClientJS.pm for instructions. |
| 6 | 6 |
|
| 7 |
function display_flash(type, message) {
|
|
| 7 |
namespace("kivi", function(ns) {
|
|
| 8 |
ns.display_flash = function(type, message) {
|
|
| 8 | 9 |
$('#flash_' + type + '_content').text(message);
|
| 9 | 10 |
$('#flash_' + type).show();
|
| 10 |
} |
|
| 11 |
};
|
|
| 11 | 12 |
|
| 12 |
function eval_json_result(data) {
|
|
| 13 |
ns.eval_json_result = function(data) {
|
|
| 13 | 14 |
if (!data) |
| 14 | 15 |
return; |
| 15 | 16 |
|
| 16 | 17 |
if (data.error) |
| 17 |
return display_flash('error', data.error);
|
|
| 18 |
return ns.display_flash('error', data.error);
|
|
| 18 | 19 |
|
| 19 | 20 |
$(['info', 'warning', 'error']).each(function(idx, category) {
|
| 20 | 21 |
$('#flash_' + category).hide();
|
| ... | ... | |
| 29 | 30 |
// console.log("ACTION " + action[0] + " ON " + action[1]);
|
| 30 | 31 |
|
| 31 | 32 |
// ## Non-jQuery methods ## |
| 32 |
if (action[0] == 'flash') display_flash(action[1], action[2]); |
|
| 33 |
if (action[0] == 'flash') kivi.display_flash(action[1], action[2]);
|
|
| 33 | 34 |
|
| 34 | 35 |
// ## jQuery basics ## |
| 35 | 36 |
|
| ... | ... | |
| 124 | 125 |
}); |
| 125 | 126 |
|
| 126 | 127 |
// console.log("current_content_type " + $('#current_content_type').val() + ' ID ' + $('#current_content_id').val());
|
| 127 |
} |
|
| 128 |
};
|
|
| 128 | 129 |
|
| 129 |
function submit_ajax_form(url, form_selector, additional_data) {
|
|
| 130 |
ns.submit_ajax_form = function(url, form_selector, additional_data) {
|
|
| 130 | 131 |
var separator = /\?/.test(url) ? '&' : '?'; |
| 131 |
$.post(url + separator + $(form_selector).serialize(), additional_data, eval_json_result); |
|
| 132 |
$.post(url + separator + $(form_selector).serialize(), additional_data, ns.eval_json_result);
|
|
| 132 | 133 |
return true; |
| 133 |
} |
|
| 134 |
}; |
|
| 135 |
|
|
| 136 |
}); |
|
| 134 | 137 |
|
| 135 | 138 |
// Local Variables: |
| 136 | 139 |
// mode: js |
| scripts/generate_client_js_actions.tpl | ||
|---|---|---|
| 4 | 4 |
// "scripts/generate_client_js_actions.pl". See the documentation for |
| 5 | 5 |
// SL/ClientJS.pm for instructions. |
| 6 | 6 |
|
| 7 |
function display_flash(type, message) {
|
|
| 7 |
namespace("kivi", function(ns) {
|
|
| 8 |
ns.display_flash = function(type, message) {
|
|
| 8 | 9 |
$('#flash_' + type + '_content').text(message);
|
| 9 | 10 |
$('#flash_' + type).show();
|
| 10 |
} |
|
| 11 |
};
|
|
| 11 | 12 |
|
| 12 |
function eval_json_result(data) {
|
|
| 13 |
ns.eval_json_result = function(data) {
|
|
| 13 | 14 |
if (!data) |
| 14 | 15 |
return; |
| 15 | 16 |
|
| 16 | 17 |
if (data.error) |
| 17 |
return display_flash('error', data.error);
|
|
| 18 |
return ns.display_flash('error', data.error);
|
|
| 18 | 19 |
|
| 19 | 20 |
$(['info', 'warning', 'error']).each(function(idx, category) {
|
| 20 | 21 |
$('#flash_' + category).hide();
|
| ... | ... | |
| 32 | 33 |
}); |
| 33 | 34 |
|
| 34 | 35 |
// console.log("current_content_type " + $('#current_content_type').val() + ' ID ' + $('#current_content_id').val());
|
| 35 |
} |
|
| 36 |
};
|
|
| 36 | 37 |
|
| 37 |
function submit_ajax_form(url, form_selector, additional_data) {
|
|
| 38 |
ns.submit_ajax_form = function(url, form_selector, additional_data) {
|
|
| 38 | 39 |
var separator = /\?/.test(url) ? '&' : '?'; |
| 39 |
$.post(url + separator + $(form_selector).serialize(), additional_data, eval_json_result); |
|
| 40 |
$.post(url + separator + $(form_selector).serialize(), additional_data, ns.eval_json_result);
|
|
| 40 | 41 |
return true; |
| 41 |
} |
|
| 42 |
}; |
|
| 43 |
|
|
| 44 |
}); |
|
| 42 | 45 |
|
| 43 | 46 |
// Local Variables: |
| 44 | 47 |
// mode: js |
Auch abrufbar als: Unified diff
client_js.js: Funktionen in namespace kivi verschoben