Alessandro Molina avatar Alessandro Molina committed abbcdd9

Add on demand display support

Comments (0)

Files changed (4)

             return 'Thanks: {name} {surname}'.format(**kw)
 
 
+
+Showing the Form on Demand
+------------------------------
+
+AjaxForm since version 0.1.2 supports on demand display of forms.
+This permits to show a form when a javascript event happens.
+
+To do this, you must use ``form.on_demand()`` instead of ``form()`` to
+display the form inside the template. This will create a javascript
+function named: ``FormClassName_on_demand(where, params)`` the ``where``
+argument is any valid selector where to display the form, while the
+params method is a dictionary with the arguments that have to be sent
+to the backend. By default any argument specified inside the params
+dictionary will be used to fill the form fields.
+
+For example, to display on demand this form::
+
+    @ajaxloaded
+    class TryAjax(TableForm):
+        class fields(WidgetsList):
+            field1 = TextField(validator=validators.String(not_empty=True))
+            field2 = TextField(validator=validators.String(not_empty=True))
+        action = '/dosomething'
+        ajaxurl = '/TryAjax_show'
+    ajax_test = TryAjax()
+
+Your template might look like this::
+
+    <div id="myform_box">
+        ${form.on_demand()}
+        <div onclick="TryAjax_on_demand('#myform_box', {'field2':'random text'})">Show Form</div>
+    </div>
 from setuptools import setup, find_packages
 import os
 
-version = '0.1'
+version = '0.1.2'
 
 here = os.path.abspath(os.path.dirname(__file__))
 try:

tgext/ajaxforms/ajaxform.py

-import inspect
+import inspect, time
 from tw.api import JSLink, Link
 from tw.forms import Form
 from tw.jquery import jquery_js
 spinner_icon = Link(modname=__name__, filename='statics/spinner.gif')
 
 def ajaxloaded(decorated):
-    def display(w, *args, **kw):
+    def display(w, value={}, **kw):
         w.register_resources()
         form_id = w.__class__.__name__
         return HTML(HTML.div('', id=form_id), 
                     HTML.script(HTML.literal('''jQuery(document).ready(function() {{
 jQuery('#{0}').load('{1}', {2});
-}});'''.format(form_id, w.ajaxurl, json.dumps(kw)))))
+}});'''.format(form_id, w.ajaxurl, json.dumps(value)))))
+
+    def on_demand(w):
+        w.register_resources()
+        form_id = w.__class__.__name__
+        return HTML(HTML.script(HTML.literal('''\
+function {0}_on_demand(where, params) {{
+    jQuery(where).load('{1}', params);
+}};'''.format(form_id, w.ajaxurl))))
 
     decorated._ajaxform_display = decorated.display
     decorated.javascript.extend([jquery_js, jquery_form_js])
     decorated.display = display
+    decorated.on_demand = on_demand
     return decorated
 
 class formexpose(object):
     def decorate_func(self, decorated):
         def before_render(remainder, params, output):
             output['ajaxform'] = self.form
-            output['ajaxform_id'] = self.form.__class__.__name__
+            output['ajaxform_id'] = "%s_loaded_%s" % (self.form.__class__.__name__, int(time.time()*1000))
             output['ajaxform_action'] = self.form.action
             output['ajaxform_spinner'] = spinner_icon
             if not output.has_key('value'):

tgext/ajaxforms/templates/ajaxform.html

       xmlns:py="http://genshi.edgewall.org/"
       xmlns:xi="http://www.w3.org/2001/XInclude"
       py:strip="">
-    <div>
+    <div id="${ajaxform_id}">
         ${ajaxform._ajaxform_display(value=value)}
     </div>
     <script>
-        jQuery('#${ajaxform_id}').find('form').ajaxForm({target:jQuery('#${ajaxform_id}'),
+        jQuery('#${ajaxform_id}').find('form').ajaxForm({target:jQuery('#${ajaxform_id}').parent(),
                                                             url:'${ajaxform_action}',
                                                     beforeSubmit:function(arr, form, options) {
                                                         jQuery('#${ajaxform_id}').html('<img class="spinner_icon" src="${ajaxform_spinner.link}"/>');
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.