Onclick changing the url without reloading

Question

I have a 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 press on a tr , another table will show up matching the http request. In other words i will use the $_GET['id'] value in a query:

$sql="SELECT * FROM `table` WHERE `id`='".$_GET['id']."'";
$query=mysql_query($sql,$db);

In this way another table ,containing different data deppending on user request, will show up when a row is clicked.It works fine,but the only problem is that i have to do this without reloading the page.Any idea? I need some examples too because i am new in Js,Ajax,etc.

Does the `table` need to be replaced by another `table` or do you want to add a table? — S.Pols, Dec 15 '14 at 12:58
@AlexShumilov , i have to do it without reloading the page,and on the same page where the tables and queries are... — Petru Lebada, Dec 15 '14 at 12:58
@S.Pols , no ,just the data will be different deppending on request — Petru Lebada, Dec 15 '14 at 12:58

S.Pols · Accepted Answer · 2014-12-15T13:31:28.347

My advice is to use a data attribute to set the id. Something like this:

<?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 catch 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's 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>';

?>

and if the id is a request from a database? the value will be relative... and will be server-side — Petru Lebada, Dec 15 '14 at 13:17
If the value is server-side, i don't know what you mean with not reloading the page, because if it's a request where you are executing a query you already are reloading the page right? — S.Pols, Dec 15 '14 at 13:21
let me understand this syntax: var id = $(this).data('id'); , .data('id') is data-id from the tr? — Petru Lebada, Dec 15 '14 at 13:36
Yes it is, where `$(this)` is the clicked `tr`. So there you got the id of the clicked row. — S.Pols, Dec 15 '14 at 13:37

score 1 · Answer 2 · answered Dec 15 '14 at 13:04

1

Via Ajax you could 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 would 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>

in your QUERY string, sanitize your input like below:

$sql="SELECT * FROM `table` WHERE `id`='".mysql_real_escape_string($_GET['id'])."'";

p.s. i have done this semi blind but should get you on the right track

answered Dec 15 '14 at 13:04

PHPology

1,017
6
12

in this way, the page wont be reloaded? – Petru Lebada Dec 15 '14 at 13:06
no - altho there is an ahref tag, the javascript is returning false at the end so the page wont reload. – PHPology Dec 15 '14 at 13:08
and in case the id is a database request too ?? it will be relative,and i dont know if it can be done in this way – Petru Lebada Dec 15 '14 at 13:09
not sure what you mean here. the value against data-id="" can be anything including the id you want to use when you load up data from the database – PHPology Dec 15 '14 at 13:24

Onclick changing the url without reloading

2 Answers2