Multi tool use

Onclick function not working with custom popup

I have created custom popup to show my records.

I am using CodeIgniter, I am fetching records from database and display on the view page which is working.

Now I have records in the view page like this

EmpName EMPID Mobile No. Status Action

xyz 122 0012141010 Pending view archive

mnb 123 0124541021 Pending view archive

poiu 124 0000000000 Approved view archive


What I am doing is, When user click on " pending" then it will ask for confirmation popup "Are you sure want to continue?" If the user clicks on "Later" button then the popup will close. It will not take any action. There is no issue till now.

" pending"

"Are you sure want to continue?"

"Later"

Now let's talk about Sure button. Sure button not taking any action. I don't understand why it's not calling the submit action. Even it's not working on the archive.

Sure

Note: I don't want to use confirm() or any alert() popup

confirm()

alert()

View page

<div class="white_bg pad0 m_b_20">
<div class="emp_list">
<div class=" ">
<?php if (!empty($get_emp_records)) {?>
<table cellspacing="0" id="tableData">
<thead>
<tr>
<th class="" width="3%"> <input type="checkbox" id="selectall" />
</th>
<th class="" width="15%"> EmpName </th>
<th class="" width="7%"> EMP ID</th>
<th class="" width="11%"> Mobile No. </th>
<th class="" width="13%"> Status </th>
<th class="" width="23%"> Action </th>
</tr>
</thead>
<?php
foreach ($get_emp_records as $row)
{ $encryption_id=base64_encode($this->encryption->encrypt($row->id));//encrpt the id
?>
<tbody>
<tr>
<td width="3%"><input type="checkbox" name="crm" class="crm_select" value="0" /></td>
<td>
<?php echo $row->firstname; echo $row->lastname;?>
</td>
<td>
<?php echo $row->employee_id;?>
</td>
<td>
<?php echo $row->mobileno;?>
</td>
<?php if ($row->is_approved == 1): ?>
<td><a href="javascript:void(0)" class="table_icon approved">Approved</a></td>
<?php else: ?>
<td>
<a href="javascript:void(0)" class="table_icon pending" onclick="approve(this)" data-id="<?=$row->id;?>"> <span>Pending</span></a>
</td>
<?php endif; ?>
<td><a href="<?php echo site_url('Employee_control/get_employee_view?key='.$encryption_id)?>" class="table_icon view">View</a>

<a href="<?php echo site_url('Employee_control/employee_archive?key='.$encryption_id)?>" class="table_icon archive">Archive</a>
</td>
</tr>
<!--conformation popup-->
<div class="confirmation_alert" id="popup-<?=$row->id;?>" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
<a href="javascript:void(0);" class="close_popup " onclick="closePopup(this)" data-id="<?=$row->id;?>"> x </a>
<div class="profile_name_pic"> Confirmation!!! </div>
<div class="profile_header_right">
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<h3>Are you sure want to continue?</h3>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
</div>
</div>
</tbody>
<?php } ?>
</table>
<?php }else{echo "No record found";}?>
</div>
</div>
</div>


Script

var url = "<?php echo base_url();?>";

function approve(obj) {
var id = $(obj).data('id');
$("#popup-" + id).show();
var el = document.getElementById("confirm");
if (el.addEventListener) {
el.addEventListener("click", function() {
//alert("clicked");
window.location = url + "Employee_control/approved_user?key=" + id;
});
}
return false;
}

function closePopup(obj) {
var id = $(obj).data('id');
$("#popup-" + id).hide();
};


3 Answers
3

Hope this will help you :

Since your r not submitting any form you should change your button type from submit to button like this :

submit

button

<div class="profile_footer clearfix">
<button type="button" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>


Your js code should be like this :

var url="<?php echo base_url();?>";
function approve(obj)
{
var id = $(obj).data('id');
$("#popup-"+id).show();
$('.submit_btn').on('click',function(e) {
alert('hi i am working');
window.location = url+"Employee_control/approved_user?key="+id;
e.preventDefault();
});
}
</script>


$(document).ready(function(){
var modalConfirm = function(callback){
$(".btn-confirm").on("click", function(){
$("#mi-modal").modal('show');
});
$("#modal-btn-si").on("click", function(){
callback(true);
$("#mi-modal").modal('hide');
});

$("#modal-btn-no").on("click", function(){
callback(false);
$("#mi-modal").modal('hide');
});
};
modalConfirm(function(confirm){
if(confirm){
alert('delete works fine');
}
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type='button' value="delete" class="btn btn-danger btn-confirm">

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Do you want to delete?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" id="modal-btn-si"><i class="icon-ok icon-white"></i> Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no"><i class="icon-ban-circle icon-white"></i> No</button>
</div>
</div>
</div>
</div>

Hope it will work, try adding click event on idof submit

id

try using

$('#confirm').click(function()
{
// do tricks
});


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.