没有发送Ajax请求,错误的选择器?

时间:2017-05-17 22:55:02

标签: javascript jquery ajax

编辑:讨论帮助我理解问题来自剧本之外......大家都在寻求帮助!

问题:当我点击四组评级星中的一组时,只有"知识"一个人被送了。我得到警报'知识'并达到控制器功能rateKnowledge。 为了让其他3个评级小组工作,他们缺少什么? 我花了好几个小时搜索,但我在javascript中太糟糕了... 我应该用不同的方式写出来吗?

HTML:

<div class="container">

    <div class="row">

        <div class="col-xs-12" id="content">

            <div class="">
                <h2>Evaluate me</h2>
                <div class="hidden" id="content_type">{{$content_type}}</div>
                <div class="hidden" id="id">{{$id}}</div>
                <div class="row">
                    <div class="col-xs-3">
                        <h3>SAVOIR</h3>
                        {!! Form::open(['method' => 'POST', 'action' => ['\Modules\Course\Http\Controllers\Rating\RatingController@rateKnowledge']]) !!}
                        <fieldset class="rating">
                            <input class="rating-star" type="radio" id="star5" name="rating_knowledge" value="5"/>
                            <label class="full" for="star5" title="Awesome - 5 stars"></label>

                            <input class="rating-star" type="radio" id="star4" name="rating_knowledge" value="4"/>
                            <label class="full" for="star4" title="Pretty good - 4 stars"></label>

                            <input class="rating-star" type="radio" id="star3" name="rating_knowledge" value="3"/>
                            <label class="full" for="star3" title="Good - 3 stars"></label>

                            <input class="rating-star" type="radio" id="star2" name="rating_knowledge" value="2"/>
                            <label class="full" for="star2" title="Could be better - 2 stars"></label>

                            <input class="rating-star" type="radio" id="star1" name="rating_knowledge" value="1"/>
                            <label class="full" for="star1" title="Disappointing - 1 star"></label>
                        </fieldset>
                        {!! Form::close() !!}
                        <br>
                        <br>
                    </div>
                    <div class="col-xs-3">
                        <h3>PEDAGOGIE</h3>
                        {!! Form::open(['method' => 'POST', 'action' => ['\Modules\Course\Http\Controllers\Rating\RatingController@ratePedagogics']]) !!}
                        <fieldset class="rating">
                            <input class="rating-star" type="radio" id="star5" name="rating_pedagogics" value="5"/>
                            <label class="full" for="star5" title="Awesome - 5 stars"></label>

                            <input class="rating-star" type="radio" id="star4" name="rating_pedagogics" value="4"/>
                            <label class="full" for="star4" title="Pretty good - 4 stars"></label>

                            <input class="rating-star" type="radio" id="star3" name="rating_pedagogics" value="3"/>
                            <label class="full" for="star3" title="Good - 3 stars"></label>

                            <input class="rating-star" type="radio" id="star2" name="rating_pedagogics" value="2"/>
                            <label class="full" for="star2" title="Could be better - 2 stars"></label>

                            <input class="rating-star" type="radio" id="star1" name="rating_pedagogics" value="1"/>
                            <label class="full" for="star1" title="Disappointing - 1 star"></label>
                        </fieldset>
                        {!! Form::close() !!}
                        <br>
                        <br>
                    </div>
                    <div class="col-xs-3">
                        <h3>SYMPATHIE</h3>
                        {!! Form::open(['method' => 'POST', 'action' => ['\Modules\Course\Http\Controllers\Rating\RatingController@rateNiceness']]) !!}
                        <fieldset class="rating">
                            <input class="rating-star" type="radio" id="star5" name="rating_niceness" value="5"/>
                            <label class="full" for="star5" title="Awesome - 5 stars"></label>

                            <input class="rating-star" type="radio" id="star4" name="rating_niceness" value="4"/>
                            <label class="full" for="star4" title="Pretty good - 4 stars"></label>

                            <input class="rating-star" type="radio" id="star3" name="rating_niceness" value="3"/>
                            <label class="full" for="star3" title="Good - 3 stars"></label>

                            <input class="rating-star" type="radio" id="star2" name="rating_niceness" value="2"/>
                            <label class="full" for="star2" title="Could be better - 2 stars"></label>

                            <input class="rating-star" type="radio" id="star1" name="rating_niceness" value="1"/>
                            <label class="full" for="star1" title="Disappointing - 1 star"></label>
                        </fieldset>
                        {!! Form::close() !!}
                        <br>
                        <br>
                    </div>
                    <div class="col-xs-3">
                        <h3>ORGANISATION</h3>
                        {!! Form::open(['method' => 'POST', 'action' => ['\Modules\Course\Http\Controllers\Rating\RatingController@rateOrganization']]) !!}
                        <fieldset class="rating">
                            <input class="rating-star" type="radio" id="star5" name="rating_organization" value="5"/>
                            <label class="full" for="star5" title="Awesome - 5 stars"></label>

                            <input class="rating-star" type="radio" id="star4" name="rating_organization" value="4"/>
                            <label class="full" for="star4" title="Pretty good - 4 stars"></label>

                            <input class="rating-star" type="radio" id="star3" name="rating_organization" value="3"/>
                            <label class="full" for="star3" title="Good - 3 stars"></label>

                            <input class="rating-star" type="radio" id="star2" name="rating_organization" value="2"/>
                            <label class="full" for="star2" title="Could be better - 2 stars"></label>

                            <input class="rating-star" type="radio" id="star1" name="rating_organization" value="1"/>
                            <label class="full" for="star1" title="Disappointing - 1 star"></label>
                        </fieldset>
                        {!! Form::close() !!}
                        <br>
                        <br>
                    </div>
                    <div class="col-xs-12">
                        <h3>Bannir</h3>
                        {!! Form::open(['method' => 'POST', 'action' => ['\Modules\Course\Http\Controllers\Rating\RatingController@ban']]) !!}
                        {{--<fieldset class="" id="ban">--}}
                        <span class="glyphicon glyphicon-ban-circle" aria-hidden="true">
                        <input class="" type="radio" id="ban" name="ban" value="true"/></span>
                        <label class="full" for="ban" title="Ban">Ce contenu n'a pas sa place ici (spam, contenu inapproprié)</label>
                        {{--</fieldset>--}}
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

