2 Replies Latest reply on Sep 10, 2015 1:09 AM by philipfehrenbacher

    Can I load the results of a jspa into a modal dialog?

    philipfehrenbacher

      I have an item in the menu. Its click event should open a modal dialog. The content for that dialog should be loaded from a soy template respectively from the generated jspa. Is that possible?

        • Re: Can I load the results of a jspa into a modal dialog?
          Scott A Johnson

          What menu are you referring to?

           

          I dont think there would be any out of box way to do this, but most things are possible with enough effort.

           

          I would guess you would need to:

          a) customize the menu template, probably hard coding this specific link to trigger the modal instead of a page change,

          b) retrieve the markup to be displayed in the modal, probably using an ajax request,

          c) use the jquery lightbox plugin (which comes with jive) to open the modal window with the markup returned

           

          This is similar to how apps are loaded in modals and we have some macros which do something similar as well.

           

          Hope this helps,

          Scott

            • Re: Can I load the results of a jspa into a modal dialog?
              philipfehrenbacher

              I had the issue that if I want to open the result of a jspa page in a modal view, that it included a lot of information that is not needed in the modal view (menu, navigation, header, footer, etc...)

               

              Finally I could solve it.

               

              1) Call the jspa and put the result in a modal view / lightbox:

               

              $j.ajax({

                type: "GET",

                url: url,

                success : function(data, textStatus, jqXHR) {

               

                if ($j('#my_lightbox_container').length==0) { 

                $j('.j-alert-container').before('<div id="my_lightbox_container"></div>'); 

                } 

                

                var htmlClose = '<div style="top:4px;right:3px;position:absolute;height:30px;display:block;"><a href="javascript:void(0)" class="cancel-login" id="close-360-dialog" style="float:right"><img src="'+_jive_base_url+'/resources/scripts/fancyzoom/images/closebox.png"></a></div>'; 

                

                var popup = htmlClose + '<div class="my-container" style="background:white;border:3px solid #848589;padding-top:30px;border-radius:3px;">'+data+'</div>'; 

                

                $j('#my_lightbox_container').html(popup).lightbox_me({ 

                closeSelector:'#close-360-dialog', 

                centered:true 

                });

               

                },

                error : function(jqXHR, textStatus, errorThrown) {

                console.error("HTTP status code: " + textStatus);

                }

              });

               

               

              2) Make sure that you only get the information from the soy template you want, without any headers, etc:

               

              Add the following annotation in the Action Class:

               

              import com.jivesoftware.community.action.util.Decorate;

               

              @Decorate(false)

              public class ViewDemoAction extends JiveActionSupport{

               

              ....

               

              }