Pass php variable to jquery and use it to display data in jquery dialog

Question

I'm struggling trying to find a way to dynamically display mysql/php query data in the jquery dialog. In short, I have a html table with mysql results. Each tr has next to its result an icon inside of the anchor tag with the correspondent mysql id.

echo '<a href="index.php?word_id=' . $row['word_id'] . '" class="clickable"><i class="fa fa-table"></i></a>';

When I click on the icon, the jquery should pass the id to the new query and open the dialog with a new html table and appropriate mysql results.

<div id="ui-dialog-first">
<?php
$query = "SELECT alt1.pron AS pron, alt1.word_form AS word1, alt2.word_form AS word2 FROM alter alt1  LEFT JOIN  alter alt2 ON alt2.pron = alt1.pron WHERE alt1.word_id = '$word_id'";
    $result = mysqli_query($con, $query);
    if (mysqli_num_rows($result) > 0) {
        echo "<table class='alter' style='visibility:hidden;'>";
        while ($row = mysqli_fetch_array($result)) {
        echo "<tr><td>" . $row['pron'] . "</td><td>" . $row['word1'] ."</td><td>" . $row['word2'] . "</td></tr>";                 
}
    echo "</table>";
    ?>  
</div>

I tried everything I could find and think of, but all I get when the jquery dialog opens are the results for the last row of the inital html table no matter on which icon I clik. Here is my jquery code without experiments on the id:

$(document).ready(function(){
    $('.clickable').click(function(event){
        event.preventDefault();
        $('.ui-dialog-first').dialog({
            open: function(){
                $(this).dialog('option', {
                'minWidth': 700,
                'minHeight': 500, 
                'padding-bottom': 20
                });
                $(this).dialog({
                    classes: {
                        'ui-dialog-titlebar': 'custom-green'
                    }
                });
            }
        });
        $('.alter').css('visibility', 'visible');
         $.ajax({
            url: "index.php",
            method: 'GET',
            data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"}",
            success: function(data)
            {
               $('.alter').html(data);
            }
        });
    });
});

My question, is there a way how to pass the word_id from the anchor tag to the query and then open the dialog with the corresponding results?

Answer 1

You could always use JQuery to grab the href from the tag and then parse the string for your word_id, but an easier way would be to assign the tag an id attribute using the word_id. So like,

echo '<a id="' . $row['word_id'] .'".....

Then use JQuery inside your click handler to grab the id like, event.target.id , but be sure to assign the id to a variable which then has scope for the ajax data portion.

$(document).ready(function(){
$('.clickable').click(function(event){
    var word_id = event.target.id;
    event.preventDefault();
    $('.ui-dialog-first').dialog({
        open: function(){
            $(this).dialog('option', {
            'minWidth': 700,
            'minHeight': 500, 
            'padding-bottom': 20
            });
            $(this).dialog({
                classes: {
                    'ui-dialog-titlebar': 'custom-green'
                }
            });
        }
    });
    $('.alter').css('visibility', 'visible');
     $.ajax({
        url: "index.php",
        method: 'GET',
        data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"word_id:" + word_id + "}",
        success: function(data)
        {
           $('.alter').html(data);
        }
    });
});

Then you can use the proper word_id in your query on your backend. Hope that helps.