JAVASCRIPT:

<script defer data-turbolinks-eval="false">
    document.addEventListener("turbolinks:load", function() {
        jQuery = window.jQuery;
        jQuery(document).ready(function() {
            var content_type = jQuery("#content_type").html();
            var id = jQuery("#id").html();

            function ajaxRequest(radioName,url) {
                var radioChecked = jQuery('input:radio[name='+radioName+']:checked');
                var rating = radioChecked.val();
                console.log("in_ajax",radioName,url,radioChecked);

                jQuery.ajaxSetup({
                    headers:{
                        'Access-Control-Allow-Origin' : "*",
                        'X-CSRF-TOKEN':jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });

                jQuery.ajax({
                    url : url,
                    type : 'GET',
                    data: {
                        content_type:content_type,
                        id:id,
                        rating:rating
                    },
                    success: function (data) {
                        console.log('Success:',url);
                    },
                    error: function (xhr) {
                        console.log('Error:', xhr.status + xhr.statusText);
                    }
                });

            }

            jQuery('input:radio[name=rating_knowledge]').click(function() {
                alert('knowledge');
                var radioName = "rating_knowledge";
                var url = "{!! route('rateKnowledge') !!}";
                console.log(radioName,url);
                ajaxRequest(radioName,url);
            });

            jQuery('input:radio[name=rating_pedagogics]').click(function() {
                alert('pedago');
                var radioName = "rating_pedagogics";
                var url = "{!! route('ratePedagogics') !!}";
                console.log(radioName,url);
                ajaxRequest(radioName,url);
            });

            jQuery('input:radio[name=rating_niceness]').click(function() {
                alert('niceness');
                var radioName = "rating_niceness";
                var url = "{!! route('rateNiceness') !!}";
                console.log(radioName,url);
                ajaxRequest(radioName,url);
            });

                jQuery('input:radio[name=rating_organization]').click(function() {
                alert('organization');
                var radioName = "rating_organization";
                var url = "{!! route('rateOrganization') !!}";
                console.log(radioName,url);
                ajaxRequest(radioName,url);
            });
        });
    });

</script>

1 个答案:

答案 0 :(得分:0)

我无法看到问题。但是,不是为每个单选按钮组绑定单独的处理程序,而是绑定所有这些处理程序的单个处理程序,并让它从$(this)获取组名。

$(".rating-star").click(function() {
    var radioName = this.name;
    var url = $(this).closest("fieldset").data("url");
    ajaxRequest(radioName, url);
});

我已将网址从Javascript移到HTML中,所以它应该是这样的:

<fieldset class="rating" data-url="{!! route('rateKnowledge') !!}">

我没有使用Laravel,我认为这是可能的。