show hide button jquery with dynamic values - php

Question

i have this code in index.php:
<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'] ?>" 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'] ?>" data-action="deactivate">
<span class = "glyphicon glyphicon-folder-close"></span> deactivate
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<form action="create.php" method="post" class="form-inline">
<div class = "form-group">
<label>Segment:</label>
<input type = "text" name = "segment" class = "form-control" required = "required"/>
</div>
<div class = "form-group">
<button type="submit" name = "save" class = "btn btn-primary"><span class = "glyphicon glyphicon-plus"></span> Add</button>
</div>
</form>
<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>$(".activate-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});</script>
</body>
the problem is when i click on any activate button all deactivate button show up and the activate doesnt disappear,
i mean in any when i click activate the deactivate sho up in every other td and when i click deactivate again the activate button doesnt show up, any help?

Answer 1

You may want to change
$(".activate-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});
into:
$(".action-btn").click(function(){$(this).hide();$(".deactivate-btn").show();});
$(".deactivate-btn").click(function(){$(this).show();$(".action-btn").show();});

Answer 2

Having 2 buttons is abit confusing to the end user since they wont know which segment is active and which segment is deactivated. From your code,all the buttons are shown when the page loads initially. An alternative would be:
if($fetch['status']=="active"){
<button class="btn-danger statusbtn" data-action="deactivate"
id="<?=$fetch['id']?>">
<span class="glyphicon glyphicon-folder-close"></span>
Deactivate
</button>
}else{
<button class="btn-success statusbtn" data-action="activate"
id="<?=$fetch['id']?>">
<span class="glyphicon glyphicon-ok"></span>
Activate
</button>
}
Then edit your javascript to read:
<script type="text/javascript">
$(".action-btn").on("click", function(e) {
var id = $(this).attr("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) {
if(action=='activate'){
$(this).html("
<span class='glyphicon glyphicon-folder-close'>
</span>
Deactivate");
$(this).attr('data-action',"deactivate");
$(this).removeClass('btn-success')
$(this).addClass('btn-danger');
}else{
$(this).html("
<span class='glyphicon glyphicon-ok'>
</span>
activate");
$(this).attr('data-action',"activate");
$(this).removeClass('btn-danger')
$(this).addClass('btn-success');
}
alert(data);
}
});
});
</script>
I haven't run the code to test it for errors but i think this will solve your problem.