编辑:讨论帮助我理解问题来自剧本之外......大家都在寻求帮助!
问题:当我点击四组评级星中的一组时,只有"知识"一个人被送了。我得到警报'知识'并达到控制器功能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>
答案 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,我认为这是可能的。