Jump to content
  • 0

Open up datapage in modal - how to pass parameter?


NikkiC

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

15 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

  • 0

Loey - were you able to pass the parameters ? I must be doing something wrong with my syntax. When I added my parameters in that location my modal wouldn't open. I've been trying to find alternatives and even entertaining using triggers to move the data from one table so that it's available in the next form. If I ditch the modal altogether I can pass the parameters on the submit button, but that's the best user experience...

Link to comment
Share on other sites

  • 0

Hi @Corpcatalog,

You can add this reset parameter after other parameters in the query string by adding the ampersand symbol (&) between the parameters as follows:

<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]&cbResetParam=1' , 'modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

Here is a How-To article as well: https://howto.caspio.com/parameters/resetting-parameters/

Link to comment
Share on other sites

  • 0

Thanks for the tip - that worked perfectly.

I have another problem - I have a report page that is embedded into a weebly site, that worked rendered perfectly at 100% width, responsive and scrolled.

Since I added the model code the report will only render as a fixed width with no scrolling and not responsive.

Is there something in the modal style that is messing with either the weebly template or the caspio css?

Link to comment
Share on other sites

  • 0

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>
Link to comment
Share on other sites

  • 0

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style> 

 

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...
×
×
  • Create New...