search

awaisalvi / struts2-jquery

Automatically exported from code.google.com/p/struts2-jquery
0 stars 0 forks source link

Loading Grid in sj:tab does not render grid #87

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Create an sj:tabbedpanel with 2 or more sj:tab
2. Ensure that each sj:tabl invokes a call to load an sj:grid
3. Please make sure each of your tab loads a different sj:grid

What is the expected output? What do you see instead?
When clicking on each tab, the corresponding grid in that tab should load.

What happens is only the first tab loads the grid properly. when clicking 
on the 2nd or 3rd tab, the jsp behind the tab loads fine but the sj:grid 
does not. Note The action behind that specific grid that does not load 
does execute.

Which struts2 version?
2.1.8.1

Which struts2-jquery plugin version?
1.8.2

Please provide any additional information below.

I have put this in the forum but no one seems to know why it doesnt work:

http://www.trirand.com/blog/?page_id=393/help/struts2-jquery-tabs-calling-
pages-with-jgrid-issue/

Original issue reported on code.google.com by ramfrombo@gmail.com on 10 Feb 2010 at 6:17

Attachments:

GoogleCodeExporter commented 9 years ago 
I have try it but in my cases it works.

I Change the tabs.jsp in showcase so 
that they lod the grid-edit and grid-multi action.
And each of this works fine.

    <s:url id="remoteurl1" action="grid-edit"/>
    <s:url id="remoteurl2" action="grid-multi"/>
    <s:url id="remoteurl3" action="ajax3"/>
    <s:url id="remoteurl4" action="ajax4"/>
    <sj:tabbedpanel 
        id="remotetabs" 
        spinner="Please wait ..." 
        disabledTabs="[3,4]" 
        onCompleteTopics="tabcomplete" 
        onChangeTopics="tabchange"
    >
      <sj:tab id="tab1" href="%{remoteurl1}" label="Tab One" />
      <sj:tab id="tab2" href="%{remoteurl2}" label="Tab Two"/>
      <sj:tab id="tab3" href="%{remoteurl3}" label="Tab Three"/>
      <sj:tab id="tab4" href="%{remoteurl4}" label="Tab Four"/>
      <sj:tab id="tab5" href="%{remoteurl1}" label="Tab Five"/>
    </sj:tabbedpanel>
  </div>

Did your secound grid renders without tabs?

Original comment by johgep on 10 Feb 2010 at 8:50

GoogleCodeExporter commented 9 years ago 
Yes my grid renders fine withouth tabs. My 3 tabs are in 3 seperate jsp pages. 
when 
I invoked them individually(withouth tabs) it works fine. However, when I put 
them 
to be in a tabbed pane, only the 1st renders. Very strange why the 2nd and 3rd 
tabs 
will fire the action but the tabs dont render?

I have attached a jsp page that I use to render my grid. All the other tabs 
load up 
similar grids in their own respective jsp pages.

Very very strange indeed! I have tried this on both Firefox 3.6 & also IE 8

any assistance?

Original comment by ramfrombo@gmail.com on 10 Feb 2010 at 9:53

Attachments:

GoogleCodeExporter commented 9 years ago 
In my last post, I meant the GRIDS dont render.

Original comment by ramfrombo@gmail.com on 10 Feb 2010 at 9:55

GoogleCodeExporter commented 9 years ago 
Can you please try the current SNAPSHOT for release 2.0.0?
Maybe it is a Bug in jquery ui.

In version 2.0.0 the jquery ui lib is the current RC for 1.8.

http://struts2-jquery.googlecode.com/svn/maven/snapshots/

Original comment by johgep on 10 Feb 2010 at 11:03

GoogleCodeExporter commented 9 years ago 
For tests please use the theme smoothness, because this is the only theme of 
new 1.8
jquery ui release.

Original comment by johgep on 11 Feb 2010 at 6:24

GoogleCodeExporter commented 9 years ago 
When I go to the link above & click on the 
struts2-jquery-plugin-2.0.0-SNAPSHOT.jar 
the file downloaded is a zip file(not jar).
I have tried to extract and use jar -cf to create a new jar file so that I can 
add 
in my webinf folder, but for some unknown reason my jar command is not 
working!(very 
strange, something to do with permissions & windows7).
So I have not been able to test with this new version. Is there anyway, I could 
get 
the jar version of this plugin to test this tab thing?

thanks

Original comment by ramfrombo@gmail.com on 12 Feb 2010 at 5:24

GoogleCodeExporter commented 9 years ago 
When I try to download it, I get an jar file.
Can you just rename the zip to jar?

Original comment by johgep on 12 Feb 2010 at 5:36

GoogleCodeExporter commented 9 years ago 
I tried that already, but for some reason when I do that and deploy in my 
webapp, i 
cant use any part of the jquery plugin. I get no error from firefox detailing 
the 
problem. pages with use tags of the jquery plugins dont work. I'll try again in 
the 
morning that see If I notice anything strange.

