jqGrid concatinating/building html tag incorrectly

Posted by Energetic Pixels on Stack Overflow See other posts from Stack Overflow or by Energetic Pixels
Published on 2010-06-15T21:17:04Z Indexed on 2010/06/15 21:22 UTC
Read the original article Hit count: 308

Filed under:
|
|
|

Please excuse to length of post. But I needed to explain what I am seeing. I have a onSelectRow option that is supposed to build stacked html <li> tags (such as

<li>...</li>
  <li>...</li>
  <li>...</li>

) up to the number of static xml elements that I am looking at. But my script is concatinating all the image src links together instead of building the whole listobject tag. Everything else in my jqGrid script works with exception of repeated elements inside my xml.

onSelectRow: function() {
    var gsr = $('#searchResults').jqGrid('getGridParam', 'selrow');
    if (gsr) {
     var data = $('#searchResults').jqGrid('getRowData', gsr);
    $('#thumbs ul').html('<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></li>");
};"

my xml file is something like this:

<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>

My script works fine when it only sees one sequence, but when it sees more than one it puts all html inside the tags together then for the caption and title does the same for them. It generates only one <li></li> tag set instead of 5 in the example above like I want.

The <li> tags are being used by a slideshow (with thumbnails) utility.

Inside firebug, I can see the object that it is built for me:

<a title="Side view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridge" href="weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg" class="thumb"><img alt="Side view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridge" src="weaponLib/stillMedia/thumbs/A106.jpgweaponLib/stillMedia/thumbs/A106_A.jpgweaponLib/stillMedia/thumbs/A106_B.jpgweaponLib/stillMedia/thumbs/A106_C.jpgweaponLib/stillMedia/thumbs/A106_D.jpg"></a>

Within jqGrid, the cell is holding:

<td title="weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg" style="text-align: center; display: none;" role="gridcell">weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg</td>

I know that jqGrid is building it wrong. I am double-stumped as to direction to fix it. Any suggestions would be greatly greatly appreciated. tony

© Stack Overflow or respective owner

Related posts about html

Related posts about jqgrid