Ajax無法在Codeigniter中的頁面中使用

Question

我在may header.php文件中具有以下腳本標記。 “>

<!-- Bootstrap Core Js -->
<script src="<?php echo  base_url('resource/temp/plugins/bootstrap/js/bootstrap.js'); ?>"></script>

<!-- Select Plugin Js -->
<script src="<?php echo  base_url('resource/temp/plugins/bootstrap-select/js/bootstrap-select.js'); ?>"></script>

<!-- Slimscroll Plugin Js -->
<script src="<?php echo  base_url('resource/temp/plugins/jquery-slimscroll/jquery.slimscroll.js'); ?>"></script>

<!-- Waves Effect Plugin Js -->
<script src="<?php echo  base_url('resource/temp/plugins/node-waves/waves.js'); ?>"></script>

<!-- Jquery CountTo Plugin Js -->
<script src="<?php echo  base_url('resource/temp/plugins/jquery-countto/jquery.countTo.js'); ?>"></script>
<!-- Custom Js -->
<script src="<?php echo  base_url('resource/temp/js/admin.js'); ?>"></script>

<!-- Demo Js -->
<script src="<?php echo  base_url('resource/temp/js/demo.js'); ?>"></script>

並且這些文件以及其他一些.js文件也再次加載到頁腳文件中。 對於所有文檔，我無法在我的頁面之一中調用ajax函數來填充選項列表。

當我單擊另一個選項選擇字段時，我想填充一個選擇選項列表。 但是它不起作用。 請幫忙。 我也嘗試更改最新的jquery.min.js文件。 模板中使用的min.js文件版本為1.12.4。

以下是我的使用ajax調用的頁面。

<div class="form-group form-float">
                             <div class="form-line">
                            <label>Union</label>
                                <select class="form-control union" name="gunion" id="union"  required >
                                <option value="">-- Please Select--</option>
                                    <?php
                                    foreach($union as $row)
                                    {
                                    ?>
                                    <option value="<?php echo $row->u_name;?>"><?php echo $row->u_name;?></option>
                                    <?php
                                    }
                                    ?>
                               </select>
                                 <span class="text-danger"> <?php echo form_error('tonque'); ?></span>     
                                 </div>

                                  <div class="form-line">
                            <label>Sakha</label>
                                <select class="form-control" name="gshaka" id="sakha" required>
                                <option value="">---Please Select--</option>

                               </select>
                                 <span class="text-danger"> <?php echo form_error('tonque'); ?></span>     
                                 </div>

和腳本：

         <script type="javascript">
  $(document).ready(function(){
   $('#union').on('change',function(){
    var unionID = $(this).val(); 
    console.log(unionID);
    if(unionID){
        $.ajax({
            type:'POST',
            url:'getsakha/'+unionID,
            cache:false,
            success:function(html){
                $('#sakha').html(html);
                    }
        }); 
        }else{
        $('#sakha').html('<option value="">Select Union first</option>');
 }
   });
 });
</script>

Answer 1

從type屬性的腳本標簽中刪除javascript

<script type="javascript">

在腳本標簽中添加type="text/javascript"

<script type="text/javascript">

或刪除type屬性

<script>

發生這種情況是因為沒有javascript type屬性，但是有text/javascript 。 如果您不寫type屬性，那么它將被視為javascript

希望對您有所幫助。

Answer 2

刪除重復的腳本文件，並將所有腳本文件加載到頁腳中。 或者您可以使用https://api.jquery.com/jquery.noconflict/