Menu
I filled my html table with documents from my MongoDB collection named "modules". My document looks like:
{
"_id" : ObjectId("59859f9bd5234d8d415eb0ca"),
"name" : "Module A",
"weight" : 18,
"components" : [ "cid1", "cid2","cid3", "cid4","cid5"],
"color" : "blue"
}
My HTML-row structure:
<tr>
<th scope="row">1
</th><td>Module A</td>
<td>18kg</td>
<td>
<a href="cid1">Component 1</a>
<a href="cid2">Component 2</a>
<a href="cid3">Component 3</a>
<a href="cid4">Component 4</a>
<a href="cid5">Component 5</a>
</td>
<td>blue</td>
</tr>
For my connection I used (found in a tutorial):
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter = [];
$options = [
'sort' => ['_id' => 1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $manager->executeQuery('workshop.modules', $query);
Document from "components" collection:
{
"_id" : ObjectId("5985ca81d5234d8d415eb421"),
"name" : "Component 2",
"weight" : 1,
"price" : 10,
"color" : "blue"
}
The following I don't know how to do:
Klick on one of these components for example "Component 2". Search in another collection named "components" for this entry (with component name or id) and show information about this component an a new window or popup.
How can this be realize with php/jquery/mongodb?
PS: You can also change/improve my json structure if needed.
UPDATE:
Here ist my app.php source code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom CSS for Table -->
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<?php
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter = [];
$options = [
'sort' => ['_id' => 1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $manager->executeQuery('workshop.modules', $query);
?>
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?">
</div>
<span class="counter pull-right"></span>
<table class='table table-striped results'>
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Name</th>
<th>Weight</th>
<th>Components</th>
<th>Color</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<?php
$i=1;
foreach ($cursor as $document) {
?>
<tr>
<th scope="row"><?php echo $i; ?></td>
<td><?php echo $document->name; ?></td>
<td><?php echo $document->weight; ?>kg</td>
<td>
<?php
$components = $document->components;
foreach($components as $component) {
echo "<a class='component' href=$component>".$component."</a> ";
}
?>
</td>
<td><?php echo $document->color; ?></td>
</tr>
<?php $i++;
}
?>
</table>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Search function for table -->
<script type="text/javascript" src="tablesearch.js"></script>
</body>
</html>
I need a working solution that works with my app.php. And of course you can adjust my app.php if needed.
747
Here's one of many possible approaches:
Pass the component ID in a link, targeted to a new window, that calls a different PHP script that retrieves the document from the components collection and displays the data.
For example, a file component.php with the following:
<!DOCTYPE html>
<html lang="en">
/* ... */
<?php
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter = [
'_id' => (string) $_GET['id']
];
$options = [];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $manager->executeQuery('workshop.components', $query);
$document = reset($cursor); // select first result
?>
/* DISPLAY COMPONENT DETAILS HERE */
and in app.php, change the href for the component link to:
echo "<a class='component' href='component.php?id=$component'>".$component."</a>";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
