Question

我有一个项目，我试图用jquery实现。我有一个添加按钮，因此每次单击它时，它都会在我的数据库中创建一个新记录。我试图找出如何让我的ajax调用识别新数据并将其显示在屏幕上，而不必手动刷新屏幕，我希望只使用fadeIn或类似的东西只显示我的新div。

这是一个清单系统，因此有人可以通过动态添加步骤编辑清单并重新排序现有步骤我编写了一个loadData函数来遍历我的记录并附加相应的数据，但不确定当有人添加新步骤时如何自动刷新我的div。我不想重新加载整个页面，只有新创建的div。

＆＃13;

$(function() {
  loadData();
});
// drag and drop steps and update the database
$('#steps').sortable({
  update: function(event, ui) {
    var data = $(this).sortable('serialize');

    data = data + '&id=' + json.IDchecklist + '&ver=' + json.Version;
    $.ajax({
      data: data,
      type: 'POST',
      url: '../Processes/Reorder.php',
      success: (function() {})

    });

  }
});

//load data
function loadData() {
  $.ajax({
    url: '../json/test.php',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      json = data
      $('#details').find('h2').html(data.IDchecklist);
      $('#details').find('h4').html(data.Status);
      $.each(data, function(k, v) {

        if (k == "Steps") {
          count = 1;
          $.each(v, function(key, value) {
            $('#steps').append('<span>' + count + '</span><div id=step' + value.IDstep + '>' + value.StepText + '</div>');
            count++;
            text[count] = value.StepText;
          })
        }
      })

    }
  })
}
//add new step
$('#add').click(function() {
  console.log(count);
  div = $('#step-' + count);
  $.ajax({
    type: 'POST',
    data: {
      id: json.IDchecklist,
      ver: json.Version,
      step: count
    },
    url: '../processes/addStep.php',
    success: (function() {

      div.fadeIn('fast')

    })
  })

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="jumbotron"></div>
<div id="details">
  <h2></h2>
  <h4></h4>
</div>
<div id="steps">

</div>
<button id=add value="Add">Add</button>

＆＃13;

如何让我的动态创建的div在ajax调用后显示在页面上

0 个答案: