javascript functions stop working after writing another function in the same script

Im doing am employee leave management system. The approve and disapprove buttons were working fine in the beginning. But after writing the code to show employee details in the same modal, the approve and disapprove buttons stopped working. Now it gives error. Does anyone have an idea on whats wrong?

controller

//admin approve leave
public function approveLeave()

$id = $this->input->post('id');
$result = $this->Admin_Model->approve($id);

if(!$result)

// something went wrong

$data = array(
"value" => $id,
"error" => true,
"msg" => "something went wrong"
);

$this->output
->set_content_type('application/json')
->set_output(json_encode($data));

return;



// approved leave

$data = array(
"value" => $id,
"error" => false,
"msg" => "successfully updated"
);

$this->output
->set_content_type('application/json')
->set_output(json_encode($data));




modal

<!-- Modal -->
<div class="modal fade" id="pendingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Leave Request</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="leave_details" >
<p> </p>
</div>
<div class="modal-footer">
<input type="hidden" name="current_leave_id" id="current_leave_id" value="" />
<button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal">Decline</button>
<button type="button" id="approvebtn" class="btn btn-primary">Approve</button>
</div>
</div>
</div>
</div>


javascript

<script>

$(function()

var BASE_URL = "http://localhost/employeemgt/index.php/";


$('#pendingLeaveRequest').on('show.bs.modal', function(event)
var button = $(event.relatedTarget);
var current_leave_id = button.data('id');
var modal = $(this);

modal.find('input[name="current_leave_id"]').val(current_leave_id);
);



//approve button
$('#approvebtn').click(function()
var id = $('input[name="current_leave_id"]').val();
$.post(BASE_URL + 'admin/AdminDashboardController/approveLeave',
'id': id,
function(result)
console.log(result);
if(result.error)
alert('try again');
else
alert('Leave has been approved!');

);
);



//disapprove button
$('#declinebtn').click(function()
var id = $('input[name="current_leave_id"]').val();
$.post(BASE_URL + 'admin/AdminDashboardController/disapproveLeave',

'id': id,
function(result)
console.log(result);
if(result.error)
alert('try again');
else
alert('Leave has been disapproved!');

);
);

);



//show leave details on modal
$('.detailButton').on('click', function()
var BASE_URL = "http://localhost/employeemgt/index.php/";
var leave_id = $(this).val();
var i;
$.ajax(
type: 'POST',
dataType: "JSON",
data:leave_id:leave_id,
url: BASE_URL + 'admin/AdminDashboardController/viewRequest',

success:function(data)
console.log(data);
$('#leave_details').html("<p>" + "Name: " + data[0].user_name + "</p>" +
"<p>" + "Leave Type: " + data[0].leave_type + "</p>" +
"<p>" + "Start Date: " + data[0].leave_start + "</p>" +
"<p>" + "End Date: " + data[0].leave_end + "</p>");
$('#pendingLeaveRequest').modal('show');
,
error:function(error)
alert(error);
);
);


</script>


view

<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>
<?php
foreach ($leave as $row)
if($row->status != "1")

echo '
<ul class="list-unstyled">
<li class="media border-bottom border-top py-3">
<img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">'.$row->user_name.'</h5>
<p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p>
<p class="mt-0">'.$row->leave_type.'</p>
<button type="button" class="detailButton" href="<?php echo $id; ?>" data-id="'.$row->id.'" data-name="'.$row->user_name.'" data-toggle="modal" value="'.$row->id.'">View Request</button>
</div>
</li>
</ul>
';


?>
</div>


2 Answers
2

Use

$(document).on('click','#declinebtn',function()) instead of $('#declinebtn').click(function()) .

$(document).on('click','#declinebtn',function())

$('#declinebtn').click(function())

change your view code like this :

<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>
<?php
foreach ($leave as $row)
if($row->status != 1)

?>

<ul class="list-unstyled">
<li class="media border-bottom border-top py-3">
<img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1"><?= $row->user_name ?></h5>
<p class="mb-0 mt-0"> <?= $row->leave_start.' to '.$row->leave_end ?></p>
<p class="mt-0"><?= $row->leave_type ?></p>
<button type="button" class="detailButton" href="<?php echo $row->id; ?>" data-id="<?= $row->id ?>" data-name="<?= $row->user_name ?>" data-toggle="modal" value="<?= $row->id ?>">View Request</button>
</div>
</li>
</ul>
<?php


?>


By this I think your problem will be solve

Try this.
$(document).on("click", "#approvebtn", function(event)
// your code here
);
And you can also try triggering your btn from browser console to check if it works.

$(document).on("click", "#approvebtn", function(event)
// your code here
);

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.