change button after clicking in ajax form

Question

i have this code in index.php :

<table   class = "table table-bordered table-responsive ">
    <thead>
        <tr>
            <th>Segment</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($data as $fetch): ?>
            <tr>
    <input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id']?>">
                <td class="segment" contenteditable="true"><?= $fetch['segment'] ?></td>
                <td class="text-center">
                    <button class = "btn btn-default action-btn" data-id="<?= $fetch['id'] ?>" data-action="update"> 
                        <span class = "glyphicon glyphicon-edit"></span> Update
                    </button> 
                    | 

                   <button class = "btn btn-success activate-btn action-btn" data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" type="submit" data-action="activate">
                    <span class = "glyphicon glyphicon-check"></span> Activate
                </button> 

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" data-action="deactivate">
                    <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                </button>
                </td>
            </tr>
        <?php endforeach; ?>

    </tbody>
</table>

all i want is:

if segment is activated to show deactivate button and if is already deactivated show activate button

this is the ajax call:

<script type="text/javascript">
  $(".action-btn").on("click", function(e) {
    var id = $(this).attr("data-id");
    var segment = $(this).parents("tr").find("td.segment").html();
    var action = $(this).attr("data-action");
    $.ajax({
      "url": "action.php",
      "method": "post",
      "data": {
        "id": id,
        "segment": segment,
        "action": action
      },
      success: function(data) {
        alert(data);
      }
    });
  });
</script>

<script>
  $(document).on("click",".activate-btn", function() {  
    var id = $(this).attr("data-id");
    var segment = $(this).parents("tr").find("td.segment").html();
    var action = $(this).attr("data-action");
    $(this).hide();  $("#"+id).show();  $("#"+id,".deactivate-btn").show();
    console.log();
  });
  $(document).on("click",".deactivate-btn", function() {
    $(this).show();
    $("#"+id).show();
    $("#"+id,".activate-btn").show();
  });
</script>

now all the page is showing the activate button even its activated already plus if it never change to deactivate after clicking please help thank u

In the `deactivate-btn` click function, where do you think get the `id` from? — Carsten Løvbo Andersen, May 19 '17 at 06:22
from var id? am i right please if you have the solution can write me the code? thank u @CarstenLøvboAndersen — adamspaul, May 19 '17 at 06:24
Well your `var id` is inside another click function, so since it's not global it can't be called like that from another click function — Carsten Løvbo Andersen, May 19 '17 at 06:25
all i want to know how it works please help me, thank u @CarstenLøvboAndersen — adamspaul, May 19 '17 at 06:26

score 0 · Answer 1 · answered May 19 '17 at 06:33

0

// check if button is disabled
if($(this).attr("disabled") == "disabled"){
    $(this).removeAttr("disabled")
}
else{
    $(this).attr("disabled","disabled")
}

answered May 19 '17 at 06:33

Gagan Bhatia

1
3

score 0 · Answer 2 · edited May 23 '17 at 11:33

It seems that

<button ... id="<?= $fetch['id'] ?>"...Activate</button>

<button ... id="<?= $fetch['id'] ?>" ... deactivate</button>

is the problem. The id value has to be unique, which in this case it is not. HTML will not complain about it and javascript apparently does not complain about it either, it will just fail.

What I usually do in a similar case is to just prefix the id values. Something like this for example

<button ... id="activate<?= $fetch['id'] ?>"...Activate</button>

<button ... id="deactivate<?= $fetch['id'] ?>" ... deactivate</button>

As a side note, use of the short tag is generally discoraged.

score 0 · Answer 3 · answered May 19 '17 at 06:39

0

id must be unique. You are repeating id="" in activate and deactivate button.

answered May 19 '17 at 06:39

sanil gurung

41
4

score 0 · Answer 4 · answered May 19 '17 at 06:43

You got too much same id and that is causing the problem.Also you can remove the class name show functions because that will cause all buttons to show and that is not desirable if you want a toggle functionality.

Below I have included a code portion showing the same, taking 2 rows and different ids.

$(document).on("click",".activate-btn", function() {  
    var id = $(this).attr("data-id");
    $(this).hide();
    $("#"+id+"-deactivate").show();
    
  });
  $(document).on("click",".deactivate-btn", function() {
    $(this).show();
    $("#"+id+"-activate",".activate-btn").show();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table   class = "table table-bordered table-responsive ">
    <thead>
        <tr>
            <th>Segment</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        
            <tr>
    <input type="hidden" name="user_id" value="user_id">
                <td class="segment" contenteditable="true">segment1</td>
                <td class="text-center">
                    <button class = "btn btn-default action-btn" data-id="id1" data-action="update"> 
                        <span class = "glyphicon glyphicon-edit"></span> Update
                    </button> 
                    | 

                   <button class = "btn btn-success activate-btn action-btn" data-id="id1" id="id1-activate" type="submit" data-action="activate">
                    <span class = "glyphicon glyphicon-check"></span> Activate
                </button> 

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="id1" id="id1-deactivate" data-action="deactivate">
                    <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                </button>
                </td>
            </tr>
        
        <tr>
    <input type="hidden" name="user_id" value="user_id">
                <td class="segment" contenteditable="true">segment2</td>
                <td class="text-center">
                    <button class = "btn btn-default action-btn" data-id="id2-update" data-action="update"> 
                        <span class = "glyphicon glyphicon-edit"></span> Update
                    </button> 
                    | 

                   <button class = "btn btn-success activate-btn action-btn" data-id="id2" id="id2-activate" type="submit" data-action="activate">
                    <span class = "glyphicon glyphicon-check"></span> Activate
                </button> 

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="id2" id="id2-deactivate" data-action="deactivate">
                    <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                </button>
                </td>
            </tr>

    </tbody>
</table>

change button after clicking in ajax form

4 Answers4