Original comment by ramfrombo@gmail.com on 14 Feb 2010 at 11:55

GoogleCodeExporter commented 9 years ago 
well I couldnt wait until the morning so tried it now :-)
I downloaded the zip file and renamed as jar. I replaced the plugin.jar in the 
1.8.1 
showcase with this new verison & it seems to work fine.

When I replace it in my own web app, it initially didnt seem to have any 
effect.(ie: 
when I click on any sj:a link, nothing happenend(no javascript error, nothing). 
Hence that is why I thought renaming in my previous post didnt work & maybe 
something got corrupted)

With this new version, in firefox I get an error saying that ajaxhistory is 
undefined
(line 1397 jquery.struts2.js). 
However I do have it set to false(I have done very similar to what is in the 
showcase 1.8.1 with having the index.jsp containing a div with all these 
settings). 
No action is executed when I click on the link.

In IE, when I do click on the link I get this error in my app console:
java.lang.NoSuchMethodError: 
com.jgeppert.struts2.jquery.views.jsp.ui.GridColumnTag.setValidate
(Ljava/lang/String;)V

When I go back and use plugin version 1.8.2 & all works fine(apart from the 
tabbed 
pane loading a grid!)

Im at a loss as to what is happening :-(

Original comment by ramfrombo@gmail.com on 15 Feb 2010 at 1:10

GoogleCodeExporter commented 9 years ago 
Are you sure, you have only one jquery plugin in your lib path? 
This sounds like miss configuration. 

The GridColumn Tag has no more Attribute "validate", please remove it.
Also the error with "ajaxhistory" should not be raised with latest
plugin jar.

Original comment by johgep on 15 Feb 2010 at 5:41

GoogleCodeExporter commented 9 years ago 
Ok I managed to sort out the problem with using the new plugin snapshot 
version. Now 
I am defintely using it. However the tabbed pane holding my grids is still not 
working. Same result really as the previous plugin version 1.8.2.

I removed the validate attribute from all of my grids. Here is what I have 
noticed.
Only the first tab gets loaded property(i.e: the href attribute of the first 
grid 
executes).

When I click the other tabs,(<s:url id="remoteurl2" 
action="go....GridAction"/>), it 
executes fine to take me to the correct tab. 
However, as the subsequent page loads for the tab, the href attribute within 
the 
grid does not execute. Again this only happens if its not the 1st tab.

I have also noticed that when I click on all the tabs, I get an error in 
firefox for 
jquery-ui-1.8.js line 9002 o.ajaxOptions.success(r,s) is not a function. I am 
thinking this error might be affecting the execution of href attribute of the 
grid 
loading, although I am not sure. (I have tested this with both ajaxhistory = 
false & 
true just incase)

Please see attached files as to what my tabbed pane looks like after I select 
the 
tabs. 

Some other tests carried out:

Test 1: If I re-arrange the order of the tabs, still only the 1st tab renders 
properly. This then tells me that my jsps for all my tabs are fine.

Test 2: I put all the tabs to point & to execute the same action(all the s:url 
have 
the same action) and still the same result. Only the first tab works properly.

Thanks for any assitance.

Original comment by ramfrombo@gmail.com on 16 Feb 2010 at 1:10

Attachments:

GoogleCodeExporter commented 9 years ago 
I am having the same problem.

The reason is the grid is loaded using "$(document).ready()". This isn't fired
because the document has already finished loading.

Original comment by RobLovel...@gmail.com on 11 Mar 2010 at 12:15

GoogleCodeExporter commented 9 years ago 
So is there anything I can do on my part to fix this or is it a case of waiting 
for 
a fix in the plugin?

Original comment by ramfrombo@gmail.com on 15 Mar 2010 at 12:03

GoogleCodeExporter commented 9 years ago 
currently i was not able to reproduce this problem.

It helps a lot if anyone can attach a example that runs in the showcase.

Original comment by johgep on 15 Mar 2010 at 4:46

GoogleCodeExporter commented 9 years ago 
Just upgraded to the latest release and I am still getting the same problem.
If Robloveluck is correct and its because of the $(document).ready() issue, is 
there 
something i can do to maybe make this unready on click of each tab or something 
to 
that effect?

Original comment by ramfrombo@gmail.com on 5 Apr 2010 at 12:13

GoogleCodeExporter commented 9 years ago 
Just a quick udate on this... it now seems to work in my app.. I havent changed 
anything and now it works. If I get a siilar problem as I implement this again 
troughout my app,  I will update.

One thing I have noticed in the tab.. it makes the font extremely big!.. why is 
this 
happening? I a using the Redmond theme...when the pages are not in the tab the 
font 
is fine but as soon as I put it to be part of a tab.. the font becmomes much 
bigger? 
Is this a bug or how can I fix this?
Also, with this bigger font... If i have a screen with 2 or more grids... the 
tabbing makes the width much bigger than what i want.

any help on this?
thanks

Original comment by ramfrombo@gmail.com on 30 Apr 2010 at 3:37

GoogleCodeExporter commented 9 years ago 
Hi ramfrombo,

I got the same problem here with calendar and submit buttons, I have fixed it 
loading a custom css which sets 
the font-size to 12px (something like body { font-size: 12px } ). Although it 
would be nice if I haven't had to put 
that custom css and everything worked fine out of box.  :)

