hash hash - 4 months ago 13
Ajax Question

How to call javascript function inside modal content?

I have two php page with bootstrap. In the first page I am calling a modal for inserting data of each employee. The second page contain the modal content and it call from first page via AJAX.

Here is my code.

Page 1:

<table data-toggle="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="company" data-sortable="true" data-align="center">Company Name</th>
<th data-field="owner" data-sortable="true" data-align="center">Owner Name</th>
<th data-field="contact" data-sortable="true" data-align="center">Contact No</th>
<th data-field="category" data-sortable="true" data-align="center">Category</th>
<th data-field="payment" data-sortable="true" data-align="center">Payment</th>
<th data-field="calendar" data-sortable="true" data-align="center">Calendar</th>
</tr>
</thead>
<tbody>
<?php
$sql_user="SELECT * from empployee order by id desc ";
$result_user=mysqli_query($con,$sql_user);
while($user=mysqli_fetch_array($result_user,MYSQLI_ASSOC))
{
?>
<tr>
<td><?php echo $user['company']; ?></td>
<td><?php echo $user['firstname']." ".$user['lastname']; ?></td>
<td><?php echo $user['mobile_number']; ?></td>
<td><?php echo $user['desig']; ?></td>
<td><?php echo $user['salary']; ?></td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target='<?php echo $id2;?>' value='<?php echo $user['company'];?>' onclick="add_lineup(this.value);"><i class="fa fa-pencil"></i>Add</button>
<div class="modal fade" id="<?php echo $im2;?>" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" id='<?php echo $edit;?>'>
</div>
</div>
</div></td></tr>
</tbody>
</table>


Page2:

<?php
session_start();
if(!isset($_SESSION['admin']))
{
header("location:../index.php");
}
include('../connection.php');
$details_id = $_REQUEST['details_id'];
$company_sql = mysqli_query($con,"SELECT * FROM task where id='$details_id'");
$data_company = mysqli_fetch_array($company_sql);
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Task Details</h4>
</div>
<input type="hidden" name="id" value="<?php echo $details_id ?>">
<div class="modal-body">
<table data-toggle="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar2" data-pagination="true" data-sort-name="name2" data-sort-order="desc">
<thead>
<tr>
<th data-field="name" data-sortable="true" >Item Name</th>
<th data-field="days" data-sortable="true" >Days</th>
<th data-field="Select" data-sortable="true">Select</th>
<th data-field="date" data-sortable="true">Delivery Date</th>
</tr>
</thead>
<tbody>
<?php
$search_task_items = "select * from task";
$run_search_task_items = mysqli_query($con, $search_task_items);
if(!$run_search_task_items)
{
die(mysqli_error($con));
}
while($get_task_items = mysqli_fetch_array($run_search_task_items))
{
?>
<tr>
<td><?php echo $get_task_items['item_name']; ?></td>
<td><?php echo $get_task_items['req_days']; ?></td>
<td><input type="checkbox" id="select[]" value="<?php echo $get_task_items['id']; ?>" onclick="test()"></td>
<td><input type="text" id="delivery_date" value=""></td></tr>
<?php
}
?>
</tbody>
</table>

<div class="modal-footer">
<button type="submit" class="btn btn-primary pull-right">Add Customer Line-up Items</button>
</div>
</form>


My question is I want to perform some javascript function on the second page when the check box will click. Remember the second page content will show by a modal using AJAX.

I hope my question is clear. If any further information required, I am ready to deliver but I want this answer.

Thank You.

Answer

If I understand it correctly, then you just need to add an onclick event on the checkbox

onclick="if ($('input.checkbox_check').is(':checked')) {  //call your function here }"

Or in case of multiple checkboxes just use "this" operator

onclick="if ($(this).is(':checked')) {  //call your function here }"