I am trying to delete a button on click from a layout itself . but unable to do it so far . I am new to ajax and jQuery . I have a div on web page showing pending actions in the form of buttons now I want to remove each button when user clicks on it. this web page is auto refreshed in every 1 minute and all these pending actions are stored in a session variable .
now I am not getting a way to send this button id to another php script so that it can delete it from session array.
I tried following ..
<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
function HideButton(butId)
{
$('#'+butId).hide();
deleteButton(butId);
}
</script>
<script>
function deleteButton(id) {
$.ajax({
url: "delete_button.php",
type: "POST",
data: "id=" + id,
success: function(response) {// Response handler}
});
}
</script>
<?php // here is my php code ..
//displaying button as follows in a loop
echo "<br><button type='button' id='".$id."' onclick=javascript:HideButton('".$id."') >".$pendingAction[$id]." </button>";
did not found any success yet.
use the jQuery remove
DOM:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
jQuery:
$( ".hello" ).remove();
Output:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
You can do that by following;
HTML:
<div>
<input type="button" name="button1" id="button1" value="Button 1"/>
<input type="button" name="button2" id="button2" value="Button 2"/>
</div>
JS:
$("input[type='button']").on("click", function() {
var btnId = $(this).attr("id");
$(this).remove();
// Uncomment below to activate ajax call
//deleteButton(btnId);
})
function deleteButton(id) {
$.ajax({
url: "delete_button.php",
type: "POST",
data: "id=" + id,
success: function(response) {// Response handler}
});
}
PHP(delete_button.php):
<?php
var btnId = $_POST["id"];
// delete from session by using $btnId
You can use the jQuery remove action$('.removeButton').live(function () { $(this).remove();
});
Or you can also just hide the button when it is click
$('.removeButton').live(function () { $(this).hide();
});