Resolved How to go up in the hierarchy of elements with the "this" keyword in jQuery?

[2033]

I have a table of data with a pretty basic delete button in the last table row. I want this button to contain a specific ID for an entity in the same row where the button is.

<button data-id="@word.Id" class="deleteWord">
    Delete
</button>

The problem is in the JavaScript. As you can see, I'm using a CSS class in order to produce a click event. Also, I'm using Bootbox for confirm action. After that I need to receive an ID of the element, but if I use the same class name (.deleteWord) it's going to take an ID of the first button in a table. So I need to use this keyword. And it works without the Bootbox, so I need to use this keyword, but not for the Bootbox. I need to go up one level in order for this keyword to refer to the button. How can I do this?

$(".deleteWord").on("click", function () {
    bootbox.confirm("Do you really wanna delete this word?", function(result) {
        if(result){
            var id = $(this).data("id");

            $.ajax({
                url: '@Url.Action("DeleteWord", "Home")',
                type: "POST",
                data: { id: id },
                success: function(res) {
                    count -= 1;

                    $("#numWords").text(count);
                    $("#word").text(count === 1 ? "word" : "words");

                    toastr.success("The word has been successfully deleted");

                    $("#tableRow-" + id).css('background','tomato');
                    $("#tableRow-" + id).fadeOut(800, function(){
                        $(this).remove();
                    });

                    $("#BtnStudy").prop("disabled", count === 0);
                    $("#BtnStudyFav").prop("disabled", countFav === 0);
                }
            });
        }
    });
});

 

[Skydiver]

This is a C# forum, so take the following with a huge grain of salt since you are asking a JavaScript/jQuery question. Anyway instead of using $(this).date("id"), shouldn't you be referring to $(".deleteWord").data("id").

 

[Skydiver]

Ah. I think I see what the issue is. You have more than one "Delete" button.

Perhaps grab the $(this).data("id") value before calling bootbox, and use that value in the callback? Something like:

$(".deleteWord").on("click", function () {
    $buttonDataId = $(this).data("id");
    bootbox.confirm("Do you really wanna delete this word?", function(result) {
        if(result){
            var id = $buttonDataId;
:

 

[2033]

@Skydiver, thanks for the previous answer; it helped.

I need to TTS a string coming from my view's model. But for some reason, in the browser, I have an error indicating that this string value is not defined. I know that the @ sign just returns the value, but how to convert it to a string so that JS would understand it? I tried the ToString() method and also tried the @{""} syntax.

var firstText = @Model.CurrentWord.Name;

 

[2033]

Basically, I need to TTS a string right after the view is loaded. I tried to take an element by ID and TTS its value, but it says "Undefined".

 

[Skydiver]

Did you try quotes around it?

var firstText = "@Model.CurrentWord.Name";

 

[2033]

Did you try quotes around it?

var firstText = "@Model.CurrentWord.Name";

Damn, and I'm trying to use methods or interpolation. I have to stop thinking too much. It only overcomplicates the problem.))