Question

我有一个页面，它使用几个AJAX调用来获取和更新数据。用户在输入框中输入产品编号，然后单击<button>，它运行一个具有jQuery AJAX调用的函数来填充div。见下文。

HTML 的

<form rol="form">
  <div class="form-group">
    <label for="sku" id="sku-label">Please enter the SKU below</label>
    <input class="form-control text-center" type="input" id="sku">
    <button class="btn btn-primary col-md-12" type="button" id="bClick" onclick="getSku( $( '#sku' ).val() );">Get SKUs</button>
  </div>
  <input type="hidden" id="badgeNum" value="<?php echo $_SESSION['BADGE_NUMBER']; ?>">
</form>

<div class="col-md-12" id="sku-results"><!--This div gets populated. -->
</div>

的jQuery

function getSku(sSku) {


  //AJAX call to get SKUs goes here.
  $.ajax({
    type: 'POST',
    url: 'sku-query.php',
    async: false,
    mimeType: 'json',
    //dataType: 'application/json',
    data: {sku: sSku},
    success: function(data) {
        var disp = "";
        disp += "<div class='col-md-12' id='skuDisplay'>";
        disp += "<div class='col-md-2'><strong>SKU</strong></div>";
        disp += "<div class='col-md-3'><strong>Description</strong></div>";
        disp += "<div class='col-md-2'><strong>Master</strong></div>";
        disp += "<div class='col-md-2'><strong>Daughter</strong></div>";
        disp += "<div class='col-md-2 text-center'><strong>Location</strong></div>";
        disp += "<div class='col-md-1 text-center'><strong>Update</strong></div>";
        disp += "</div>";

        counterp = 0;

        $.each(data, function(i, data) {
            disp += "<div class='col-md-12' id='skuDisplay'>";
            disp += "<div class='col-md-2' id='dSku' >" + data[0] + "</div>";
            disp += "<div class='col-md-3' id='dDesc'>" + data[1] + "</div>";
            disp += "<div class='col-md-2' id='dMast'>" + data[2] + "</div>";
            disp += "<div class='col-md-2 text-center' id='dDaughter'>";
            disp += "<input class='col-md-6 text-center' type='number' value='"+ data[3] + "' id='dChange'>";
            disp += "</div>";
            disp += "<input type='hidden' id='oldQty' value='" + data[3] + "'>";
            disp += "<div class='col-md-2 text-center' id='dLoc'>" + data[4] + "</div>";
            disp += "<div class='col-md-1 text-center'><a class='inv-click' id='" + counterp + "' onclick='updateDaughter(this.id)'  value='" + counterp + "'><i class='fa fa-check-square-o'></i></a></div>";
            disp += "</div>";

            counterp = counterp + 1;
        });

        //Success function if all goes well.
        $( "#sku-results" ).empty();

        $( "#sku-results" ).append( disp );

    },
    error: function() {
        alert('There seems to be an error fetching SKUs.');
    }
  });
}

所以上面的代码工作正常。在附加到页面的每个div中，都有一个<a>元素。添加这些div的目的是每个div都有一个输入框，用户可以在其中更改值。当值更改并单击a元素时，将运行另一个具有另一个AJAX调用的函数。当此函数中的第二个AJAX调用完成运行时，我需要运行第一个函数AGAIN来更新具有更新值的页面。请参阅下面的第二个功能。

