External Link in Modal Window

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
kbarrett
Veteran Member
Posts: 50
Joined: 2019-02-24 16:35
Location: Calgary Alberta

External Link in Modal Window

Post by kbarrett » 2019-04-10 19:23

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!

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: External Link in Modal Window

Post by pbottcher » 2019-04-11 18:30

<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
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

kbarrett
Veteran Member
Posts: 50
Joined: 2019-02-24 16:35
Location: Calgary Alberta

Re: External Link in Modal Window

Post by kbarrett » 2019-04-11 20:46

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

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Re: External Link in Modal Window

Post by a.gneady » 2019-04-17 12:33

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.
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

Post Reply