• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2740
  • Last Modified:

Refresh of data in jTable jQuery in JSP

Dear Experts,

Greetings!!

I have designed one jsp page which displays MySQL data in the form of jTable jQuery depending upon values of JSP List Choice field.
For the first 'onchange'  event of LIST VALUE, the records are showing properly. on Second and subsequent change in values, the     $('#PersonTableContainer').jtable('load');
not triggering.
 
Please give your valuable suggestion and help me to resolve the issue.

Thanks & Regards

MJ
0
jogmil
Asked:
jogmil
  • 30
  • 15
1 Solution
 
ValeriCommented:
try with reload() method
$('#PersonTableContainer').jtable('reload');

btw you can load the table when you load jsp, and after that to invoke only reload method.
0
 
jogmilAuthor Commented:
Dear Expert,
Thank you very much for your response.

I have tried what you said. The problem is every time servlet carries the same and initial argument values although the values are changed on each 'onchange' event of List Value of the Form.

Please give your suggestion.

Regards

MJ
0
 
ValeriCommented:
hm, it looks like the result is cached. btw it is default behavior of jQuery...
add this in your js code:

$.ajaxSetup ({
    cache: false
});
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
jogmilAuthor Commented:
Ok Sir.

I do not know where to add and in which file to add the suggested text.

I have three .js files in js folder.

Regards

MJ
0
 
ValeriCommented:
add it as first line in .js file in which is the code responsible for the table load.
in other words in file where is your 'onchange' function.
0
 
jogmilAuthor Commented:
I put the text in the function. Still the result is same.

getdata() is the function called on 'onchange eveny of lish item.
The portion of the code is as under.

