Как обновить конкретный div без перезагрузки всей страницы?

Question

<div id="success_hold">
<?php
    if($row['mandate_end']!=date('Y-m-d') && $row['job_position']=='unhold')
    {
        echo '<span class="badge badge-success">Open</span>';
    }
    else
    {
        echo '<span class="badge badge-warning">Hold</span>';
    }
?>
</div>

<script>
    $(document).ready(function(){
        var flag =  1;
        $(".hold").click(function(){
            job_id = this.id;
            if(flag == 1)
            {
                $.ajax({
                    type:"POST",
                    data:{"job_id":job_id},
                    url:"<?php echo base_url(); ?>pausehold",
                    success:function(data){
                        $("#success_hold").load("#success_hold");
                    }
                });
                flag = 0;
            }
            else
            {
                $.ajax({
                    type:"POST",
                    data:{"job_id":job_id},
                    url:"<?php echo base_url(); ?>resumehold",
                    success:function(data){
                        $("#success_hold").load("#success_hold");
                    }
                });
                flag = 1;
            } 
        }); 
    });
</script>

У меня есть div, где id="success_hold".Теперь, что происходит, когда я нажимаю class="hold", я обновляю свои данные.Теперь я хочу обновить <div id="success_hold"> без перезагрузки всей страницы, где я использую функцию .load() Но проблема в том, что когда я использую .load(), функция показывает всю страницу в success_hold.Итак, как я могу исправить эту проблему?Я хочу обновить только success_hold.

Спасибо

Answer 1

success:function(data){
    $("#success_hold").load("#success_hold");
}

Это ваш метод успеха в ajax.Вы хотите перенести содержимое данных в ваш div #success_hold?

Если хотите, просто сделайте это:

success:function(data){
    $("#success_hold").html(data);
}

Answer 2

Проблема в том, что load() используется для создания другого AJAX-запроса и помещения части HTML-кода, полученного из этого запроса, в целевой элемент.

Поскольку вы уже делаете AJAX-запрос кчтобы получить данные (предположительно HTML), вам просто нужно append() данные в контейнер.

Также обратите внимание, что единственная разница между двумя сторонами вашего условия - это URL, на который отправляется запрос, поэтомуВы можете легко высушить этот код:

$(document).ready(function() {
  var flag = true;

  $(".hold").click(function() {
    var url = '<?php echo base_url(); ?>' + (flag ? 'pausehold' : 'resumehold');
    flag = !flag;

    $.ajax({
      type: "POST",
      data: { job_id: this.id },
      url: url,
      success: function(data) {
        $("#success_hold").append(data);
      }
    });
  });
});

Если data содержит всю страницу, то вы должны изменить этот PHP-файл, чтобы он возвращал только соответствующий HTML, поскольку это поможет ускорить запрос.Если по какой-либо причине вы не можете этого сделать, вы можете извлечь требуемый элемент из ответа следующим образом:

$("#success_hold").append($(data).find('#success_hold'));