Refreshing columns of a row onclick of refresh button using ajax in jsp

Question

HI i have a table in JSP page with refresh buttons at row level,when i click refresh button it should check database and get those two columns and replace the older values i.e refresh.

this is my jsp page below.

<script src="js/jquery1.min.js"></script>
<script
<script type="text/javascript">
function refreshRecord(id)
{
  $(document).ready(function(){
  $("#buto").click(function(){
  $(this).parents('tr').find(".b1").load(".b1");
  $(this).parents('tr').find(".b2").load(".b2");
  alert("value");
  });
  });
}
  <table border="1" class="displaytab" id="rtable">
   <tr> 
   <th>#Records</th><th>Status</th><th>Estimated Time</th><th></th>
   </tr>

   <s:iterator value="uploadList" var="m"> 
            <tr>   
            <td class="b1"><s:property value="%{#m.numRecords}" /></td>
            <td class="b2"><s:property value="%{#m.status}" /></td>
            <td>tbd</td>

            <td><s:property value="%{#m.numRecords}" /></td>
            <td><a href=""><img src="images/generate.png" title="Generate Report"</a></td>
            <td><a href=""><img src="images/refresh.png" title="Refresh" id="buto"    onclick="refreshRecord(<s:property value="%{#m.fileId}" />);"></a></td>
            </tr>
         </s:iterator>
         </table>

can any body help in this thanks in advance

smilyface · Answer 1 · 2013-09-25T14:46:24.267

Here is another HTML with what you want exactly.

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>

testMe.txt

'{ "name": "John", "place" : "Chicago" }'

thankyou very much,but if i am not using text file,instesd directly i want to use the data from action class,i am not using any text file actually.in action class i have two variables with data. — raajiv, Sep 26 '13 at 04:48

score 0 · Answer 2 · answered Sep 24 '13 at 13:57

0

I think you need to use ajax.

Here are two examples : http://www.tutorialspoint.com/ajax/ajax_database.htm http://www.ggkf.com/ajax/onclick-update-with-autosuggestion

answered Sep 24 '13 at 13:57

smilyface

5,021
8
41
57

thankyou ,but i am using JPA and no php,can you help by using these. – raajiv Sep 24 '13 at 14:02
Java Persistent API , right ? You told JSP. So I guess the view for your application is JSP. What exactly you need is; a javaClass which can fetch from DB and can give you an output in JsonArray(if possible). I havn't worked in JPA. So I dont know whether it is possible or not. – smilyface Sep 24 '13 at 14:13
One more thing. Ajax is not a language. Simply , it is javascript itself. So it can be used in HTML,PHP,JSP,...or whatever it is. – smilyface Sep 24 '13 at 14:19
view is jsp only,with struts2 – raajiv Sep 25 '13 at 03:59

score 0 · Answer 3 · answered Sep 25 '13 at 09:23

0

Learn how ajax works in a simple HTML... If you learn this, it's easy for you to implement the same in your application

Save this HTML in a folder [say ajaxFolder].

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

save somePath/testMe.txt somewhere and enter some data in it.

answered Sep 25 '13 at 09:23

smilyface

5,021
8
41
57

ok i got it but ,that action class will return two values in two different variables,and i have to display in two different columns in the same row how i can do that,can u please help – raajiv Sep 25 '13 at 10:08
That's why I told about Json in my first comment. In your action file, put your both variables into a jSon. Then send it to the JSP. Get it through ajax. Extract json(it is something like a key-value pair). Put first key's value in first row. Second one in the second row. – smilyface Sep 25 '13 at 13:30
Encode json in java with http://www.tutorialspoint.com/json/json_java_example.htm and decode with ajax as in http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript – smilyface Sep 25 '13 at 13:33
And you can try parsing a json with jQuery in the above example(HTML) itself. Create a jSon string and put it in the text file. And try to parse it with ajax.. Happy coding.. :) – smilyface Sep 25 '13 at 13:36

Refreshing columns of a row onclick of refresh button using ajax in jsp

3 Answers3