Onclick changes url without reloading
I have content like this:
EDIT FOR ID:
echo '<table>';
$row=mysql_fetch_array($query){
echo '<tr onclick="window.location=\'index.php?id='$row['id']'\'"><td>Row1</td></tr>';
echo '<tr onclick="window.location=\'index.php?id='$row['id']'\'"><td>Row2</td></tr>';
}
echo '</table>';
When the user clicks on tr, another table will be displayed according to the http request. In other words, I'll use the $ _GET ['id'] value in the request:
$sql="SELECT * FROM `table` WHERE `id`='".$_GET['id']."'";
$query=mysql_query($sql,$db);
Thus, clicking on a row will display another table containing different data depending on the user query. It works fine, but the only problem is that I have to do it without reloading the page. Any idea? I need some examples because I'm new to Js, Ajax, etc.
source to share
My advice is to use the data attribute to set the id. Something like that:
<?php
echo '<table id="aTable">';
echo '<tr data-id="1"><td>Row1</td></tr>';
echo '<tr data-id="2"><td>Row1</td></tr>';
echo '</table>';
echo '<table id="anotherTable">';
echo '</table>';
?>
Then intercept the click event with jQuery with this:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).on('click','#aTable tr', function(e){
var id = $(this).data('id');
$('#anotherTable').load('index.php?id='+id);
});
</script>
In your index, you can catch the id and echo the table with something like this:
<?php
if(isset($_GET['id']) && is_numeric($_GET['id']))
{
//DONT USE mysql_*
$mysqli = new mysqli("localhost", "user", "password", "database");
if ($result = $mysqli->query("SELECT * FROM `table` WHERE `id`='".(int)$_GET['id']."'"))
{
while ($row = $result->fetch_assoc()) {
echo '<tr>';
echo '<td>'.$result['column1'].'</td>';
echo '<td>'.$result['column2'].'</td>';
echo '</tr>';
}
}
//Add an exit because it an AJAX call.
exit;
}
?>
EDIT
for dynamic data attributes, you can use something like this:
<?php
echo '<table id="aTable">';
while($row = mysql_fetch_array($query))
{
echo '<tr data-id="'.$row['id'].'"><td>Row1</td></tr>';
}
echo '</table>';
echo '<table id="anotherTable">';
echo '</table>';
?>
source to share
Through Ajax, you can do something like this:
echo '<table>';
echo '<tr><td><a href="javascript:;" data-id="1" class="load-data">Row1</a></td></tr>';
echo '<tr><td><a href="javascript:;" data-id="2" class="load-data">Row2</a></td></tr>';
echo '</table>';
and then your javascript will be something like this via jquery
<script>
$('.load-data').click(function()
{
var t = $(this);
$.ajax({
type: 'POST',
url: 'PAGE_TO_GET_DATA',
data: { 'id': t.data('id') },
success: function(data)
{
//based on the response you output to load in the content against ID = x, you can target another DOM element and output to that
$('#output').html(data);
}
});
return false;
});
</script>
on the QUERY line, sanitize your input like below:
$sql="SELECT * FROM `table` WHERE `id`='".mysql_real_escape_string($_GET['id'])."'";
ps i did it half blind but should get you on the right track
source to share