jqGrid concatenating/building html tag incorrectly

Question

Please excuse the length of this 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 concatenating 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 what direction to take to fix it. Any suggestions would be greatly greatly appreciated.

Answer 1

it seems to me that the statemant

$('#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>");

inside of onSelectRow should be a little changed to use more " instead of ' (or you should use double '):

$('#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>");

you can see in the colors on stackoverflow.com that now everything look more correct.