Ajax操作后如何刷新JSP页面

Question

My problem is I have one html table in jsp page .And i applied dragging and dropping technique for row ordering .I am also saving new order to DB(Mysql) By calling action through AJAX.and displaying the order By using order by sql query .but for second time it is not working well because i am not able to get new rows order for TR id.Please sir share your view on that.I am doing dragging and dropping through Javascript code which is like that:

  this.onDrop = function(table, droppedRow ) {
    var rows = this.table.tBodies[0].rows;
    var debugStr = "";
    for (var i=0; i<rows.length; i++) {
        debugStr += rows[i].id+" ";
        alert(debugStr);
        alert(droppedRow.id);
    }
    // document.getElementById('debug').innerHTML = debugStr;
    function ajaxRequest(){
        var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
        if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
            for (var i=0; i<activexmodes.length; i++){
                try{
                    return new ActiveXObject(activexmodes[i])
                }
                catch(e){
                //suppress error
                }
            }
        }
        else if (window.XMLHttpRequest) // if Mozilla, Safari etc
            return new XMLHttpRequest()
        else
            return false
    }

    //Sample call:
    var mypostrequest=new ajaxRequest()
    mypostrequest.onreadystatechange=function(){
        if (mypostrequest.readyState==4){
            if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
                document.getElementById("gfdg").innerHTML=mypostrequest.responseText
            }
            else{
                alert("An error has occured making the request")
            }
        }
    }
    //var namevalue=encodeURIComponent(document.getElementById("name").value)
    // var agevalue=encodeURIComponent(document.getElementById("age").value)
    var parameters="array="+debugStr+"&maxLimit="+droppedRow.id
    mypostrequest.open("POST", "tableAjaxUpdate.action", true)
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    mypostrequest.send(parameters)
}

and my Html table code is like that.

<tr id="<%= uniqueId%>"> / I am taking this row id from the db(from the exorder column)
    <% System.out.println("AAAuniqueId----->" + uniqueId); %>
    <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=dayCount%>
    </td>
   <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=exerciseGroupName%>
     </td>

    <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=exerciseName%>
    </td>
    <td height="30" align="center" valign="middle" class="vtd" width="3%">
     <%=sets%>

    </td>
    <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=reps%>
    </td>
   <td height="30" align="center" valign="middle" class="vtd" width="3%">
   <s:url id="idDeleteExName" action="deleteExNameInCustomtemplate">
        <s:param name="dayCount"> <%=dayCount%></s:param>
        <s:param name="cusExId"><%=cusExId%></s:param>
        <s:param name="routineId"><%=routineId%></s:param>
   </s:url>
  <s:a href="%{idDeleteExName}"><img src="images/tables/delete-icon.png" style="width: 35px;height: 35px;"></s:a>   
  </td>

Answer 1

As far as I under your question your are not getting desired output after your ajax call. I am giving you some links which we get you through complete concept understanding and solution to your problem ie implementation of ajax call on jsp.

Concept flow diagram of AJAX: how ajax works on web page http://www.w3schools.com/ajax/ajax_intro.asp

If you already know above that... implementation on AJAX on jsp.. here one of the many possible solutions... http://newtechies.blogspot.in/2007/12/simple-example-using-ajax-jsp.html

Below is thread of stackoverflow only over this. ajax and jsp integration Above link gives you other possible solutions also..

Enjoy coding... :)

Answer 2

You can refresh your same location using

location.reload(true) .

Answer 3

Well, in success of the AJAX call you need to refresh the page. so inside your AJAX call I write as :

var mypostrequest=new ajaxRequest();
mypostrequest.onreadystatechange=function(){
    if (mypostrequest.readyState==4){
        if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
            document.getElementById("gfdg").innerHTML=mypostrequest.responseText;
            //this is the success point of your AJAX call and you need to refresh here 
            window.location.reload(); //this is the code for reloading
            //but your "gfdg" div data will be lost if you refresh,
            // so start another AJAX call here 
        }
        else{
            alert("An error has occured making the request");
        }
    }
}

But I am afraid that your gfdg div, which have some new data will get lost after reloading the page. You could another AJAX call instead of refreshing.

One more point, you are using the classic AJAX, instead use a more advanced library like jQuery AJAX . It will simplify your code and has much flexibility and browser compatibility.