CODEWITHSUNDEEP
jqueryasp.net-mvc
Alexander
Alexander

Reputation: 691

Hide/show buttons in the table on button click

I'm new in web and need your help. I have such table:

<table class="table" id="requestTable">
    <thead>
        <tr>
            <th>
                Start Date
            </th>
            <th>
                End Date
            </th>
            <th>
                Approved
            </th>
            <th>
                Employee
            </th>      
            <th>
                Position
            </th>                  
            <th class="no-sort">

            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.DateStart.ToShortDateString()
                </td>
                <td>
                    @item.DateEnd.ToShortDateString()
                </td>
                <td data-name="@item.Id">
                    @item.Approved.ToString()
                </td>                
                <td>
                    @item.FirstName.ToString() @item.LastName.ToString()
                </td>
                <td>
                    @item.Position.ToString()
                </td>

                 <td>                    
                        <button class="btn btn-primary accept-button" data-id="@item.Id">Accept </button>                  

                        <button class="btn btn-danger decline-button" data-id="@item.Id">Decline</button>                                                         
                </td>
            </tr>
        }
    </tbody>
</table>

And I have JQuery script for this .cshtml page:

$(document).ready(function () {

   // $('td[data-approved==True]').nextAll('td').find('button.accept-button').hide();
    //$('td[data-name="' + "True" + '"]').find('button.accept-button').hide();
    //$('td[data-approved!=True]').nextAll('td').find('button.decline-button').hide();    
    $('#requestTable').DataTable(
        {
            aoColumns: [
            { mDataProp: "DateStart", sTitle: "Date Start" },
            { mDataProp: "DateEnd", sTitle: "Date End" },
            { mDataProp: "Approved", sTitle: "Approved" },
            { mDataProp: "Data", sTitle: "Employee" },
            { mDataProp: "Position", sTitle: "Position" },
            { mDataProp: "", sTitle: "" }
            ],
            columnDefs: [{
                targets: 'no-sort',
                orderable: false
            }]
        });

    $('button.accept-button').click(function () {
        var id = $(this).attr('data-id')
        var appr = $('td[data-name="' + id + '"]');
        appr[0].textContent = "True";
        $.ajax({
            type: "POST",
            url: "/TableRequest/AcceptRequest",
            data: { 'id': id },
            success: function (msg) {
            }
        });
        $(this).hide();
    });
    var tempId;
    $('button.decline-button').click(function () {
        tempId = $(this).attr('data-id')
        $("#dialog").dialog()
        var appr = $('td[data-name="' + tempId + '"]');
        appr[0].textContent = "False";
        $(this).hide();
    });
    $('button.ok-request').click(function () {
        var message = $('textarea#commentForDecline').val();        
        $.ajax({
            type: "POST",
            url: "/TableRequest/DeclineRequest",
            data: { 'message': message, 'id': tempId },
            success: function (msg) {
            }
        });   
        $("#dialog").dialog('close');
        $('textarea#commentForDecline').val('');        
    });
});

Value Approved in the table can be true or false. As you can see I have two buttons in my table: Accept button and Decline button for each row. I need:

Upvotes: 2

Views: 2600

Answers (3)

Tech Savant
Tech Savant

Reputation: 3766

Here you go, rather simple to code, don't need two click events...

Simplified the HTML so I could test it in Fiddle, but you should be able to get the idea...

I simplified the html in the Fiddle and also left out parts like the ajax that I'm sure you can figure out on your own.

Click for Fiddle JS FIDDLE

       <td>                    
           <button class="btn btn-primary accept-button" data-id="5">Accept </button>                                                                            
       </td>

       <td>                    
           <button class="btn btn-primary accept-button" data-id="10">Accept </button>                                                                           
       </td>                

       <td>                    
           <button class="btn btn-primary accept-button" data-id="15">Accept </button>                                                                             
       </td>



   (function($){

    $(function(){  //document.ready


        $.each($('button.accept-button'), function(i,v) {


           //run your checks and set the button to decline if need be...
            var thisid = $(this).data('id');
            if (thisid == '10') {

                  $(this).html('Decline');
                  $(this).addClass('decline');
            }
        });

        $('button').on('click', function() {

            if ($(this).hasClass('decline')) {
               $(this).removeClass('decline');
               $(this).html('Accept');
            } else {
               $(this).addClass('decline');
               $(this).html('Decline');
            }



        });

  });

    })(jQuery);

Upvotes: 1

Puneet
Puneet

Reputation: 2051

1) When page was load, if Approved == false show accept button for this row and hide decline, else - show decline button and hide accept button.

 <td>                    
<button class="btn btn-primary accept-button" data-id="@item.Id" style='@Html.Raw(item.Approved == False?"":"display:none")'>Accept </button>                  
<button class="btn btn-danger decline-button" data-id="@item.Id" style='@Html.Raw(item.Approved == False?"display:none":"")'>Decline</button>                                                         
 </td>

2) On accept button click I need to hide accept button and show decline button for this row only. On decline button click, I need to hide decline button and show accept button for this row only. May anyone help me? I know that it simple, but, to my shame, can't do this .

 $('button.accept-button').click(function () {
        var id = $(this).attr('data-id')
        var appr = $('td[data-name="' + id + '"]');
        appr[0].textContent = "True";
        $.ajax({
            type: "POST",
            url: "/TableRequest/AcceptRequest",
            data: { 'id': id },
            success: function (msg) {
            }
        });
        $(this).hide();
        **//ADD THIS TO SHOW DECLINE BUTTON**
        $(this).parent().find('button.decline-button').show();
    });


 $('button.decline-button').click(function () {
        tempId = $(this).attr('data-id')
        $("#dialog").dialog()
        var appr = $('td[data-name="' + tempId + '"]');
        appr[0].textContent = "False";
        $(this).hide();
        **// ADD THIS TO SHOW ACCEPT BUTTON**
        $(this).parent().find('button.accept-button').show();
    });

Upvotes: 3

user3559349
user3559349

Reputation:

For the initial button display, wrap then in an if block and a style="display:none"

<td>
  @if(item.Approved)
  {                 
    <button class="btn btn-primary accept-button" data-id="@item.Id" style="display:none">Accept </button>                  
    <button class="btn btn-danger decline-button" data-id="@item.Id">Decline</button>
  }
  else
  {
    <button class="btn btn-primary accept-button" data-id="@item.Id">Accept </button>                  
    <button class="btn btn-danger decline-button" data-id="@item.Id" style="display:none">Decline</button>
  }                                                     
</td>

and to toggle the visbility

$('button.accept-button').click(function () {
  ....
  $(this).hide();
  $(this).closest('td').children('button').last().show();
});

$('button.decline-button').click(function () {
  ....
  $(this).hide();
  $(this).closest('td').children('button').first().show();
});

Side notes:

  1. It should be tempId = $(this).data('id') not tempId = $(this).attr('data-id')
  2. Its not clear why you would need <td data-name="@item.Id"> or var appr = $('td[data-name="' + tempId + '"]'); since you know the value because you clicked on the respective button (in the 'decline' button, the value must already be true' and vice versa)

Upvotes: 2

Related Questions