Open up datapage in modal - how to pass parameter?

[NikkiC 2]

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 2]

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 2]

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 0]

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?