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>

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>

• java
• javascript
• mysql
• ajax
• jsp

Share Improve this question Follow edited Mar 30, 2012 at 3:26 Jitendra verma asked Mar 29, 2012 at 7:22 Jitendra vermaJitendra verma 5111 gold badge33 silver badges1010 bronze badges 2

• 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 <form> instead. And if your requirement is to refresh the page after AJAX call pletes, 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 Commented Mar 29, 2012 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 Commented Mar 30, 2012 at 3:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 plete 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./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... :)

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 patibility.

You can refresh your same location using

location.reload(true).