多个On选择更改Ajax Laravel

时间:2016-12-21 08:52:12

标签: php ajax laravel

我在Laravel 5.2上工作,我在员工身上使用foreach循环生成一个表,其中列出了这样的员工:

ID Name Team Category
1  toto t1   select
2  tata t1   select
3  titi t2   select

使用“选择”输入类型选择可用类别列表。 当我在选择中更改类别时,我想在我的表“category_relation”中插入一个新行,其中包含员工的ID和所选的类别。

我的问题是:当选择更改时,如何在ajax中获取正确的ID和类别并将它们发送到我的控制器中的函数存储区?

全部谢谢

编辑:我试过这个:

$(document).ready(function() {
    $(".selectCategory").change(function(){
        $.ajax({
            method: 'POST', 
            url: '/employee/changecateg', 
            data: {'id' : $('input.employee_id').val(), 'categ' : $('select.selectCategory').val()}, 
            success: function(response){ 
                console.log(response); 
            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    })
});

我的员工列出:

{!! Form::open(['method' => 'post', 'url' => action('AffectAbcController@store')]) !!}
    <div class="table-responsive">
        <table class="table table-striped m-b-none datatable">
            <thead>
            <tr>
                <th class="no-sort">Photo</th>
                <th>Entrée</th>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Site</th>
                <th>Pôle</th>
                <th>Equipe</th>    
                <th class="no-sort">Tél interne</th>
                <th>Affecter catégorie</th> 
            </tr>
            </thead>
            <tbody>

            @foreach ($personnels as $personnel)
            <?php $i++ ?>
                <tr>
                    <td>{{ $personnel->PERSO_ETAT}}</td>
                    <td>{{ $personnel->PERSO_DATE_ENTREE }}</td>
                    <td>{{ $personnel->PERSO_NOM_USAGE}}</td>
                    <td>{{ $personnel->PERSO_PRENOM }} </td>
                    <td>{{ $personnel->site["SITE_LIBELLE"]}}</td>
                    <td>{{ $personnel->pole["POLE_LIBELLE"]}}</td>
                    <td>{{ $personnel->equipe["EQUIPE_LIBELLE"]}}</td>
                    <td>{{ $personnel->PERSO_TELEPHONE}}</td>
                    <td> 
                        <input type="hidden" class="employee_id" name="HISTO_AFFECT_ID_PERSONNEL" value="{{$personnel->PERSO_ID_PERSONNEL}}"/>
                        <select class="form-input selectCategory" name="HISTO_AFFECT_ID_CATEG">
                            <option value="0"></option>
                            @foreach ($categories as $category)
                                @if(isset($personnel->lastAbc[0]))
                                    @if($personnel->lastAbc[0]["HISTO_AFFECT_ID_CATEG"]==$category->CATEG_ID_ABC)
                                        <option value='{{$category->CATEG_ID_ABC}}' selected="selected">{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                    @else
                                        <option value='{{$category->CATEG_ID_ABC}}'>{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                    @endif
                                @else
                                    <option value='{{$category->CATEG_ID_ABC}}'>{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                @endif
                            @endforeach
                        </select>

                    </td>
                </tr>

            @endforeach
            </tbody>
        </table>
    </div>

    </form>

问题是所有选择都有相同的类,所以当我得到它时,我经常有第一个选择值,即使我改变了另一个。

2 个答案:

答案 0 :(得分:1)

更改

data: {'id' : $('input.employee_id').val(), 'categ' : $('select.selectCategory').val()},

data: {'id' : $(this).siblings('input.employee_id').val(), 'categ' : $(this).val()},

$(this)是上下文中的当前元素(因为它是select元素的更改,然后this是更改的select元素)。因此,我们可以使用它来获取当前元素的选定值,以及最近的员工ID框的值(使用.siblings())。

答案 1 :(得分:0)

据我所知,您无法获得正确的隐藏输入值和正确的选择框值。

你只需要改变你的JS。

在选择更改事件中创建一个变量。

var $td = $(this).parent();

然后在Ajax中:

data: {
    'id' : $td.find('input.employee_id').val(), 
    'categ' : $td.find('select.selectCategory').val()
},

希望这有帮助。