Custom JQuery code targeting elements of the table is not working

  • Resolved thelearnerboy

    (@thelearnerboy)


    3 years, 2 months ago

    I am trying to achieve something. I have a row with two columns. In the left column, I have the tablesome table and in the right side, I have a textarea form. Now, I want to add the text of a tablecell to the form textarea when clicking on another tablecell (I have added a + sign in that cell ). Now, after creating the table in WP, I copied the html code of the table from the website frontend and tried to achieve the same using HTML, JQuery. Now, in my static version HTML test file, it works fine. But when I implement it in the website, it stops working.
    PS. I used asset cleanup, and I saw that whenever I block the tablesome js file from the page, my code works. But when I put it back, my code stops working.
    Please help. ( I am attaching my HTML code file herewith. Click on the plus there and you will see the text will be added to the form )

    
<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<body>
    <style>
        .form-control {
            height: auto;
        }
        
        [data-label="Sign"] {
            cursor: pointer;
        }
    </style>
    <h3>Tablesome Custom JS</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <table id="652" class="tablesome__table tablesome__table--nowrap tablesome__table--read-only tablesome__table--customStyle">
                    <thead class="tablesome__thead">
                        <tr class="tablesome__row">
                            <th class="tablesome__column svelte-1hquk85 tablesome__column--active" data-column-id="4" data-column-format="text"><span class="tablesome__column__name">Name</span> <span class="dashicons tablesome__column__icon dashicons-arrow-down"></span> </th>
                            <th class="tablesome__column svelte-1hquk85" data-column-id="5" data-column-format="text"><span class="tablesome__column__name">Type</span> <span class="dashicons tablesome__column__icon"></span> </th>
                            <th class="tablesome__column svelte-1hquk85" data-column-id="6" data-column-format="text"><span class="tablesome__column__name">Sign</span> <span class="dashicons tablesome__column__icon"></span> </th>
                        </tr>
                    </thead>
                    <tbody class="tablesome__tbody">
                        <tr class="tablesome__row" data-state-record-id="1">
                            <td class="tablesome__cell" data-label="Name">John</td>
                            <td class="tablesome__cell" data-label="Type">Car</td>
                            <td class="tablesome__cell" data-label="Sign">+</td>
                        </tr>
                        <tr class="tablesome__row" data-state-record-id="2">
                            <td class="tablesome__cell" data-label="Name">Ben</td>
                            <td class="tablesome__cell" data-label="Type">Bicycle</td>
                            <td class="tablesome__cell" data-label="Sign">+</td>
                        </tr>
                        <tr class="tablesome__row" data-state-record-id="3">
                            <td class="tablesome__cell" data-label="Name">Alex</td>
                            <td class="tablesome__cell" data-label="Type">Bike</td>
                            <td class="tablesome__cell" data-label="Sign">+</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Leave a comment here" id="text_tag_input"></textarea>
                    <label for="text_tag_input">List</label>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('.tablesome__tbody .tablesome__row [data-label="Sign"]').click(function() {
            var value = $(this).siblings('[data-label="Name"]').text();
            var input = $('#text_tag_input');
            input.val(input.val() + value + ", ");
            return false;
        });
    </script>
</body>

</html>
Viewing 1 replies (of 1 total)

  • Hi @thelearnerboy ,

    I have answered this question in your other ticket. I hope that answers your others.

    Please don’t hesitate to let me know if you still have any questions. I will be happy to answer you.

    Kind Regards.

    • This reply was modified 3 years, 2 months ago by pauplesupport.
Viewing 1 replies (of 1 total)
  • The topic ‘Custom JQuery code targeting elements of the table is not working’ is closed to new replies.