how to refresh the jsp page after ajax action

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>

AJAX is meant for fetching some server-sided data without refreshing the page. If you want to refresh the page, why using AJAX ? Submit a `
` instead. And if your requirement is to refresh the page after AJAX call completes, then also there are work-around in Javascript. But it is hard to give some advice without seeing what you are doing. Please post your code, if you still have the problem. — tusar, Mar 29 '12 at 11:05
sir when i drag a row and drop it in some another location then this javascript fuction this.onDrop = function(table, droppedRow ) is calling ,so for updating to server new row order i have to call AJAX.YOu can see code in my post.and after performing action i am returning the same jsp again but this time i am not getting row id again in UI.Please sir share you view , i am struggling in it for many days. — Jitendra verma, Mar 30 '12 at 03:31

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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 i.e. 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... :)

score 0 · Answer 2 · edited Dec 18 '13 at 11:30

0

You can refresh your same location using

location.reload(true).

edited Dec 18 '13 at 11:30

Bathsheba

231,907
34
361
483

answered Mar 29 '12 at 12:52

Where i have to add this code in my cade to refresh the page again.Sir i post my code above ,please have a watch on it. – Jitendra verma Mar 30 '12 at 03:36
I dont know where exactly you want to refresh jsp page. anyway, you can do one thing, write java script function like this and give a call where you want to realod...if you have more doubts post here. – Mar 30 '12 at 03:58
i want to load above html code again when response back from the server. – Jitendra verma Mar 30 '12 at 05:21
ok then put here...if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){ document.getElementById("gfdg").innerHTML=mypostrequest.responseText; location.reload(true);} – Mar 30 '12 at 05:28

score 0 · Answer 3 · answered Mar 30 '12 at 05:21

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.

sir the situation is like that i put above html code in separate jsp(call.jsp) and include this jsp(call.jsp) to some another jsp.now i am dragging and dropping row of table and updating the server.and returning the call.jsp in **gfdg div** but my **gfdg div** is not refreshing why? — Jitendra verma, Mar 30 '12 at 05:30
is the AJAX call really returning some value ? what happens if you do a `alert(mypostrequest.responseText);` — tusar, Mar 30 '12 at 05:58

how to refresh the jsp page after ajax action

3 Answers3