function updateDaughter(getId)
{
var master   = $( "#" + getId ).closest("#skuDisplay").children("#dMast").html();
var daughter = $( "#" + getId ).closest("#skuDisplay").children("#dDaughter").children("#dChange").val();
var loc      = $( "#" + getId ).closest("#skuDisplay").children("#dLoc").html();
var oldQty   = $( "#" + getId ).closest("#skuDisplay").children("#oldQty").val();
var emp_id   = $( "#badgeNum" ).val();
var sku      = $( "#" + getId ).closest("#skuDisplay").children("#dSku").html();

var dDate  = new Date();
var dDay   = ("0" + dDate.getDate() ).slice(-2);
var dMonth = ("0" + dDate.getMonth()).slice(-2);
var dYear  = dDate.getFullYear();
var dHour  = ("0" + dDate.getHours()  ).slice(-2);
var dMin   = ("0" + dDate.getMinutes()).slice(-2);
var dSec   = ("0" + dDate.getSeconds()).slice(-2);

var dFullDate = dYear + "-" + dMonth + "-" + dDay;
var dFullTime = dHour + ":" + dMin   + ":" + dSec;
var dAllDate  = dFullDate + " " + dFullTime;

var move_from = "Adjustment";

//var created   = date('Y-m-d h:i:s');
var worktype  = "Reslot";
var qty       = daughter - oldQty;

alert("DATE:" + dAllDate + ". SKU:" + sku + ". MASTER:" + master + ". LOC:" + loc + ". DAUGHTER:" + daughter + ". OLD:" + oldQty + ". EMPID:" + emp_id + ". QTY:" + qty + ". MOVEFROM:" + move_from + ". TYPE:" + worktype);

var workTypeId = "";
if (worktype  = 'Putaway')      {workTypeId = 1;}
if (worktype  = 'RTI')          {workTypeId = 2;}
if (worktype  = 'Replen')       {workTypeId = 3;}
if (worktype  = 'Manual Replen'){workTypeId = 4;}
if (worktype  = 'Reslot')       {workTypeId = 5;}
if (worktype  = '01 Replen')    {workTypeId = 6;}
if (worktype  = '03 Replen')    {workTypeId = 7;}
if (worktype  = '02 Replen')    {workTypeId = 8;}

$.ajax({
    type: 'POST',
    url: 'http://a/location/that/works',
    async: false,
    data: JSON.stringify({
        workTypeID:              workTypeId,
        completedDate:           dAllDate,
        startLocation:           move_from,
        endLocation:             loc,
        quantity:                qty,
        assignedAdministratorID: emp_id,
        createdDate:             dAllDate,
        startedDate:             dAllDate,
        createdAdministratorID:  emp_id,
        sku:                     sku
    }),
    contentType: 'application/json',
    success: function(data) {
        if(data.status == 'Success') {                                        
            $('#result').text(data.status);
        } else {                                  
            $('#result').text('Failed on update: ' + data.status + ', ' + data.errorMessage);                                                                 
        }
    },
    error: function() {
        $('#result').text('There might be some problem on the web service. Please contact administrator.');
    }
});
$( "#bClick" ).click();
}

有什么问题？

第二个功能的作用是它使用更新它所需的信息更新相应的数据库。问题是我无法让我的页面重新加载更新的信息。更改值并单击<a>标记后，页面再次运行第一个函数，但旧值显示。我可以获得新值的唯一方法是，如果我再次单击具有相同产品编号的按钮。

在阅读了这篇文章后，我发现AJAX除了你的其他功能外还会运行自己的进程。所以在我的第二个函数中，如果我再次调用我的第一个函数，那么看起来正在发生的是我的第一个函数是在我的第二个函数中调用，甚至在AJAX调用完成之前。

我尝试了什么

- 我想我会尝试将async: false添加到我的两个jQuery AJAX函数中，这些函数不起作用。

- 我尝试在不同的地方运行我的第二个函数中的第一个函数。在AJAX成功参数内部，在AJAX调用之后等等......这也没有用。

- 我试图通过手动将输入框中的新值替换旧值（empty()然后append()来修补此问题，只是为了向用户显示他们的更改已“更新”，但即使这被旧数据覆盖（由于第二次AJAX调用，它甚至不再存在）。看来，AJAX调用正在被功能的其余部分“淘汰”。

- 我试图在内部再次触发按钮“被点击”，并在$( "#bClick" ).click();进行第二次AJAX调用之后。一样。没用。

我需要什么

这就是我需要发生的事情：

- 用户输入产品编号（有效）

- 用户点击按钮（有效）

- 按钮触发一个运行AJAX调用的函数，用信息填充页面;每行信息都有一个输入框，其中包含一个可以更改的编号，以及一个将运行另一个功能的<a>按钮。（作品）

- 单击<a>按钮时，将运行另一个具有另一个AJAX调用的函数，该函数使用信息更新数据库，包括输入框中更改的值。（作品）

- 在第二个函数的内部，在运行AJAX调用之后，应该再次运行第一个带有第一个AJAX调用的函数，以使用更改的信息更新页面。（不起作用）

有人可以帮我解决这个问题吗？

使用jQuery AJAX调用刷新页面时遇到问题

0 个答案: