Reputation: 1263
Problem is that the toggle does not work with a single click. It works when I make multiple clicks but the behavior seems to be random. I am not sure what is wrong with my code.
$(document).ready(function() {
$('#mark-btn').click(function(){
$.ajax({
type: 'PUT',
url:'<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function(msg){
$("#mark-btn").val("Marked");
$("#mark-btn").attr("id",'unmark-btn' )
return false
});
$("#unmark-btn").click(function(){
$.ajax({
type: 'PUT',
url:'<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function(msg){
$("#unmark-btn").val("Mark");
$("#unmark-btn").attr("id",'mark-btn' );
return false
});
});
});
});
Upvotes: 2
Views: 73
Reputation: 93631
You should not be changing ids dynamically, but to get it to work as-is use the deferred syntax of on
using a selector.
This works by attaching to an element that will stick around, catch the click event, and filter the target at the time of the click:
$(document).ready(function () {
$(document).on('click', '#mark-btn', function () {
$.ajax({
type: 'PUT',
url: '<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function (msg) {
$("#mark-btn").val("Marked");
$("#mark-btn").attr("id", 'unmark-btn')
return false
});
});
$(document).on('click', "#unmark-btn", function () {
$.ajax({
type: 'PUT',
url: '<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function (msg) {
$("#unmark-btn").val("Mark");
$("#unmark-btn").attr("id", 'mark-btn');
return false
});
});
});
You should change a class or other attribute instead of the id.
Note the preferred way of doing JQuery "ready" is now just $(function(){...});
not $(document).ready(function(){...});
Note, as Arun P Johny pointed out the nesting is also incorrect. I have removed that error here too and will upvote him for that.
Upvotes: 1
Reputation: 388446
You need to use event delegation as you are using dynamic id to distinguish the handler to be executed.
Also you should not register a event handler inside another one if it can be called multiple times
$(document).ready(function () {
$(document).on('click', '#mark-btn', function () {
$.ajax({
type: 'PUT',
url: '<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function (msg) {
$("#mark-btn").val("Marked");
$("#mark-btn").attr("id", 'unmark-btn')
return false
});
});
$(document).on('click', "#unmark-btn", function () {
$.ajax({
type: 'PUT',
url: '<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
}).done(function (msg) {
$("#unmark-btn").val("Mark");
$("#unmark-btn").attr("id", 'mark-btn');
return false
});
});
});
Upvotes: 1
Reputation: 2846
On this line $("#mark-btn").attr("id",'unmark-btn' )
Try adding a colon ; at the end. and on the end of your return false statements.
Upvotes: 0