Why isn't table rows clickable, with data retrieved from MySQL & jQuery .click function?

Question

I've retrieved all data from MySQL table and echoed inside a table rows, once it is clicked a text editor appears, although only the first result is clickable while all the rest there are no effects when clicking on them.

foreach to retrieve data

$getInfo = $articleClass->get_all_article_info();

foreach($getInfo as $data)
{
    $article_title = $data['article_title'];
    $article_content = substr(htmlentities($data['article_content']),0,50).'...';
    $article_content_full = $data['article_content'];

    echo '
        <tr id="tr_id">
            <td class="marker">
                <i class="fa fa-align-left"></i>
            </td>

            <td class="title">
                '.$article_title.'
            </td>

            <td class="content">
                '.$article_content.'
                </td>
        </tr>

        <section id="post_info_id" style="display:none;">
            <textarea id="editor1">
                <div style="width:468px;">
                    '.$article_content_full.'
                </div>
            </textarea>
        </section>
    ';
}

jQuery

$(document).ready(
function()
{
    $("#tr_id").click(function()
    {
        $("#post_info_id").css("display", "block");
        $("#table_id").hide();
    });
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};

EX: I get a list of results

[row 1] title1 | content1
[row 2] title2 | content2
[row 3] title3 | content3
[row 4] title4 | content4
[row 5] title5 | content5
[row 6] title6 | content6

If I click on row 1, the text editor opens up, hides the tr_id and displays the text editor, but if I return to the index page and click on row 2, it's an empty row. I am not sure if this issue is due to using a foreach or because jquery, which I doubt.

Karl-André Gagnon · Accepted Answer · 2014-04-02 17:03:34Z

1

id need to be unique. So when doing $("#tr_id"), it return only 1 result (the first one) and do what you ask for. Change your id for a class.

In case you are lazy (but i mean really lazy) and don't care about valid HTML, here 2 working selector :

$("tr#tr_id");
$("[id='tr_id']");

answered Apr 2, 2014 at 17:03

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

iBrazilian2 Over a year ago

Okay, I set the id of the tr to each unique article_id, all have unique id's now, but I cannot get the #post_info_id to correspond with the correct tr id as the jquery is outside of the echo, so when I click on the row it just display any of the #post_info_id that was retrieved.

Karl-André Gagnon Over a year ago

@iBrazilian2 I am not quite following you here... All you had to do is change id="tr_id" to class="tr_id" and your selector to .tr_id.

iBrazilian2 Over a year ago

That did not work because even if I do that, #post_info_id doesn't have an specific id either, so it just retrieves the first result always.

Karl-André Gagnon Over a year ago

@iBrazilian2 you'll need to use DOM traversing methods.

Manwal · Accepted Answer · 2014-04-02 17:06:51Z

0

Use class for <tr class="tr_class">

change jquery method to on tr class

$(".tr_class").click(function(){
//your code

})

Because if you want click event on all tr "ID" doesn't suits you well.

answered Apr 2, 2014 at 17:06

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

Why isn't table rows clickable, with data retrieved from MySQL & jQuery .click function?

foreach to retrieve data

jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

foreach to retrieve data

jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related