HOWTO: Use Lift-based ajax-dialogs from other frameworks

[Andreas Joseph Krogh]

Hi all.

This is just a quick "howto" for being able to use Lift-based AJAX-popups in web-pages made by other frameworks, like SpringMVC or Struts

1. Ensure you have the following in you main-page somewhere:
   

   <script type="text/javascript">
           //<![CDATA[
           var lift_page = "some_dummy_stuff";
           //]]>
       </script>

   <script src="<s:url value="/ajax_request/liftAjax.js"/>" type="text/javascript"></script>
   
   
2. I have a wrapper in JS which I call onclick:
           openLiftPopup: function(template, params) {
               // Usage: openLiftPopup('activity/editActivityDialogWrapper')
               var queryString = Object.isUndefined(params) ? "" : "?" + $H(params).toQueryString();
               var req = new Ajax.Request(ORIGO.getBaseUrl() + template+queryString, {
                       onSuccess: function(transport) {
                           var responseText = transport.responseText || "no response text";
                           DialogHelper.createDialog(responseText);
                       },
                       onFailure: function() {
                           alert("Failed loading template: "+template);
                       },
                       parameters: {}, evalScripts: true}
               );
           },
   
   Used like this: <a href="javascript:void(0)" onclick="openLiftPopup('activity/editActivityDialogWrapper', {id: 123}); return false">open dialog</a>
   
   
3. Then make a Lift wrapper-template which calls a wrapper-snippet. This wrapper snippet embeds the real lift-template you'd use directly from Lift. Not you *have to* set the lift_page variable here to S.renderVersion in order for Lift to be able to use request-vars in you AJAX-dialog
   
   // editActivityDialogWrapper.html
   <div class="lift:activity.EditActivityDialogWrapperSnippet.render">
       <span class="liftPageSetter"/>
       <div class="lift:embed?what=lift/origo/activity/_editActivityDialog"></div>
   </div>
   
   // The wrapper-snippet
   class EditActivityDialogWrapperSnippet {
       def render(ns: NodeSeq): NodeSeq = {
           // Set request-vars etc. which you want to use in snippets inside the embedded template
           (".liftPageSetter" #> Script(SetExp(JsVar("lift_page"), S.renderVersion))).apply(ns)
       }
   }
   

This way, you can re-use Lift-based AJAX-dialogs from other frameworks without having to duplicate much code.

If I left out something or anything is unclear feel free to ask/comment.

-- 
Andreas Joseph Krogh <and...@officenet.no> - mob: +47 909 56 963
Senior Software Developer / CEO - OfficeNet AS - http://www.officenet.no
Public key: http://home.officenet.no/~andreak/public_key.asc

[David Pollak]

Thank you very much for sharing this code!

--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

--

Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro

Lift, the simply functional web framework http://liftweb.net

Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im