Question

function getSearchClients() {
    console.log('Inside searchClient');
    $('#progressbar').show();
    var searchClientPhone = document.getElementById('searchClientCellPhoneNo').value;
    $.ajax({
        type:"POST",
        data: "searchClientPhone=" + searchClientPhone,
        url: "searchClientCellPhoneNo",
        success: function(result){
            $("#progressbar").hide();
            $("#example td").each( function() {
                 var thisCell = $(this);
                 var cellValue = parseInt(thisCell.text());

                 if (!isNaN(cellValue) && (cellValue >= document.getElementById("selectedClientRewardPoints").value)) {
                     thisCell.css("background-color","#FF0000");
                  }
              }
             );

            $("#selectedClientName").show();
            $("#selectedClientRewardPoints").show();
            window.location.reload(true);

        }
    }); 
}

文本框在ajax成功时不会显示，但我已经验证控件进入成功块。

Answer 1

我认为这是因为window.location.reload(true)，为什么你认为重新加载页面!!

根据我的理解，当第二次重新加载页面时，搜索输入参数变为null/empty，因此在此代码段中var cellValue = parseInt(thisCell.text()); cellValue为null / undefined。

因此，以下两行不能按预期运行

 $("#selectedClientName").show();
 $("#selectedClientRewardPoints").show();

Answer 2

如果您希望保持以下状态：

$("#progressbar").hide();
$("#selectedClientName").show();
$("#selectedClientRewardPoints").show();

你应该在用户localstore或cookie中存储一个布尔值（在ajax成功时）。然后在页面上准备一份文件：

$(document).ready({

if(localstorage/cookie) { / check the status of your cookie or localstorage

    $("#progressbar").hide();
    $("#selectedClientName").show();
    $("#selectedClientRewardPoints").show();

    // clear the cookie or the localstorage
}
});

我希望这会给你一个想法......

Answer 3

有一些问题。主要是你正在重新加载页面，这可能是主要问题。

您的号码解析和验证也存在一些小问题。我在下面修了它。

function getSearchClients() {
    console.log('Inside searchClient');
    $('#progressbar').show();
    var searchClientPhone = $('#searchClientCellPhoneNo').val();
    $.ajax({
        type: "POST",
        data: "searchClientPhone=" + searchClientPhone,
        url: "searchClientCellPhoneNo",
        success: function (results) {
            $("#progressbar").hide();
            $("#example td").each(function () {
                var thisCell = $(this);
                var cellText = thisCell.text();

                // This will update your textbox...
                $("#selectedClientName").val(result.clientName);

                // And this is an example of updating based on an array of data.
                result.transactions.forEach(function(result){
                    // Create a list item and append it to the list.
                    $('<li></li>').text(result).appendTo('#resultList');
                });

                // If the cell text is a number... 
                if (!isNaN(cellText)) {

                    // Parse the text to a base 10 integer...
                    var cellValue = parseInt(thisCell.text(), 10);

                    if (cellValue >= $("#selectedClientRewardPoints").val()) {
                        thisCell.css("background-color", "#FF0000");
                    }
                }
            });

            $("#selectedClientName").show();
            $("#selectedClientRewardPoints").show();
            // Do not reload the page.
        }
    });
}

Answer 4

感谢@JimmyBoh的指示，这是我解决问题的方法：

1）使用struts2-json库。在struts.xml中，添加如下：

<package name="json" extends="json-default">
   <action name="searchClientCellPhoneNo"    class="com.intracircle.action.RedeemAction" method="searchClientCellPhoneNo">
     <result type="json">
        <param name="root">jsonData</param>
     </result>
   </action>
</package>

2）在动作类中，添加了一个jsonData Map，如下所示：

private Map<String,Object> jsonData = new HashMap<String,Object>();

为jsonData添加了getter和setter

public Map<String,Object> getJsonData() {
    return jsonData;
}

public void setJsonData(Map<String,Object> jsonData) {
    this.jsonData = jsonData;
}

在action方法中，将要返回jsp的数据添加到jsonData Map中，如下所示：

public String searchClientCellPhoneNo() {
    clientList = userdao.getClientsList(searchClientPhone);
    if(clientList !=  null && clientList.size() > 0) {
        selectedClientName = clientList.get(0).getProfileName();
        jsonData.put("selectedClientName",selectedClientName);
        int storeId = ((Stores)SecurityUtils.getSubject().getSession().getAttribute(SESSION_CONSTANTS.SESSION_STORE)).getStoreId();
        selectedClientRewardPoints = redeemDao.getCountRewardPointsForClientForStore(storeId, clientList.get(0).getId());
        jsonData.put("selectedClientRewardPoints", selectedClientRewardPoints);
    }
    viewRedeemScheme();
    return SUCCESS;
}

3）在jsp ajax方法中，进行了以下更改：确保添加dataType：'json'，如果要使用alter打印ajax结果，请将其字符串化。

    $.ajax({
        type:"GET",
        data: "searchClientPhone=" + searchClientPhone,
        url: "searchClientCellPhoneNo",
        dataType: 'json',
        headers : {
            Accept : "application/json; charset=utf-8", 
            "Content-Type" : "application/json; charset=utf-8"
        },
        success: function(result){

        alert("result: " + JSON.stringify(result));
        console.log("Result " + result);

            $("#selectedClientName").val(result.selectedClientName);
    $("#selectedClientRewardPoints").val(result.selectedClientRewardPoints);
            $("#progressbar").hide();
            $("#example td").each( function() {
                 var thisCell = $(this);
                 var cellValue = parseInt(thisCell.text());

                 if (!isNaN(cellValue) && (cellValue >= document.getElementById("selectedClientRewardPoints").value)) {
                     thisCell.css("background-color","#FF0000");
                  }
              }
             );

            $("#selectedClientName").show();
            $("#selectedClientNameLabel").show();
            $("#selectedClientRewardPointsLabel").show();
            $("#selectedClientRewardPoints").show();

        }
    });

感谢大家的帮助，特别是@JimmyBoh。

使ajax成功显示文本框和其他css更改

4 个答案: