CODEWITHSUNDEEP
javascriptjqueryruby-on-railsclick
Shoebie
Shoebie

Reputation: 1263

Toggle event working sporadically

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

Answers (3)

iCollect.it Ltd
iCollect.it Ltd

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

Arun P Johny
Arun P Johny

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

natecraft1
natecraft1

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

Related Questions