Solved

Refresh of data in jTable jQuery in JSP

Posted on 2014-04-15
47
2,466 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
maximize the sum of fractions 33 72
object method as an event handler 8 72
Difference between Highcharts and Mapbox 10 43
My tooltip is not displaying correct 11 7
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers learn about the “for” loop and how it works in Java. By comparing it to the while loop learned before, viewers can make the transition easily. You will learn about the formatting of the for loop as we write a program that prints even numbers…
Video by: Michael
Viewers learn about how to reduce the potential repetitiveness of coding in main by developing methods to perform specific tasks for their program. Additionally, objects are introduced for the purpose of learning how to call methods in Java. Define …
Suggested Courses

738 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