Ajax请求未发送，选择器错误？

Question

Edit: the discussion helped me to unrderstand that the problem comes from outside the script... thx everybody for the help!

Problem : when I click one of the four groups of rating stars, only the "knowledge" one gets sent. I get the alert 'knowledge' and the controller function rateKnowledge gets reached. What's missing to make the 3 other rating groups work ?? I've spent hours searching but I'm sooo bad in javascript... Should I write it a different way?

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>

Answer 1

I can't see the problem. But rather than binding separate handlers for each radio button group, bind a single handler for all of them, and have it get the group name from $(this) .

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

I've moved the URL out of the Javascript and into the HTML, so it should be something like:

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

I don't use Laravel, I'm assuming this is possible.