>
> In the Controller:
>
> wys_artikels = FORM(INPUT(_type='submit',
> _value = T('Click to view articles'),
> _onclick = "ajax('joernaalartikels', [],
> 'artikels')"))
>
>
> And in the view:
>
> {{=wys_artikels}}
> <div class = 'artikels'>
> </div>
>
>
> A click on the submit button just loads to a reload of the whole page even
> if I change the controller to
>
> wys_artikels = FORM(INPUT(_type='submit',
> _value = T('Click to view articles'),
> _onclick = "ajax('joernaalartikels.load', [],
> 'artikels')"))
>
>
>
Three problems:
1. As Simon already mentioned, if you want to intercept a form
submission or button click, your event handler has to return false, or
otherwise the usual behavior (i.e., regular form submission with full page
reload) will proceed after your handler fires. Even better, set up a jQuery
event handler and use the jQuery preventDefault() method to prevent the
usual behavior (that's generally better than simply returning false).
2. The ajax() function is not the same as loading an Ajax component
(which is handled via the web2py_component() function in web2py.js). The
ajax() function does a standard Ajax call (including submission of input
element values identified in the second argument) and puts the result in
the target element. Ajax components provide a lot more functionality,
treating the component div more like a full page -- it can flash messages,
trap form submissions and link clicks, show form errors, and set up date
and numeric field widgets, just like it would if the content loaded in a
full page.
3. The target value for both the ajax() function and the
web2py_component() function must be an id, not a class.
Try something like this (not tested -- may contain errors):
wys_artikels = FORM(INPUT(_type='submit', _value = T('Click to view
articles')),
_id='view-artikels')
<script type="text/javascript">
jQuery(function() {
jQuery("form#view-artikels").submit(function(event) {
web2py_component("{{=URL('default', 'joernaalartikels.load')}}",
"artikels");
event.preventDefault();
});
});
</script>
{{=wys_artikels}}
<div id="artikels"></div>
Anthony