<script type="text/javascript">
  function getdata() {
        $(document).ready(function () {

        var sareacode = "&sareacode="+document.getElementById("ContList").value;

          $.ajaxSetup ({
            cache: false
            });
         
        $('#PersonTableContainer').jtable({
            paging: true,
            pageSize: 10,
            actions :{
                listAction: 'AreaController?action=list'+sareacode
            },




Regards


MJ
0
 
jogmilAuthor Commented:
Dear Sir,

My observation is that the instance      

 $('#PersonTableContainer').jtable({
            paging: true,
            pageSize: 10,
            actions :{
                listAction: 'AreaController?action=list'+pval
            },
has been generated only for once with first time value 'AreaController?.action=list'+pval.  ('reload') is not changing the value of of listAction.



Regards

MJ
0
 
jogmilAuthor Commented:
Please Help.

Regards

MJ
0
 
jogmilAuthor Commented:
Please Help

MJ
0
 
jogmilAuthor Commented:
Dear Sir,
Please help. I need your support urgently.

Regards

MJ
0
 
ValeriCommented:
having in mind your comment #40003940 you have to do 3 things:
1. $(document).ready() function is called only once when the web page is loaded, which means that the document is ready. So remove $(document).ready() line and respective close bracket from getdata() function.
2. $(document).ready() should be in your javascript code as separate function and call there getdata() and set cache control before that.
3. on change of your "ContList" call again getdata().

So your code should be something like that:

$(document).ready(function () {
$.ajaxSetup ({ cache: false });
getdata();
});

$("#ContList").change(function() {
getdata();
});

function getdata() {
        var sareacode = "&sareacode="+document.getElementById("ContList").value;
         
        $('#PersonTableContainer').jtable({
            paging: true,
            pageSize: 10,
            actions :{
                listAction: 'AreaController?action=list'+sareacode
            },

getdata() should be completed...
0
 
jogmilAuthor Commented:
Thanks.

I will do the necessary changes and will come back to you.

Regards

MJ
0
 
jogmilAuthor Commented:
Sir,

Now I am send you the complete code.

<script type="text/javascript">
    $(document).ready(function() {
            $.ajaxSetup ({ cache: false });
            getdata();
    });
   
    $("#ContList").change(function() {
        getdata();
    });

    function getdata() {
        var pval = "&sareacode="+document.getElementById("ContList").value+"&wdcode="+document.getElementById("wname").value+"&areacode="+document.getElementById("AreaList").value+"&pbcode="+document.getElementById("PbList").value+"&pacode="+document.getElementById("PaList").value+"&bcode="+document.getElementById("BList").value;
        $('#PersonTableContainer').jtable({
            cache: false,
            paging: true,
            pageSize: 10,
            actions :{
                listAction: 'AreaController?action=list'+pval
            },
            fields: {
                wname : {
                    title: 'W-name',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Area : {
                    title: 'Area',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Bname : {
                    title: 'la;kstd dk uke ',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Station : {
                    title: 'eksckbZy',
                    width: '15%',
                    list: true,
                    edit: true
                },
                Stationarea : {
                    title: 'Vksyh',
                    width: '15%',
                    edit: true,
                    list: true
                } ,
                Sname : {
                    title: 'eksckbZy',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Scontact : {
                    title: 'eksckbZy',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Barea : {
                    title: 'eksckbZy',
                    width: '10%',
                    list: true,
                    edit: true
                },
                Bcontact : {
                    title: 'eksckbZy',
                    width: '10%',
                    list: true,
                    edit: true
                }
            }
        });    
      $('#PersonTableContainer').jtable('reload');
   
  );
 }
</script>

onchange event is set on the field  of list value as <select name='getdata();' > with options </select>

Regards

MJ
0
 
jogmilAuthor Commented:
Probably I made the necessary changes correctly as you suggested. Please advice.

Regards

MJ
0
 
jogmilAuthor Commented:
Let me correct last statement of previous statements.

'onchange' event is set on the field  of 'list value' as <select name='ContList' onchange='getdata();' > with options </select>


Regards

MJ
0
 
ValeriCommented:
ok, does it works now?

1. if onchange is set in this way, then remove this from js code
$("#ContList").change(function() {
  getdata();
});

2. also I can see that 'ContList' is name attribute of the select, do you have id='ContList' as well?
3. just put alerts in js code and test what is gonig on.
something like that:
alert('pval : ' + pval);
0
 
jogmilAuthor Commented:
Yes. ContList is also as ID ad  I put that also in <select.

I will come back to you in a minut.

Regards
MJ
0
 
jogmilAuthor Commented:
Sir,

I checked. Alert not producing any value, it mence that getdata has not called or some error.

Regards

MJ
0
 
jogmilAuthor Commented:
I Put the alert in getdata() function and checked. alert not giving any message.

MJ
0
 
ValeriCommented:
do you mean that getdata() is not invoked when selection is changed? probably onchange of the select doesn't work?!
0
 
jogmilAuthor Commented:
Sir,

I checked it. I put the original one and can see the alert message.

Regards

MJ
0
 
jogmilAuthor Commented:
With changes as suggested the alert not showing the message.

MJ
0
 
ValeriCommented:
which one is the original one?
0
 
jogmilAuthor Commented:
before comment ID: 40003940

Regard
0
 
ValeriCommented:
try this, put this function in our js section

function getdata01() {
alert('onchange is invoked!');
}

then change
<select name='ContList' onchange=getdata();' >
to
<select name='ContList' onchange=getdata01()' >

just to check that this function is invoked. if it works, then there is a problem in your JS with the other(original) function getdata().
check for js errors and check the brackets...
0
 
jogmilAuthor Commented:
ok. Please wt.

Regards

MJ
0
 
jogmilAuthor Commented:
Sir,

It is invoking.

Regards
0
 
jogmilAuthor Commented:
Sir,

Where will be the position of       $('#PersonTableContainer').jtable('load');


Regards
MJ
0
 
jogmilAuthor Commented:
Sir,
I wonder, if I put the line         $(document).ready(function () {       back in original place than the getdata() starts giving alert message. But after removel of this by taking all care of braces the alert not giving message.
Regards

MJ
0
 
ValeriCommented:
see your comment ID: 40006062
I think it should be on the same place.
is it invoked now getdata() when you change the selection?
0
 
jogmilAuthor Commented:
Sir,

It is invoking but the problem from where we starts is same. output of the table not changing as per the selection of list item. It remains same all the time during the session what ever I change the value. Next time when I reload the page and select different values than that value will remain same for that session.


Regards

MJ
0
 
jogmilAuthor Commented:
The servlet is invoking but always with same parameter.

Regards

MJ
0
 
ValeriCommented:
@ID: 40006263
no, there is something wrong, $(document).ready(function () can't be inside another function.
0
 
ValeriCommented:
same parameter or same parameterS ? because I can see that url has many parameters
0
 
ValeriCommented:
if you invoke the servlet with broser, not from tha application, and the parameters are different, does it return diffferent result?
0
 
jogmilAuthor Commented:
Fixed for any one set of parameter. per say If I change 3rd List choice than the out put will remain same even though I change parameter value of 2nd. Next time If I select 2nd List choice than it will be fixed what ever I change value for 3rd. I have checked through alert message. the PVAL is changing as per selection.

My doubt is that 'load' or 'reload' not changing the parameter value and always resulting the same. In Servlet I checked the parameter values with each time when I changed the values of list items with the help of System.out.println . It always shows same parameter values but the value of 'PVAL' is changing.

Regards

MJ
0
 
ValeriCommented:
ahaaa, I got the point! you are taking the value in wrong way:
to get the value of the option you have to do it this way:

var selects = document.getElementById("ContList");
var selectedValue = selects.options[selects.selectedIndex].value;

var pval = "&sareacode="+ selectedValue +"&wdcode="+document.getElementById("wname").value+"&areacode="+document.getElementById("AreaList").value+"&pbcode="+document.getElementById("PbList").value+"&pacode="+document.getElementById("PaList").value+"&bcode="+document.getElementById("BList").value;
0
 
jogmilAuthor Commented:
Sir,
I will check and will come back to you.

Regards

MJ
0
 
jogmilAuthor Commented:
Sir,
I have changed as you suggested but doesn't work.

In servlet I have displayed the following parameter values with the help of System.out.println

Parameters  = '2' , = '26 ' , ALL ,ALL , ALL , ALL
Parameters  = '2' , = '26 ' ,  ALL ,ALL , ALL , ALL

In First Instance I selected  2,26
Next time in same session I have selected 3,36, but in the  servlet I got the the same input values and hence producing the same result.

Regards

MJ
0
 
ValeriCommented:
ok, this is in the servlet! but what about the url in js? if you alert the "pval" are values 2,26 changed to 3,36?
0
 
jogmilAuthor Commented:
Yes sir. it is 2,26 and 3,36. But not reflecting in URL.

pval is changing but not accommodating in listAction.

listAction: 'AreaController?action=list'+pval

As you said that
        $(document).ready(function () { only fired at the beginning once and hence probably fixing the URL with initial passing parameters of pval.


Regards

MJ
0
 
ValeriCommented:
probably this is because once the listAction is initialised, it's one and the same.
Check this: http://www.jtable.org/Demo/FunctionsAsActions
I hope it will help you.
0
 
jogmilAuthor Commented:
Ok Sir, I will check it and will come back to you.

Regards

MJ
0
 
jogmilAuthor Commented:
Sir,
The document you have given is very good and I am keeping it in my repository for future use but  I am unable to resolve the issue with the help this document.

Mean while I turned to different way and got some other issue which I raised in second unattended question. The title is 'Unable to set Column Width on Dynamic table'. If you can help me on this it will be a great releaf for me.

Please help.

Regards

MJ
0
 
jogmilAuthor Commented:
Sir,
Even I will close this question by allotting full points to you as you sincerely supported me to resolve the issue with full attention.

Regards

MJ
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 30
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now