Solved

Refresh of data in jTable jQuery in JSP

Posted on 2014-04-15
47
2,321 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
  • 30
  • 15
47 Comments
 
LVL 16

Expert Comment

by:Valeri
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Please Help.

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
Please Help

MJ
0
 

Author Comment

by:jogmil
Comment Utility
Dear Sir,
Please help. I need your support urgently.

Regards

MJ
0
 
LVL 16

Expert Comment

by:Valeri
Comment Utility
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
Comment Utility
Thanks.

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

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
Probably I made the necessary changes correctly as you suggested. Please advice.

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I Put the alert in getdata() function and checked. alert not giving any message.

MJ
0
 
LVL 16

Expert Comment

by:Valeri
Comment Utility
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
Comment Utility
Sir,

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

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
With changes as suggested the alert not showing the message.

MJ
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 16

Expert Comment

by:Valeri
Comment Utility
which one is the original one?
0
 

Author Comment

by:jogmil
Comment Utility
before comment ID: 40003940

Regard
0
 
LVL 16

Expert Comment

by:Valeri
Comment Utility
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
Comment Utility
ok. Please wt.

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
Sir,

It is invoking.

Regards
0
 

Author Comment

by:jogmil
Comment Utility
Sir,

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


Regards
MJ
0
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
The servlet is invoking but always with same parameter.

Regards

MJ
0
 
LVL 16

Expert Comment

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

Expert Comment

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

Expert Comment

by:Valeri
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sir,
I will check and will come back to you.

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Ok Sir, I will check it and will come back to you.

Regards

MJ
0
 

Author Comment

by:jogmil
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now