Original comment by jcar...@gmail.com on 1 May 2010 at 5:23

GoogleCodeExporter commented 9 years ago 
this sounds good! 
Do you have updated the struts2-jquery-plugin to version 2.0.0?
Maybe the latest jQuery UI solve your problem.

Your CSS problem should you Announce in the jQuery forum,
this is a better place for such thinks.

I will close this Issue, but i will open it again when 
there comes bad news about this.

Original comment by johgep on 1 May 2010 at 9:06

GoogleCodeExporter commented 9 years ago 
I have noticed some other issue on the tabbed pane & also an an update on my 
earlir 
issue which still happens in another functional area in my application.

NEW ISSUE
1st set of tabbed pane which works: I have 3 tabs.. which import the same 
javascript 
file. Each of the jsp pages that are in the tab import like so:
<script type="text/javascript" src="js/qaGrid.js"></script>

In this qaGrid.js I have a function which gets called when I click on a certain 
cell 
in a grid:

function goToAddDOC(projectId, uniqueId, qaDocType){
    document.uploadForm.uniqueId.value = uniqueId;
    document.uploadForm.qaDocType.value = qaDocType;            
    document.getElementById('uploadFormButton').click();
}

//below is the code for the form in each jsp:
<sj:div id="fileUploadDiv" cssClass="result ui-widget-content ui-corner-all"/>  

<s:form id="uploadForm" action="showUploadQA" theme="simple" cssClass="yform"   

namespace="/qa">

<s:hidden id="uniqueId" name="uniqueId" value="1"/>
<s:hidden id="qaDocType" name="qaDocType" value="NDT"/>         
</s:form>
...............
...........             
</div>

It seems that this funcctionality works only once and then after that when I go 
to 
another tab(jsp) and try to click on that cell to invoke this function, I get 
the 
following javascript error:
document.uploadForm.uniqueId is undefined

Again to re-itterate when these jsps are not in a tab scenario, they all work 
perfectly fine. I am unsure why now, when i am in a tabbed scenario, I get this 
problem. Is there soemthing wrong with the re-initialization of the DOM for 
each 
page maybe?

EARLI ISSUE RE-OCCURING IN ANOTHER FUNCTIONAL AREA
Just a further update. It seems I am getting the same problem as before on 
another 
part of my application. I am yet to fully investigate as to what the difference 
is 
between the jsp pages in the 1st tabbed pane that works and the jsp pages in 
the 2nd 
tabbed pane that doesnt work. Any findings I will post here. I did notice 
though 
that in the tabbed pane that doesnt work, that every time I click on one of the 
tabs, I get an extra Filter row that appears in my original Grid! So if I have 
5 
clicks on any of the tabs, I will get 5 filter rows appearing in my first 
Grid!(Also 
5 Navigator View and 5 Navigator Edit options appear as well!) 

I will investigate further and keep this forum posted.

Original comment by ramfrombo@gmail.com on 10 May 2010 at 10:11

GoogleCodeExporter commented 9 years ago 
please can anyone test this Issue with current SNAPSHOT for Version 2.1.2 ?

There is an refactoring related to Issue 179 that maybe help to solve also this 
Issue.

http://oss.sonatype.org/content/repositories/snapshots/com/jgeppert/struts2/jque
ry/struts2-jquery-grid-plugin/

Original comment by johgep on 31 May 2010 at 4:28

GoogleCodeExporter commented 9 years ago 
I think I have identified the problem as to why problems arise with displaying 
grids in multiple tabs. 

The problem is that if you have grids in different tabs but with the same grid 
Id, the problem occurs. I have had to go through all my jsps and ensure that 
they all have unqie grid Ids. As a matter of fact, I have had to make sure that 
every element in the jsp is unique and doesnt exist in other jsps that appear 
in the tab. Event textfields, dropdowns, etc.

It seems that the DOM created for the tab holds all the elements in all the 
tabs (just as if it was 1 big jsp with all the elements). And so if you have 2 
different jsps with the same elementId (but these 2 jsps are part of the same 
tab), it causes problems.

This is what I have figured out and its taking me a long time to ensure that 
all the elements are unique. Is there anything that can be done so that jquery 
will insert a uniqe prefix identifier infront of each element depending on the 
tab(this will ensure someone doesnt have to go through the process of ensuring 
all elements are unique).

any thoughts on this matter I will appreicate.

Original comment by ramfrombo@gmail.com on 13 Jul 2010 at 10:00

GoogleCodeExporter commented 9 years ago 
to use an id is recommended, but when you don't specify an id the id is random 
auto generated.

Original comment by johgep on 15 Jul 2010 at 6:59