How to pass dynamically generated div id to ajax?

Question

Hey i've got some problem.

My website is divided into two columns. On the left is sidebar which contains list of users dynamically generated from database, on the right-hand side should be unique chart generated by javascript framework (ajax) based on user_id. And this chart should be shown after choosing some user from list. The php file live-data.php which is used by this javascript/ajax needs GET parameter. Now it's:

url: "php/live-data.php"

and

$.get("php/live-data.php?Consultar=1", function(UltimosDatos)

but it should be

url: "php/live-data.php?user_id=2"

and

$.get("php/live-data.php?user_id=2&Consultar=1", function(UltimosDatos)

Where 2 is user_id got after clicking some user name from dynamically generated list. The php script live-data.php is ready for GET variable and returns proper json for chart framwork (this javascript shown below). I dont know how to pass div id to this ajax code.

HTML+PHP:

<div id="left" class="pre-scrollable col-lg-3">
    <div class="list-group">
        <?php include("php/dbSettings.php");
        $result = $conn->query("SELECT * FROM user ORDER BY user_id");
        if (!$result) {
            die(mysqli_error($conn));
        }
        while ($user = mysqli_fetch_array($result)){
        echo '<a href="#'.$user['user_id'].'" data-toggle="tab" class="list-group-item">' . $user['firstName'] . " " .$user['lastName'] . '</a>';
        }
        ?>
    </div>
</div>

<div id="right" class="col-lg-9">
    <div class="tab-content">
        <?php include( "php/dbSettings.php"); 
        $result=$ conn->query("SELECT * FROM users ORDER BY user_id"); 
        if (!$result) { 
        die(mysqli_error($conn));
        } 
        while ($user = mysqli_fetch_array($result)){
        echo '<div class="tab-pane" id="'.$user['user_id'].'">
        <div id="chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        </div>';
        } ?>
    </div>
</div>

Javascript/Ajax:

<script>
    $(function() {
        $(document).ready(function() {
            var ultimox;
            var ultimoy;

            $.ajax({
                url: "php/live-data.php", //i want this line to be "php/live-data.php?user_id=2" and 2 is variable got from user list onlick
                type: 'get',
                success: function(DatosRecuperados) {
                    $.each(DatosRecuperados, function(i, o) {
                        //some deleted code - unimportant
                    });

                    //some deleted code - unimportant

                    $('#chart').highcharts({
                        //draws chart
                    });

                }
            });
        });
        setInterval(function() {
                $.get("php/live-data.php?Consultar=1", function(UltimosDatos) { //i want this line to be "php/live-data.php?php/live-data.php?Consultar=1&user_id=2" and 2 is variable got from user list onlick
                        //updates chart
                    }
                });
        }, 1000);

        //some deleted code - unimportant

    });
</script>

I hope someone can help me on my way.

Thanks, Paul

Answer 1

It looks like the hash will be set to the user id when the anchor is clicked, based on this <a href="#'.$user['user_id'].'" so you could read the hash value and pass it as data on the request. Either this:

 $.ajax({ url: "php/live-data.php?user_id=" + window.location.hash.substr(1), type: 'get', success: function(DatosRecuperados) { // ... } }); 

or this:

 var dataObj = {}; dataObj['user_id'] = window.location.hash.substr(1); //create a data object to pass on query string, set user id value $.ajax({ url: "php/live-data.php", type: 'get', data: dataObj, //pass object with request success: function(DatosRecuperados) { // ... } });