Page 1 of 1

External Link in Modal Window

Posted: 2019-04-10 19:23
by kbarrett
Hello Coding Gurus,

Using AppGini V 5.75

I am hoping to add help files via a wiki from an external folder/site to my project. I know I could add to the field description but some of the explanations get wordy and a pop up modal window could provide an extra bit of assistance in many cases. I have tried adding something like this in various forms to the field description but it just clicks with nothing happening. The browser shows a link, no console error, just click and nada.

<a class="alert" href="http://somewebsite.com" title="Test" data-target="modal" data-toggle="modal">Help link here</a>

It would be an asset to my project if I could get this to work.
Thanks in advance!

Re: External Link in Modal Window

Posted: 2019-04-11 18:30
by pbottcher
<div>
<a class="btn bootpopup" title="This is title" target="popupModal2">Open modal</a>

Hi,

I think this is a little bit more complex.

You can try to add this:

Code: Select all

<a class="alert bootpopup"  title="Test" data-target="modal" data-toggle="modal">Help link here</a>
<div id="popupModal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
         <div class="modal-content">
                <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal">×</button>
                                               <h3>Title</h3>
                </div>
                <div class="modal-body">
      <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
                </div>
                <div class="modal-footer">
                               <button class="btn" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
</div>
 
<script>
        jQuery(function(){                      
             var url = "http://somewebsite.com/data";
             $j('.bootpopup').on("click",function(){
                    $j('.modal-body').load(url,function(result){
                               $j('#popupModal').modal({show:true});
                    });
             });
</script>
Hope it helps

Re: External Link in Modal Window

Posted: 2019-04-11 20:46
by kbarrett
Hi All,

With PBoettcher's help I figured out a solution. Please keep in mind this is more than likely an unintended hack of what Ahmed and his team had originally considered or intended for the feature's use.
Anyway in the table field description it is possible to launch a modal window using the following code:

<a href="" class="" title="Test" data-target="modal" data-toggle="modal">Help link here</a><div id="popupModal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4>Help</h4></div><div class="modal-body"><iframe src="http://www.somewebsite.com" style="zoom:50%" frameborder="0" height="250" width="99.6%"></iframe></div><div class="modal-footer"><button class="btn" data-dismiss="modal">OK</button></div></div></div></div><script>jQuery(function(){var url = "http://www.somewebsite.com";$j('.alert-link').on("click",function(){$j('.modal-body').load(url,function(result){$j('#popupModal').modal({show:true});});});});</script>

There are a few things to consider:

1. Most important this is a hack and there is no guarantee that it will work in future versions.
2. Everything has to be on one line. AppGini inserts break tags <br> when there is a carriage return or a line break in the description field. So the code is not formatted nicely at all.

Just substitute the somewebsite.com for whatever link you want. As I mentioned in the beginning of the string I want to add help files to my app and this appears the easiest way to do it.

Thanks again pboettcher for your assistance.

Kevin

Re: External Link in Modal Window

Posted: 2019-04-17 12:33
by a.gneady
Thanks for sharing this code :)
2. Everything has to be on one line. AppGini inserts break tags <br> when there is a carriage return or a line break in the description field. So the code is not formatted nicely at all.
In future releases, we plan to suppress this behavior (changing new lines to <br>) in case the description includes HTML tags.