How Can I open the modal popup to display data of one datatable using Link on another page
How Can I open the modal popup to display data of one datatable using Link on another page
Shivani Vyas
Posts: 113Questions: 11Answers: 0
in General
I have datatable that I am using to display data for all assets from database. In this table I want to put a link to a field which can open modal popup which can display data from another datatable with selected fields. I check similar questions in forum but mostly all having modal popup for same table where they want to open it. But in my case I want to open modal popup of another table in my page using link.
Please direct me to right direction by providing any working example and reference documents.
Here is my code so far.
Table 1 - where I applied Link to table field called - scadaPoints
var table = $('#assyntCx_Table').DataTable( {
dom: 'lBfrtip',
serverSide: true,
processing: true,
ajax: {
url: "../ajax/at/assets_ss.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2
},
columns: [
{ data: "id" },
{ data: "designTag", className: "dt-nowrap", },
{ data: "specTag", className: "dt-nowrap", },
{ data: "loc", className: "dt-nowrap", },
{ data: "building", className: "dt-nowrap", },
{ data: "room", className: "dt-nowrap editable", },
{ data: "level", className: "dt-nowrap editable", editField: "A.levels", },
{ data: "assetType", className: "dt-nowrap editable", editField: "A.assetType",},
{ data: "entity", className: "dt-nowrap editable", editField: "A.entity",},
{ data: "design", className: "dt-nowrap editable", },
{ data: "assetStatus", className: "dt-nowrap editable", editField: "A.assetStatus", },
{ data: "oldID", className: "dt-nowrap editable", },
{ data: "PR", className: "dt-nowrap", },
{ data: "SR", className: "dt-nowrap", },
{ data: "subsystem", className: "dt-nowrap", },
{ data: "discipline", className: "dt-nowrap", },
{ data: "PICO", className: "dt-nowrap", },
{ data: "SAT", className: "dt-nowrap", },
// This is the field where I want to apply Link to open Modal popup
{ data: "scadaPoints",
className: "dt-nowrap dt-center",
render: function ( data, type, row) {
if ( type === 'display' || type === 'filter' ) {
if(data != "0"){
return '<a href="#" data-toggle="modal" data-target="#scadaModal">'+data+'</a>';
// I tried to made button instead link to try below code but its not working
//return '<button class="btn btn-primary" data-toggle="modal" data-loopNo="'+row.loopNo+'" data-scadatag="'+row.scadatag+'" data-target="#scadaModal">'+data+'</button>'
}else{
return '';
}
//../asset/scadapoints.php?assetID='+row.id+'
}
if(data != "0"){
return data;
}
else{
return '';
}
},
},
{ data: "U.username", className: "dt-nowrap editable", editField: "A.bic",},
{ data: "assetPhase", className: "dt-nowrap editable", editField: "A.phase",},
{ data: "seq", className: "dt-nowrap editable", },
{ data: "comment", className: "editable", },
],
Table 2 - the data of this table I want to display on modal popup. on this table I made modal and try out some code which is not working.
<div class="container-fluid ms-7 w-auto">
<div class="card">
<div class="card-body">
<div id='phaseTable' class='content'>
<table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
<thead>
<tr>
<th data-priority="10" class='text-center'>Loop Number</th>
<th data-priority="10" class='text-center'>SCADA Tag</th>
<th data-priority="20" class='text-center'>Location</th>
<th data-priority="20" class='text-center'>Equipment Tag</th>
<th data-priority="20" class='text-center'>Asset Type</th>
<th data-priority="20" class='text-center'>Subsystem</th>
<th data-priority="20" class='text-center'>Level</th>
<th data-priority="20" class='text-center'>Room</th>
<th data-priority="20" class='text-center'>Service Description</th>
<th data-priority="30" class='text-center'>PLC ID</th>
<th data-priority="30" class='text-center'>Cabinet Tag</th>
<th data-priority="30" class='text-center'>Field End Terminated</th>
<th data-priority="30" class='text-center'>Marshalling Panel Terminated</th>
<th data-priority="30" class='text-center'>Comments</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!-- Scada Model Popup -->
<div id="scadaModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">Scada Points Details</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
$(document).ready(function() {
var table = $('#assyntCx_Table').DataTable( {
dom: 'lBfrtip',
ajax: {
url: "../ajax/at/scadapoints.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2
},
columns: [
{ data: "A.loopNo", className: "dt-nowrap", },
{ data: "A.scadaTag", className: "dt-nowrap", },
{ data: "LocationName", className: "dt-nowrap", },
{ data: "T.assetTag", className: "dt-nowrap", },
{ data: "assetTypeName", className: "dt-nowrap", },
{ data: "systemName", className: "dt-nowrap", },
{ data: "levelTLA", className: "dt-center", },
{ data: "Room", className: "dt-center", },
{ data: "status", className: "dt-nowrap", },
{ data: "A.plcID", className: "dt-nowrap"},
{ data: "A.cabinetTag", className: "dt-nowrap"},
{ data: "FTerminated", className: "dt-center" },
{ data: "MPTerminated", className: "dt-center"},
{ data: "A.comments", className: "dt-nowrap", },
],
//SHOW SELECTION & SAVE PREVIOUS STATE
select: true,
stateSave: false,
//DISABLE AUTOWIDTH
"autoWidth" : false,
//BUTTONS
buttons: [],
//PAGINATION OPTIONS
pageLength: 250,
lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
initComplete: function() {
var api = this.api();
// Apply the search
api.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
} );
// SCADA MODEL
$("#scadaModal").on('show.bs.modal', function (e) {
var triggerLink = $(e.relatedTarget);
var loopNo = triggerLink.data("A.loopNo");
var scadatag = tiggerLink.data("A.scadaTag");
$("#modalTitle").text(title);
$(this).find(".modal-body").html("<td>Loop No: "+loopNo+"</td><td>Scada Tag: "+scadatag+"</td>");
});
});
This question has accepted answers - jump to:
Answers
That should be possible just using the API, but I'm struggling to understand the flow here. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin Hello I am not sure how I can make link that open another data table in test case. So here is the picture 1 of Table 1 where my Link is placed and when I click on link it should open modal popup on the same page but modal popup should contain details from another table with marked fields in 2nd picture.
Picture 1 - Table 1 - where I clicked on Scada Points column - number 1 , it should open modal popup window on same page, which will display - information of that scada point stored in Table 2. (Want to display only red marked columns)
Picture 2 - Table 2
Currently when I click on Link it redirect to the Table - 2 page. Instead of the only Link I want to open popup window on Table - 1 page with information from Table - 2.
Sounds like you want to create a click event, see the event delegation example, and in the event handler use .modal('show') to display the modal. Does the Scada Points value, or some other value from the row, need to be passed to the modal Datatable to load the correct data?
Once the modal is shown, the
show.bs.modalevent, you will want to populate the scada Datatable with the appropriate data. There are a number of ways to do this depending on your needs. Maybe you will want to initialize the Datatable the first time then useajax.reload()for subsequent modals. You can useajax.dataas a function to pass data any IDs from the main table to the server, see this example. You can useDataTable.isDataTable()to determine whether to initialize a new Datatable or useajax.reload().Hope these ideas help. Let us know if there are further questions.
Kevin
@kthorngren
Yes here in First Table Spec Tag column's value and in Second Table Equipment Tag column's value is same. So I believe if I create a click event, it won't work as I want. I checked event delegation example. In that whatever value you clicked in row , popup window is appear. But I want to just make 'Scada Points column's Value' in Table 1 as a Link ( Click). So we are not passing any value manually but it Should only display specific 'Spec Tag value's ' information from table - 2 ( which is field - Equipment Tag).
I am also not sure whether I create modal in correct file or not. Currently I created modal in Table - 2 file code. But I want to display popup window in table - 1 page (Project Wide Page).
Please advice and also provide example code available for similar issue.
Makes sense. It seems like your
show.bs.modalevent handler should pick that up. You can then use that as part of the parameters passed in theajax.datafunction.I'm not a Bootstrap modal expert but I would guess the modal should be on the same page that you want to display it.
If you want help with an example please start building your code using one of the JS BIN templates here. You can use the Download Builder to grab the Bootstrap and Datatables code for the test case.
Kevin
Okay I will try using on that page when I want popup to display. But my question is " to display data of another table on that page ( where i want modal popup) how can I fetch data?". I mean I check ajax.data function, but my data that I want to display is stored in another datatable on another page in website. So should i use > ajax.url() function ? and apply page link there ? it will work ? @kthorngren
Sorry, I'm still not following everything. Sounds like you have two webpages each with Datatable. One Datatable shows data from
assets_ss.phpand the other page shows data fromscadapoints.php. When you click the link on theassets_ss.phptable you want to display data fromscadapoints.php. I assume this modal will be on the same page asassets_ss.php.You wont be able to get the data from the other
scadapoints.phppage. You will need to fetch the data via ajax to display in the modal. Are you wanting to display all the data fromscadapoints.phpor filter it based on the row clicked?Kevin
Figured it would be easier with a simple demonstration:
http://live.datatables.net/tekurocu/1/edit
I built a simple modal and used the link similar to your code snippet to pass data from the row. It uses
destroyto reinitialize the Datatable each time the modal is opened. The modal table usesaax.dataas a function to pass theofficeof the row clicked. The example usesajax.dataSrcto simulate the filtering the server would do. You wouldn't use this as part of the solution.Kevin
@kthorngren Hello Kevin, apologies for late response. Yes you are correct. I have two webpages each with datatable. I want a link on one Datatable which shows data from assets_ss.php and when I click the link I want to display data from scadapoints.php table in modal popup.
No I dont want all data from scadapoints.php , I want selected data which marked with Red color in picture.
I want following columns from scadapoints.php
so when I click on asset_ss.php - column SCADA points - it should open that specific row's data... I mean specific Spec Tag value's information from scadapoint.php
Spec tag column in asset_ss.php - > { data: "specTag", className: "dt-nowrap", }, and Equipment tag column in scadapoint.php - > { data: "T.assetTag", className: "dt-nowrap", }, is same. So when I clicked on link it should open that row's SpecTag value's information from another datatable - scadapoint.php
so how I can do that. I checked example you shared but still confuse how do I fetch data from another datatable
There is not a way to get the data from another web page. You will need to fetch the data from the server using ajax. You can send the clicked
SpecTag, as a parameter, in the ajax request. The server script will need to get the parameter and use it to filter the datatabse query to return only the rows you want.Kevin
@kthorngren okay thank you kevin. Is there any similar example link that you can share which can fetch data from server using ajax with parameter and take that parameter to use it to filter data ?
The example I provided shows the clients side. As explain the
ajax.dataSrcis not needed as it is used simply for the demo. There isn't a server script in the JS BIN environment to accept parameter for filtering.I don't use PHP so don't have specifics but you could take the
scadapoints.phpscript and check to see if the filtering parameter was sent. If it is then use it to adda.wherecondition (assuming you are using a SQL like db) to the query.Kevin
@kthorngren Here I tried using your example and by sending 'id' as parameter in the ajax request of scadapoints.php page. But I am not getting any data not sure why. I checked dev tool as well but no errors in dev tool. I know its not complete solution yet but I tried below code. I am getting popup modal but not data.
Use the browser's network inspector to see what is sent in the XHR request and what the response is. You should see an XHR request sent when the modal is open. If there is no data returned then you will need to debug your server script
scadapoints.php.Kevin
@kthorngren Hello Kevin, thank you so much for your help. I found the error and now I am getting data. But now when ever I clicked on link instead of giving information of that specific asset, its giving me whole list of scadapoints.
you said something about where clause and sql query. Can you explain little more ?
Here is my code and what I am getting in response on website.
When I click to the link it should only give this specific asset's information.
but when I click it displays other asset's information too ( Marked in Blue which should not display) and only display last one.. which is the asset which I clicked ( Marked with Red ).
In
../ajax/at/scadapoints.phpyou will have something querying the database. What is that? Whatever it is, it will need to take into account$_GET['id']and apply that as the WHERE condition.Allan
Thank you @allan Yes I figure it out yesterday. Thank you so much.