Clever Geek Handbook

JQuery Ajax clicks not working if the page is not refreshed

I have worked with some JS and ajax in my PHP project and I am facing some problems. The ajax seems to work when the page is refreshed on click or just refresh on click. I am using jquery 3.2.1.

I used .live () for the first time, but this is now deprecated and I read that .on () is an alternative, so I am using that now.

This is my JS part:

  $(".up_vote").on("click", function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'upvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(".down_vote").on("click", function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'downvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $("#btnpost").click(function() {
    var post = $("#post_feed").val();
    if (post == "") {
      alert("This can't be empty.");
      return false;
    } else {
      $.ajax({
        type: "POST",
        data: {
          'post_feed': post,
          'action': 'post'
        },
        url: '<?php echo $url; ?>/includes/functions.php',
        dataType: 'json',
        success: function(response) {
          if (response.ResponseCode == 200) {
            $("#post_feed").val("");
            $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
          } else {
            alert(response.Message);
          }
        }
      });
    }
  });
});

Is there something I can't see or is there something wrong?

+3


source to share


4 answers


Make sure you hit the mark first, try this and see if a warning is displayed:

$(function() {
    $(document).on('click', '.up_vote', function() {
       alert('ok');
    });
});

The Click event is bound to existing elements on page load. The key word here is "existing" . When we load something with ajax, we are manipulating the DOM. We are putting on a completely new item. Therefore, we need to add this event after posting new content.



so to attach the event every time ajax is called we use .on

edit your code accordingly

  $(document).on('click', '.up_vote', function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'upvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(document).on('click', '.down_vote', function() {
    var post_id = $(this).attr('postid');
    $.ajax({
      type: "POST",
      data: {
        'post_id': post_id,
        'action': 'downvote'
      },
      url: '<?php echo $url; ?>/includes/functions.php',
      dataType: 'json',
      success: function(response) {
        if (response.ResponseCode == 200) {
          $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
        } else {
          alert(response.Message);
        }
      }
    });
  });

  $(document).on('click', '#btnpost', function() {
    var post = $("#post_feed").val();
    if (post == "") {
      alert("This can't be empty.");
      return false;
    } else {
      $.ajax({
        type: "POST",
        data: {
          'post_feed': post,
          'action': 'post'
        },
        url: '<?php echo $url; ?>/includes/functions.php',
        dataType: 'json',
        success: function(response) {
          if (response.ResponseCode == 200) {
            $("#post_feed").val("");
            $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
          } else {
            alert(response.Message);
          }
        }
      });
    }
  });
});
+1


source


Hi I think you are missing false or e.preventDefault ();

return false; make the browser cancel the message form to the server.

add return false or e.preventDefault () after the ajax function;



Example

$("#btnpost").click(function(e) { ///e here
    var post = $("#post_feed").val();
    if (post == "") {
      alert("This can't be empty.");
      return false;
    } else {
      $.ajax({
        type: "POST",
        data: {
          'post_feed': post,
          'action': 'post'
        },
        url: '<?php echo $url; ?>/includes/functions.php',
        dataType: 'json',
        success: function(response) {
          if (response.ResponseCode == 200) {
            $("#post_feed").val("");
            $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
          } else {
            alert(response.Message);
          }
        }
      });
    }
    e.preventDefault(); //Here
    /// or
    return false; /// Here

  });
+1


source


You can try with the below code.

$(document).on("click",".up_vote",function() {
    alert("click");
});
0


source


The $ (document) .on ('click') event should be called once on page load. There is no need to add document changes in adding a line.

OR

You can disable the event first and then bind again like

 $(document).off("click", '.up_vote').on("click", '.up_vote', function () {
       alert("done");
       // Code here...
 });
0


source






More articles: