Button needs to be clicked twice before working, I want it to be clicked just once

Question

I have a enable and disable button. Each buttons returns a "success" message in the console when clicked. The enable button works in a single click, however, the disable button needs to be clicked twice before it prints the "success" message in the console in my developer tools. What is the problem with this? Can somebody helps me fixing this one? Thanks a lot. Here is my code:

 <button  class="btn_mode"  value="1">Enable</button>
 <button  class="btn_mode"  value="0">Disable</button>


  <script type="text/javascript">

$(".btn_mode").click(function(){

  var mode_val = $(this).val();
  var postdata={'mode':mode_val};

  $.ajax({

    type:"POST",
    url:"<?php echo base_url();?>superadmin/change_mode",
    dataType:'json',
    data:postdata,
    success: function(data){

         if(data.notify=="Success")
            {
             console.log(data.notify);
             location.reload();
            }
            else{
              console.log(data.notify);

            }

       }
  });

});



</script>

my controller function

function change_mode(){

  $mode = $this->input->post('mode');
  $query = $this->course_booking_model->change_mode($mode);

  if($query){
    $notification = "Success";
   }
  else{
   $notification = "Failed";
   }

   echo json_encode(array('notify'=>$notification));

   }

model

function change_mode($mode){

  $id = 1;

   $data = array('mode' => $mode);

   $this->db->where('id',$id);
   $this->db->update('maintenance_mode',$data);

   return true;
  }

Output when adding the console.log('Posting mode_val: ' + mode_val); in the javascript Clicking the enable button output in the console

Output in the console when clicking the disable button

Answer 1

As your event hook-up looks fine, i suspect that something is going wrong on the server side, which means that your success handler isn't firing. Try logging prior to your ajax call, to see if the click event fires at all:

$(".btn_mode").click(function(){

  var mode_val = $(this).val();
  var postdata={'mode':mode_val};

  console.log('Posting mode_val: ' + mode_val);

  $.ajax({

    type:"POST",
    url:"<?php echo base_url();?>superadmin/change_mode",
    dataType:'json',
    data:postdata,
    success: function(data){

         if(data.notify=="Success")
            {
             console.log(data.notify);
             location.reload();
            }
            else{
              console.log(data.notify);

            }

       }
  });

});

If the above logs the expected values when you click the buttons, that means that your php script is failing the first time you call it with mode_val = 0.

You could try catching whatever exception might be thrown like so:

function change_mode(){
  try{
      $mode = $this->input->post('mode');
      $query = $this->course_booking_model->change_mode($mode);

      if($query){
        $notification = "Success";
       }
      else{
       $notification = "Failed";
       }
  }
  catch(Exception $e){
    $notification = $e->getMessage();
  }
   echo json_encode(array('notify'=>$notification));

}

Edit: The images you have uploaded indicate that there is a problem with the server-side code, and your button click is firing just fine. If you update your php to catch the error and return it, you should be able to get a hint as to what is going wrong. To see the call completing, you could implement the 'complete' and/or 'error' callbacks:

  $.ajax({

    type:"POST",
    url:"<?php echo base_url();?>superadmin/change_mode",
    dataType:'json',
    data:postdata,
    success: function(data){

         if(data.notify=="Success")
            {
             console.log(data.notify);
             location.reload();
            }
            else{
              console.log(data.notify);

            }

       },
    error: function(jqXhr, txtStatus, errThrown){
         console.log('Call failed with status:' + txtStatus);

         if(errThrown)
             console.log('and error:' + errThrown);
       },
    complete: function(jqXhr, txtStatus){   
         console.log('Call completed with status:' + txtStatus);
       }
  });

});

Answer 2

Try to change your model to return the real outcome of the update. Like:

return $this->db->update('maintenance_mode',$data);

depending on what the db wrapper return after an update.

Answer 3

hmmm maybe something like this

$(".btn_mode[value='1']").on("click", function(){ do something });
$(".btn_mode[value='0']").on("dblclick", function(){ do something });