>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?
I'd encountered the similar problem and discussed before: http://groups.google.com/group/web2py-developers/browse_thread/thread/fe66558085294456/210e0c8a2e007ecc?lnk=gst&q=plugins#210e0c8a2e007ecc Although in this case, the above final solution would be good enough, could you have a look my solution mentioned in the discussion? Besides, jquery.spinner.js might be a good option for a preloader: http://www.jqueryin.com/projects/spinner-jquery-preloader-plugin/#demos I extensively use it for my projects (ex: http://dev.s-cubism.com/plugin_jstree). Kenji On 1月10日, 午後7:37, Liam <[email protected]> wrote: > 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)}}
