如何使用jquery和codeigniter

时间:2016-03-16 08:51:29

标签: javascript jquery ajax codeigniter foreach

这是我的代码:

<section class="panel">
    <header class="panel-heading">
        <a data-toggle="modal" data-target="#modal_edit" onclick="modal_edit('<?php echo base_url() ?>leave/save')"   class="btn btn-default pull-right" href=""><i class="fa fa-calendar-minus-o"></i>&nbsp;Add Leave</a>
      <!--  <a class="btn btn-default pull-right" href="<?php echo base_url() ?>leave/apply_leave"><i class="fa fa-calendar-minus-o"></i>&nbsp;Appsssly Leave</a>   -->
        <h2 class="panel-title">Employee Leave History</h2>
    </header>
    <div class="panel-body">
        <table class="table table-bordered table-striped mb-none" id="datatable-tabletools" data-swf-path="assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Employee Name</th>
                    <th>Leave Type </th>
                    <th>Subject</th>
                    <th class="hidden-phone">From date - To date</th>
                    <th class="hidden-phone">Reason</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <?php $count = 1 ?>
                <?php foreach ($leave as $leave): ?>
                    <tr class="gradeX">
                        <td><?php echo $count++ ?></td>
                        <td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?>
                            <input type="button" id="employee_id" value="<?php echo $leave->employee_id ?>"/> 
                        </td>
                        <td><?php echo $leave->name ?></td>
                        <td><?php echo $leave->subject ?></td>
                        <td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td>
                        <td><?php echo $leave->reason ?></td>
                        <td>
                            <select  id="status" data-plugin-selectTwo class="form-control populate placeholder" >
                                <option value="Pending">Pending</option>
                                <option value="Granted">Granted</option>
                                <option value="Rejected">Rejected</option>
                            </select>
  
                        </td>
                    </tr>
                <?php endforeach; ?>
              <!--  //onchange="update_status('<?php echo base_url().'status/leave/'.$employee_id ?>')"  onchange="myFunction();" -->
                
            </tbody>
        </table>
    </div>
    <div>

    </div>

</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#status").ready(function () {
        $(this).change(function () {
            //var y =$('#status').val();
            //alert($('#status option:selected').val() );
           //alert($("#status").select());
       // var x = $('#employee_id').val();
       // alert(this.x)    
        console.log(1);
            $.ajax({
               url   :'<?php echo base_url() ?>leave/status',
               data  : {
                         status : $(this).val(),
                        employee_id : $('#employee_id').val(),
                        // name : $('#name').val(),
                      },
               dataType: 'json',
               success : function(response) {
                   alert(response);
                   
               }
              
            });
        });

    });

</script>

我有foreach循环,并且有一个包含值的下拉列表。如果我有4个循环,那么我想只更新第一个循环的叶子,意味着id = 1,使用ajax它完美地工作。

现在我想更新id = 2但是问题是,jquery没有得到id = 2值,它选择第一个id值表示id =1。 现在我想更新id = 2以更新他们的请假。

1 个答案:

答案 0 :(得分:0)

您不能多次使用相同的ID。 首先更改你的HTML

<?php foreach ($leave as $leave): ?>
<tr class="gradeX">
    <td><?php echo $count++ ?></td>
    <td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?>
        <input type="button" class="employee_id" value="<?php echo $leave->employee_id ?>"/> 
    </td>
    <td><?php echo $leave->name ?></td>
    <td><?php echo $leave->subject ?></td>
    <td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td>
    <td><?php echo $leave->reason ?></td>
    <td>
        <select  id="<?php echo $leave->employee_id ?>" class="status" data-plugin-selectTwo class="form-control populate placeholder" >
            <option value="Pending">Pending</option>
            <option value="Granted">Granted</option>
            <option value="Rejected">Rejected</option>
        </select>

    </td>
</tr>
<?php endforeach; ?>

在Javascript中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".status").change(function () {
            var employee_id = $(this).prop('id');  
            var status = $(this).val();
            $.ajax({
               url   :'<?php echo base_url() ?>leave/status',
               data  : {'status' : status, 'employee_id' : employee_id},
               dataType: 'json',
               success : function(response) {
                   alert(response);

               }
            });
        });
    });

</script>

我希望这能解决你的问题。