Open up datapage in modal - how to pass parameter?

[NikkiC]

Hi,

We have a datapage of a list of current records.  At present, we click on a link, and the individual record opens up in a new tab / window.  What we would like to do, is have the record appear in a lightbox / modal.  However because there is no active "link" involved in opening up a modal (done with Bootstrap - it's simply: data-toggle="modal" data-target="#myModal") and then I would put the Caspio deploy code within div class="modal-content" - how would I ensure the correct record opens up?

Many thanks

Nikki

[NikkiC]

I've been working on this, and managed to find a solution which works in a testing environment, but not within Caspio!

 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-cardid="[@field:Card_ID#]">[@field:Question]</button>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Card ID</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('cardid')
  var modal = $(this)
  modal.find('.modal-title').text('Card ID ' + recipient)
  modal.find('.modal-body').html('<iframe src="https://account.testboard.com/TEST_CARD_MODAL.php?Card_ID=' + recipient + '" style="width: 850px; height: 600px;">')
})

$('#exampleModal').on('hidden.bs.modal', function () {
 window.location.reload();
})

</script>

Can anybody help??!!

Many thanks

Nikki

[NikkiC]

Just to let anyone know if they're interested that I got this script to work, by changing the datapage!  There must have been something in the original one that stopped it from working.

[Elderberg]

On 2/23/2018 at 5:11 AM, NikkiC said:

Just to let anyone know if they're interested that I got this script to work, by changing the datapage!  There must have been something in the original one that stopped it from working.

What datapage did you use?

[Meekeee]

Hi! I would like to share this helpful video from Caspio Labs about using modal in DataPages:

 

Check the description to download the files needed.

[ParkLoey]

Hi! I just wanted to add since I was able to use this to show my details page in a modal window. On the video that @Meekeee provided, the HTML used for the button is like this:

<a class="btn btn-primary text-white mt-3 mb-4"  style="color: #fff; text-decoration: none;" onclick="openModal('See Details', 'efc419ff38ce4a2b9e27', '','modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

The values we need to change is listed on the document that they provided in the YouTube video, but to make sure we pass an id field or parameter to be received by our Details Page, it can be added after the appkey

<a class="btn btn-primary text-white mt-3 mb-4"  style="color: #fff; text-decoration: none;" onclick="openModal('Add Contact', 'appkey', '?ParamName=[@field:ParamName]','modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

It's just like in passing parameters on query string but without the URL

https://howto.caspio.com/parameters/parameters-as-query-string-values/

I hope this helps!

- LOEY