Jump to content

Search the Community

Showing results for tags 'modal'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






Found 3 results

  1. 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
  2. Hi, It would be really great to successfully publish datapages in modal blocks (dialog box / popup windows). While experiencing some success at displaying datapages in modals, I can see there are some problems: 1. The entire page refreshes on loading the modal for the first time. Not really a show stopper but something to be mindful of because you see a blank white moment during reload. 2. In a web form datapage, if field validation on submission fails, the page does not return to the modal even when configured to do so via a modal url link. (the popup disappears). 3. Javascript in a page within a modal doesn't run as expected or doesn't seem to trigger at all. Any ideas? JC
  3. I am using Laravel as backend and bootstrap as frontend I am using transaction ID from orders in table. Now if user clicks on that transaction ID, then I want to display the order on Bootstrap Modal... Here is code of Frontend : <table id="example" class="table table-striped table-bordered " cellspacing="0" width="100%"> <thead> <tr class="bg-info"> <th><center>Transaction ID </center></th> <th><center>Shop Name </center></th> <th><center>Sales Man </center></th> <th><center>Processed ? </center></th> </tr> </thead> <tbody align="center"> @foreach ($ordersList as $order) <tr id = "tr_{{$order->id}}"> <a> <td id="{{ $order->transaction_Id }}" data-toggle="modal" data-target="#modal{{$order->transaction_Id}}" style="cursor:pointer;color:blue" onclick="getCollapseData(id)"><u> {{ $order->transaction_Id }} </u></td> <td>{{ $order->Shop }}</td> <td>{{ $order->Sales }}</td> <td> <input id="chk_{{ $order->id }}" type="checkbox" name="is_Processed" onclick="orderProceesed(id)"><br> </td> </a> </tr> <!-- Modal --> <div class="modal fade" id="modal{{$order->transaction_Id}}" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> </div> </div> </div> @endforeach </tbody> </table> here is code of JavaScript Function : function getCollapseData(data) { //alert(data); $.ajax({ method : "GET", url: "orders.getCollapseData", data: {id: data}, success : function(response) { //alert(response); //$("#collapse"+data).empty(); //debugger; document.getElementById("modal"+data).innerHTML = ""; var receivedData = response; var html = ''; //alert("modal"+data); html += '<div class="modal fade" id="modal'+ data +'" role="dialog">'; html += '<div class="modal-dialog">'; //<!-- Modal content--> html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; html += '<h4 class="modal-title">'+ data +'</h4></div>'; html += '<div class="modal-body">'; html += '<table class="table table-striped table-bordered " cellspacing="0" width="100%">'; html += '<thead>'; html += '<tr class="bg-info">'; html += '<th><center> Product Name </center></th>'; html += '<th><center> Quantity </center></th>'; html += '</tr></thead>'; html += '<tbody align="center"><tr>'; for(i=0;i<response.length;i++) { html += '<td>' + receivedData.Product + '</td>'; html += '<td>' + receivedData.qty + '</td>'; } html += '</tr></tbody></table></div>'; html += '</div></div></div>'; document.getElementById("modal"+data).innerHTML = html; } }); } I am missing something and modal is not getting displayed
  • Create New...