页面重新加载AJAX返回失去了对按钮的关注

我有一个按钮点击操作，在此操作上我调用AJAX来更新字段。AJAx返回后，我正在做这个-

     document.location.reload(true);

页面会重新加载，但焦点不会返回到按钮。你能建议一种方法吗？我可以重新加载/刷新页面，然后焦点回到按钮上再次单击？

我在这里更新了我的AJAX代码，请告诉我如何修改这个-

<input type="button" name="IncreaseMyDate" id="myDate"  value="Increase" onclick="updateMyDate('<%=myDate%>')"/>

     function updateMyDate(mywDate)
{
    XMLHttpObj_myDate = CreateHttpObject();
    if(XMLHttpObj_myDate == null){
        alert("HTTP Request not supported");
        return;
    }
     var itemId = document.getElementById("itemId").value;   
    document.getElementById("myDate").setAttribute("disabled",true) ;
    var url ="IncreaseMyDate.jsp?action=update&myDate="+reviewDate; 
    document.getElementById("myDate").style.cursor = "not-allowed"; 
    XMLHttpObj_myDate.onreadystatechange=fillMyDate;
    XMLHttpObj_myDate.open("GET",url);
    XMLHttpObj_myDate.send(null);
    return false;
}

function fillMyDate(){
    if(XMLHttpObj_reviewDate.readyState == 4 || XMLHttpObj_myDate.readyState == "complete"){
        document.getElementById("myDate").style.cursor = "pointer"; 
        document.getElementById(myDate").innerHTML = XMLHttpObj_myDate.responseText; 
     document.location.reload(true);
    }       
}

为什么要重新加载页面？进行Ajax调用的最大优点是避免了重新加载页面的需要。当您重新加载页面时，您可以在服务器端完成所有Ajax工作。

您需要向新页面加载传递一个变量，该变量指示焦点应该放在哪个按钮上。您的页面重载不知道客户端以前发生了什么。在查询字符串中传递按钮的id，然后使用它再次查找按钮并设置焦点。

您可以将按钮的id存储在sessionStorage中，然后检查页面何时加载以重新应用焦点（如果适用）。

以下页面在我的测试中起作用：

<body onload="body_onload();">
<button id="buttonA" onclick="button_click(this);">Button A</button><br/>
<button id="buttonB" onclick="button_click(this);">Button B</button><br/>
<button id="buttonC" onclick="button_click(this);">Button C</button><br/>
</body>
<script>
    function body_onload() {
        var buttonId = sessionStorage["buttonId"];
        if (buttonId) {
            document.getElementById(buttonId).focus();
        }
    }
    function button_click(button) {
        sessionStorage["buttonId"] = button.id;
        document.location.reload(true);
    }
</script>

相关内容

最新更新

热门标签：