jQuery Grid Plugin - jqGridForum

02/06/2010
23:11

Energetic Pixels

Lexington, OK, USA

Member

Members

Forum Posts: 40

Member Since:
12/04/2010

Offline

1

I have a jqGrid application working so far. Until today.

My grid application goes out and pulls in a static xml file and then through colModel and onSelectRow 'parses' this data into specific divs and 'p's. I had everything working until I tried to iterate through a specific area of my xml file. This area has the possibility to repeat, ie.,

<photo>
                <pic>
                    <asset>weaponLib/stillMedia/slides/A106.jpg</asset>
                   <thumb>weaponLib/stillMedia/thumbs/A106.jpg</thumb>
                    <caption>Side view of DODIC A106</caption>
                    <title>Side view of 22 caliber long rifle ball cartridge</title>
                </pic>
                <pic>
                    <asset>weaponLib/stillMedia/slides/A106_A.jpg</asset>
                   <thumb>weaponLib/stillMedia/thumbs/A106_A.jpg</thumb>
                    <caption>Side view of DODIC A106</caption>
                    <title>Side view of 22 caliber long rifle ball cartridge</title>
                </pic>
               <pic>
                    <asset>weaponLib/stillMedia/slides/A106_B.jpg</asset>
                   <thumb>weaponLib/stillMedia/thumbs/A106_B.jpg</thumb>
                    <caption>Side view of DODIC A106</caption>
                    <title>Side view of 22 caliber long rifle ball cartridge</title>
                </pic>
               <pic>
                    <asset>weaponLib/stillMedia/slides/A106_C.jpg</asset>
                   <thumb>weaponLib/stillMedia/thumbs/A106_C.jpg</thumb>
                    <caption>Side view of DODIC A106</caption>
                    <title>Side view of 22 caliber long rifle ball cartridge</title>
                </pic>
               <pic>
                    <asset>weaponLib/stillMedia/slides/A106_D.jpg</asset>
                   <thumb>weaponLib/stillMedia/thumbs/A106_D.jpg</thumb>
                    <caption>Side view of DODIC A106</caption>
                    <title>Side view of 22 caliber long rifle ball cartridge</title>
                </pic>
            </photo>

I am taking this data and forming <li></li> and <div></div> pairs in a specific structure. My code works wonders when there is only one <pic>. but when I have 2 or more <pic> nodes my code breaks.

Here is the specific onSelectRow in question:

$('#picListItems').each(function() {
                                           .append("<li><a class='thumb' href='" + data.piclocation + "' title='" + data.pictitle + "'><img src='" + data.picthumb + "' alt='" + data.pictitle + "' /></a>")
                                           .append("<div class='caption'><div class='image-title'>" + data.pictitle + "</div><div class='image-desc'>" + data.piccaption + "</div></div></li>");
                                           });

Again my code works wonders when I set it up for one .append function cycle. But when I add in the .each() code to incorporate more than one <pic> iteration, all I get is the 4 data.piccaption showing up in the DOM. What am I doing wrong?? Please excuse me if this seems like a simple problem. I am fairly new at jQuery and broadening my horizons the hard way.

I have this whole application up on line if you care to use firebug. Maybe I have a bigger problem than what I think. website is http://www.serco-hrc.com/testM.....index.html.

Click Small Arms menu item. Then choose the row containing A106. When the next page comes up, click the Slideshow link in the upper left hand corner of the tab area.

Tony

Confused

04/06/2010
19:33

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

Your code produces error and I can not lunch the menu action.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

04/06/2010
19:58

Energetic Pixels

Lexington, OK, USA

Member

Members

Forum Posts: 40

Member Since:
12/04/2010

Offline

3

Good Evening Tony,

Thanks for taking a look at my code. Sorry about that. I just put up a new version that does not hang-up. I modified my onSelectRow that specifically deals with my issue. New version (without any each() function) is:

$('#picListItems').append("<li><a class='thumb' href='" + data.piclocation + "' title='" + data.pictitle + "'><img src='" + data.picthumb + "' alt='" + data.pictitle + "' /></a><div class='caption'><div class='image-title'>" + data.pictitle + "</div><div class='image-desc'>" + data.piccaption + "</div></div></li>")
alert(data.piclocation + data.piccaption);

What I was trying to do was if the grid had data in the piclocation, iterate over that part of the column model and each time it found new data, do the append function above. This way I should produce multiple <li></li> sets within the DOM.

my script works as advertised as long as I only have one iteration of picture data. Problem occurs when I have 2 or more pictures and thus 2 or more 'data sets' that need to be displayed.

The alert box that is scripted is only for testing purposes for now.

Tony Confused

04/06/2010
20:47

Energetic Pixels

Lexington, OK, USA

Member

Members

Forum Posts: 40

Member Since:
12/04/2010

Offline

4

Tony,

I think I figured out where my problem is. I just don't know how to fix it.

When I look at the table that jqGrid creates on the fly and look at the data within the cell for say Row 3 (dodic A106), jqGrid is taking all the data within the piclocation (3 of them) and concatinating them.

Since <pic> element (and all of its sub elements) from my xml file could be repeated, I turned on (true) jqGrid's repeatitems. When this is set to true, my grid generation just hangs and does nothing with rendering the table.

I read in the documentation where repeatitems and cell work in conjunction with each other. When I set repeatitems to true and then set cell to pic (it is one of the elements that could repeat), jqGrid only renders the pic element and nothing else. Not what I want.

Only thing that I can think of to do now is to set up a subgrid to handle this repeating xml element. Is this the right path??

Tony

08/06/2010
02:46

Energetic Pixels

Lexington, OK, USA

Member

Members

Forum Posts: 40

Member Since:
12/04/2010

Offline

5

Hi Tony,

Ok, I have uploaded the latest and greatest of my application. Works as advertised with my one exception. I am needing to append the DOM so that piclocation, piccaption and picthumb turn into a <li>. This works when there is only 1 picture in the xml file. But my problem arises when there are more than one item. How do I loop through my specific onSelectRow method, create the <li></li> sequences and then keep looping through until there are no more piclocations in the xml file for that particular row??? I worked all weekend. The closest I came was to turn the repeatitems and cell items on in the xmlReader. but this destroys proper data being displayed. I know the data is being recovered from the xml file, but it is concatinated wrong.

my online application.

tony Cry