Jump to content
  • 0

Open up datapage in modal - how to pass parameter?


NikkiC
 Share

Question

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...