button onClick to activate JQuery function

Question

I am still new to JQuery but what I am trying to do is this:

Click my edit button and call someFunction()
Jquery then will hide my edit button, show my save button, and hide the delete button.
Get the item.ID and save as a var for later.

Here is my attemp thus far.

The button set:

<td class="col-lg-3 col-lg-offset-1">
         <span style="visibility:hidden">@Html.DisplayFor(modelItem => item.ID)</span>

         <span class="item-edit-button">
         <button type="button" onclick="someFunction()" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
         </span>

         <span class="item-save-button">
         <button type="button" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
         </span>

         <span class="item-delete-button">
         <button type="button" class="btn btn-danger col-lg-4" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.ID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
         </span>
</td>

my JQuery attempt (without getting the var since I haven't gotten to that point yet)

<script>
    function someFunction() {
          someFunction //trying to get current item/value/button/ect..
                .hide()
                .next("span.item-save-button")
                .show()
                .next("span.item-delete-button")
                .hide()
    };
</script>

EDIT: How to do this using the answer below

function someFunction(element) {
        $(element).hide();
        $(element).closest("td").find("span.item-save-button").show();
        $(element).closest("td").find("span.item-delete-button").hide();
    }

Ehsan Sajjad · Accepted Answer · 2014-05-30 14:39:19Z

3

you need to pass element reference like this:

<button type="button" onclick="someFunction(this)">Click ME</button>

and in function:

function someFunction(element) {

                $(element).hide();
                $(element).closest("td").find("span.item-save-button").show();
                $(element).show();
                $(element).closest("td").find("span.item-delete-button").hide();
                $(element).hide();
    }

edited May 30, 2014 at 14:39

answered May 30, 2014 at 14:33

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

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

11 Comments

Austin Over a year ago

ah nice! However I must have named things wrong. It hides the Edit button, but does not show the Save and does not hide the Delete

Austin Over a year ago

Hmmm doing the same thing still

Ehsan Sajjad Over a year ago

i mistakenly removed hide() while editing..:P so thats why it not worked

Austin Over a year ago

Well now it hides Edit, Shows Saves, but Delete is still visible hahaha

Miro Over a year ago

why don't you just add some more classes to save and delete like "editMode" and then just do $(element).('.editMode').show()

|

Collectives™ on Stack Overflow

button onClick to activate JQuery function

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related