Solved

Refresh of data in jTable jQuery in JSP

Posted on 2014-04-15
47
2,531 Views
Last Modified: 2014-08-04
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
Comment
Question by:jogmil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 30
  • 15
47 Comments
 
LVL 16

Expert Comment

by:Valeri
ID: 40003405
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
 

Author Comment

by:jogmil
ID: 40003621
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40003647
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:jogmil
ID: 40003683
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40003696
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
 

Author Comment

by:jogmil
ID: 40003940
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
 

Author Comment

by:jogmil
ID: 40005790
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
 

Author Comment

by:jogmil
ID: 40005881
Please Help.

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40005957
Please Help

MJ
0
 

Author Comment

by:jogmil
ID: 40005970
Dear Sir,
Please help. I need your support urgently.

Regards

MJ
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006008
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
 

Author Comment

by:jogmil
ID: 40006029
Thanks.

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

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006062
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
 

Author Comment

by:jogmil
ID: 40006064
Probably I made the necessary changes correctly as you suggested. Please advice.

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006091
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40006106
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
 

Author Comment

by:jogmil
ID: 40006123
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
 

Author Comment

by:jogmil
ID: 40006127
Sir,

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

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006128
I Put the alert in getdata() function and checked. alert not giving any message.

MJ
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006157
do you mean that getdata() is not invoked when selection is changed? probably onchange of the select doesn't work?!
0
 

Author Comment

by:jogmil
ID: 40006174
Sir,

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

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006176
With changes as suggested the alert not showing the message.

MJ
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006186
which one is the original one?
0
 

Author Comment

by:jogmil
ID: 40006205
before comment ID: 40003940

Regard
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006235
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
 

Author Comment

by:jogmil
ID: 40006240
ok. Please wt.

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006251
Sir,

It is invoking.

Regards
0
 

Author Comment

by:jogmil
ID: 40006255
Sir,

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


Regards
MJ
0
 

Author Comment

by:jogmil
ID: 40006263
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40006266
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
 

Author Comment

by:jogmil
ID: 40006280
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
 

Author Comment

by:jogmil
ID: 40006289
The servlet is invoking but always with same parameter.

Regards

MJ
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006294
@ID: 40006263
no, there is something wrong, $(document).ready(function () can't be inside another function.
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006298
same parameter or same parameterS ? because I can see that url has many parameters
0
 
LVL 16

Expert Comment

by:Valeri
ID: 40006302
if you invoke the servlet with broser, not from tha application, and the parameters are different, does it return diffferent result?
0
 

Author Comment

by:jogmil
ID: 40006316
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
 
LVL 16

Accepted Solution

by:
Valeri earned 500 total points
ID: 40006345
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
 

Author Comment

by:jogmil
ID: 40006363
Sir,
I will check and will come back to you.

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40006389
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40006399
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
 

Author Comment

by:jogmil
ID: 40006410
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
 
LVL 16

Expert Comment

by:Valeri
ID: 40006507
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
 

Author Comment

by:jogmil
ID: 40006512
Ok Sir, I will check it and will come back to you.

Regards

MJ
0
 

Author Comment

by:jogmil
ID: 40008269
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
 

Author Comment

by:jogmil
ID: 40008275
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different d…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
This video teaches viewers about errors in exception handling.

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question