I got it working towards the end of this post. I've included to original
text because I thinks it explains my problem better. Solution is in red.
I obviously didn't state my problem clearly. The issue isn't replacing all
of the loaded html with an image, just the link that gets clicked. A more
specific question related to the way I tried to solve it is: How do I get
javascript in a component plugin to execute each time after the component
is loaded so the javascript is applied to the loaded component elements?
The javascript belongs in the plugin and can not be put in the application,
this would break the modularity.
Hopefully some code will clear things up.
plugin_test controller:
def overview():
if len(request.args) > 0 and request.args[0] == 'refresh'
time.sleep(4) # In place of the plugin's data processing code
grid = SQLFORM.grid(db.plugin_test_tablename)
refresh = DIV(A('Refresh', _class='button replacewloading',
_href=URL(c='plugin_test', f='overview.load', args=['refresh']),
cid=request.cid))
return dict(grid=grid, refresh=refresh)
plugin_test view:
{{=grid}}
{{=refresh}}
application view:
{{extend 'layout.html'}}
{{=LOAD('plugin_test', 'overview.load', ajax=True)}}
the javascript I'm trying to execute:
$(function() {
$(".replacewloading").click(function() {
$(this).parent().html('<span><img
src="static/plugin_test/images/loading.gif"/>Refreshing...</span>')
} );
} );
So far I've tried:
1. Creating a javascript file in the plugin static directory called
loading.js and writing "response.files.append(URL('static',
'plugin_test/js/loading.js'))" in the plugin controller. If it worked,
this would nevertheless be a poor solution as the image isn't configurable.
2. Removing all line breaks from the script and writing "
response.js(script)" in the plugin controller. Again no luck.
3. Including the script directly into the view html via the view and
controller. This is the case where the script seems to disappear. When I
inspect the html using Firebug, there's no trace of it. It also leaves open
the question of how it will get executed when the component is finished
loading. It turns out that this is the working solution. The script
doesn't disappear, it can be found in jquery.js/eval/seq. I'm not
knowledgable about javascript/jquery so I have no idea where that actually
is. It isn't part of the filesystem. Some sort of virtual client-side
storage perhaps? I'm still not sure why it wasn't working earlier, perhaps
I made a syntax error somewhere.
The refresh button should get replaced while the page reloads so the user
can't click it again, and they know that something is still happening in
the background.
Sorry for the confusion and thanks for the help from all of you,
Liam
Final solution for those who are interested:
plugin_test controller:
def overview():
from gluon.tools import PluginManager
plugins = PluginManager('test', loading_gif=URL('static',
'plugin_test/images/loading.gif'))
if len(request.args) > 0 and request.args[0] == 'refresh'
time.sleep(4) # In place of the plugin's data processing code
grid = SQLFORM.grid(db.plugin_test_tablename)
refresh = DIV(A('Refresh', _class='button replacewloading',
_href=URL(c='plugin_test', f='overview.load', args=['refresh']),
cid=request.cid))
return dict(src=plugins.test.loading_gif, grid=grid, refresh=refresh)
plugin_test view:
<script>
$(function() {
$(".replacewloading").click(function() {
$(this).parent().html('<span><img
src="{{=src}}"/>Refreshing...</span>')
} );
} );
</script>
{{=grid}}
{{=refresh}}
application view:
{{extend 'layout.html'}}
{{=LOAD('plugin_test', 'overview.load', ajax=True)}}
