[英]Table value passed to PHP script via JQuery when clicked
I have a link in a datatable that opens a bootstrap modal. 我在数据表中有一个链接,可以打开引导程序模式。 In the modal I have a morris.js graph. 在模式中,我有一个morris.js图。 I'm having troubles figuring out how to filter the dataset according to what link the user clicked on. 我在弄清楚如何根据用户单击的链接筛选数据集时遇到麻烦。
How do I read in the value of the where they click (eg Cluster1 or Cluster2 in this example). 如何读取它们单击的位置的值(例如,在此示例中为Cluster1或Cluster2)。 Pass that variable to the data pull script (eg cluster_pulse.php) and then into the SQL query within that script? 将该变量传递给数据提取脚本(例如cluster_pulse.php),然后传递给该脚本中的SQL查询?
Thanks!! 谢谢!!
Snip of the table: 表格的片段:
<tr class="odd">
<td class="sorting_1">
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster1</a></td>...
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster2</a></td>...
The modal: 模态:
<div class="modal fade" id="clusterpulse" tabindex="-1" role="dialog"
aria-labelledby="clusterpulse" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Cluster Pulse</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Cluster Pulse</h3>
</div>
<div class="panel-body">
<div id="morris-chart-cluster-pulse"></div>
</div>
</div>
</div>
</div>
</div>
</div>
The js: js:
<script>
$('#clusterpulse').on('shown.bs.modal', function () {
$(function () {
$( "#morris-chart-cluster-pulse" ).empty();
// Create a Bar Chart with Morris
var chart = Morris.Line({
element: 'morris-chart-cluster-pulse',
d: [
{ d: '0', VSI: 0 }
],
xkey: 'd',
ykeys: ['test'],
labels: ['test'],
gridIntegers: true,
ymax: '1',
ymin: '0',
xLabelFormat: function(d) { return (d.getMonth()+1)+'/'+d.getDate();},
xLabels: "week"
});
// Fire off an AJAX request to load the data
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php", // This is the URL to the API
})
.done(function (data) {
// When the response to the AJAX request comes back render the chart with new data
chart.setData(data);
})
.fail(function () {
// If there is no communication between the server, show an error
alert("error occured");
});
});
});
Data pull script: 数据提取脚本:
<?php
include("connect.php");
if( $conn === false ) {
echo "Could not connect.\n";
die( print_r( sqlsrv_errors(), true));
}
/* Set up and execute the query. */
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = '%$value%'
";
$stmt = sqlsrv_query( $conn, $sql);
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$json[] = $row;
}
} while ( sqlsrv_next_result($stmt) );
foreach($json as &$each) {
// reassign "d" key to just the date (formatted), discard the rest
$each['d'] = date('Y-m-d', strtotime($each['d']));
}
echo json_encode($json);
?>
HTML for examples below (I don't know if your table has issues): 以下示例的HTML(我不知道您的表是否有问题):
<a href='#' data-toggle='modal' data-target='#clusterpulse' id='cluster_number_1'>Cluster1</a>
<a href="#" data-toggle='modal' data-target='#clusterpulse' id='cluster_number_2'>Cluster2</a>
AJAX AJAX
$('#cluster_number_1').click(function(){
$.ajax({
type:'GET',
dataType:'JSON',
url:'../scripts/cluster_pulse.php?cluster1='+encodeURIComponent($(this).html())+'&something_else='+encodeURIComponent("now it's url safe 1")
}).done(/* or use success ajax Object property */);
return false;
});
$('#cluster_number_2').click(function(){
$.ajax({
type:'GET',
dataType:'JSON',
url:'../scripts/cluster_pulse.php?cluster2='+encodeURIComponent($(this).html())+'&something_else='+encodeURIComponent("now it's url safe 2")
}).done(/* or use success ajax Object property */);
return false;
});
You would get the AJAX at ../scripts/cluster_pulse.php
like: 您将在../scripts/cluster_pulse.php
获得AJAX,例如:
$data = array();
if(isset($_GET['something_else'])){
// rawurldecode($_GET['something_else']) is 'now it's url safe 1'
if(isset($_GET['cluster1'])){
$data = array('cluster1' = $_GET['cluster1'], $data['extra_data'] = 'some other data here 1');
// perform database stuff here
// $db->query(); lots more stuff assign to $data array
}
elseif(isset($_GET['cluster2'])){
// rawurldecode($_GET['something_else']) is 'now it's url safe 2'
$data = array('cluster2' = $_GET['cluster2'], $data['extra_data'] = 'some other data here 2');
// perform database stuff here
// $db->query(); lots more stuff assign to $data array
}
echo json_encode($data);
}
else{
// a $_GET hack occurred
}
Now from within 现在从内部
.done(function(results){
/* result are now JSON with properties like:
{
'cluster1':'Cluster1',
'extra_data':'some other data here 1';
}
or
{
'cluster2':'Cluster1',
'extra_data':'some other data here 2';
}
Note:
There is probably no need to send results already available in JavaScript to the
Server only to get them back to pass the results into your `.done()` method's
function argument
$('#outputId1').html(results.cluster1);
*/
});
What I ended up doing is added an ID to the table object with the cluster name: 我最终要做的是将一个具有集群名称的ID添加到表对象:
...
<td class="sorting_1">
<a href="#" data-toggle="modal" data-target="#clusterpulse" id="cluster1">cluster1</a></td>
...
Then in javascript I grabbed the ID of the clicked object and assigned to a global variable: 然后在javascript中,我抓取了被点击对象的ID,并将其分配给全局变量:
$("table").delegate("a", "click", function() {
id=$(this).attr('id');
});
Then in the get I passed the ID to the API: 然后在获取中,将ID传递给API:
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php?val="+id, // This is the URL to the API
Then in the php I grabbed the variable and passed it into my query: 然后在php中,我抓取了变量并将其传递给查询:
$rec = $_REQUEST['val'];
...
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = ('".$rec."')";
It seems to be working perfectly. 它似乎工作正常。 Thanks for all the help. 感谢您的所有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.