Unable to replace text with replaceWith in jquery

Question

I have favorite script which add data to SQL and replace HTML tag everything works fine. So i added a text like Add Favorite and replaceWith Remove Favorite but this is how i get my output

as shown in image it is not replacing text but it is adding text, how do i solve this

         jQuery(document).ready(function ($) {
            $('.button').on('click', function (e) {
                e.preventDefault();
                var user_id = $(this).attr('user_id'); // Get the parameter user_id from the button
                var director_id = $(this).attr('director_id'); // Get the parameter director_id from the button
                var method = $(this).attr('method');  // Get the parameter method from the button
                if (method === "Like") {
                    $(this).attr('method', 'Unlike'); // Change the div method attribute to Unlike
                    $('#' + director_id).replaceWith('<i class="mi mi_sml text-danger" id="' + director_id + '"> favorite</i>Remove Favorite'); // Replace the image with the liked button
                } else {
                    $(this).attr('method', 'Like');
                    $('#' + director_id).replaceWith('<i class="mi mi_sml" id="' + director_id + '">favorite_border</i>Add Favorite');
                }
                $.ajax({
                    url: 'favs.php', // Call favs.php to update the database
                    type: 'GET',
                    data: {user_id: user_id, director_id: director_id, method: method},
                    cache: false,
                    success: function (data) {
                    }
                });
            });
        });

PHP

     function checkFavorite($mbid, $pid, $conn) {
        $stmt = $conn->prepare("SELECT * FROM favorite WHERE memberID=:mid AND id=:id");
        $stmt->execute(array(':mid' => $mbid, ':id' => $pid));
        $count = $stmt->rowCount();

        if ($count == 0) {
            echo "<div class = 'button' method='Like'  user_id=" . $mbid . " director_id=" . $pid . "><i class='mi' id=" . $pid . ">favorite_border</i>Add Favorite</div>";
        } else {
            echo "<div class = 'button' method='Unlike'  user_id=" . $mbid . " director_id=" . $pid . "><i class='mi mi_sml text-danger' id=" . $pid . ">favorite</i>Remove Favorite</div>";
        }
    }

@DhavalGol so how do i do that ?, i have added `data-id=` link `director_id=` — sanoj lawrence, Feb 22 '20 at 05:12
@sanojlawrence: you have to add id only with director_id value. after use $('#' + director_id).html(); — Dhaval Gol, Feb 22 '20 at 05:15
Don't use raw attributes to store data, use `dataset` with `data-`-prefixed attributes, like `
`. — Dai, Feb 22 '20 at 05:20

score 1 · Accepted Answer · answered Feb 22 '20 at 05:24

Your code isn't working because you cannot have underscores in HTML attribute names.

You should use dataset and data- attributes instead of using custom attributes.

Change your PHP to this:

        if ($count == 0) {
            echo "<div class='button' data-method='Like' data-user-id=" . $mbid . " data-director-id=" . $pid . "><i class='mi' id=" . $pid . ">favorite_border</i>Add Favorite</div>";
        } else {
            echo "<div class='button' data-method='Unlike' data-user-id=" . $mbid . " data-director-id=" . $pid . "><i class='mi mi_sml text-danger' id=" . $pid . ">favorite</i>Remove Favorite</div>";
        }

Change your JavaScript to this:

Use data- for the attribute names (this is not the same thing as jQuery's data feature).
Ensure that all 3 values are set before continuing, otherwise throw an error so you can tell when it's encountered invalid markup.

                const user_id = $(this).attr('data-user-id');
                const director_id = $(this).attr('data-director-id');
                const method = $(this).attr('data-method');
                if( user_id && director_id && method ) {
                    // ...( do stuff)
                }
                else {
                    throw new Error( "Empty values encountered." );
                }

so i need to add `if(method === "Like") {}else{}` inside `if (user_id && director_id && method) {` — sanoj lawrence, Feb 22 '20 at 05:42

Unable to replace text with replaceWith in jquery

1 Answers1