0

What does it mean if you cannot expand a DOM node in the Chrome Elements view tool?

I have manually appended a very long string of html containing nested elements, but when I view the rendered page and examine the elements, only the first level element exists, with a ... for the text field. When I try to expand the selection to see the inner contents, the closing tag for the only visible element goes away, and none of the contents appear visible.

Any ideas? Malformed HTML? I really don't think it's incorrectly formatted... I am using jQuery Mobile for this.

EDIT: Here is how I got the page to render what I wanted.

$('#myID').append( 
    '<li id="'+id+'" name="chat2" dsid="chat2_'+j+'" class="'+currentPage+'_chat2 ui-li-static ui-body-inherit ui-btn-up-a ui-first-child" data-icon="false">
       <div class="ui-li-static-container">
          <div class="'+currentPage+'_itemGrid2_wrapper" data-wrapper-for="itemGrid2" dsrefid="chat2" _idx="_'+j+'">
             <table id="'+currentPage+'_itemGrid2" class="'+currentPage+'_itemGrid2" dsid="itemGrid2" name="itemGrid2" cellpadding="0" cellspacing="0">
               <colgroup>
                  <col style="width:auto;">
                  <col style="width:172px;">
               </colgroup>
               <tbody>
                  <tr class="'+currentPage+'_itemGrid2_row_0">
                    <td id="'+currentPage+'_picCell2_'+j+'" name="picCell2" class="'+currentPage+'_picCell2" colspan="1" rowspan="1">
                      <div class="cell-wrapper"><img class="'+currentPage+'_itemImage2"src="'+image+'" id="'+currentPage+'_itemImage2" dsid="itemImage2" name="itemImage2">
                      </div>
                   </td>
                   <td id="'+currentPage+'_Cell2_'+j+'" name="Cell2" class="'+currentPage+'_Cell2" colspan="1" rowspan="1">
                     <div class="cell-wrapper">
                       <div name="sellerName" id="'+currentPage+'_sellerName" dsid="sellerName" data-role="appery_label" class="messagePerson  '+currentPage+'_sellerName">'+sellerName+'</div>
                       <div name="lastMessage2" id="'+currentPage+'_lastMessage2" dsid="lastMessage2" data-role="appery_label" class="'+currentPage+'_lastMessage2">'+message+'</div>
                       <div name="productID2" id="'+currentPage+'_productID2" dsid="productID2" data-role="appery_label" class="'+currentPage+'_productID2">'+productID+'</div>
                       <div name="messageID2" id="'+currentPage+'_messageID2" dsid="messageID2" data-role="appery_label" class="'+currentPage+'_messageID2">'+messageID+'</div>
                     </div>
                   </td>
                 </tr>
               </tbody>
            </table>
         </div>
      </div>
  </li>');

Figured I'de put the whole in there in case of syntax..

EDIT2:

The only reason I am doing this clunky solution is because I can't append a collapsed DOM js variable.

for(var i = 0; i < this.cache[0].length; i++){ 
  var div = Appery("chat1").clone(); 
  div.attr("id",currentPage+"_chat1_"+i); 
  div.find(Appery("messageID")).text(this.cache[0][i]._id); 
  div.find(Appery("buyerName")).text(this.cache[0][i].user_name); 
  div.find(Appery("productID")).text(this.cache[0][i].productID); 
  Appery("allChats1").append(div); 
}
bneigher
  • 818
  • 4
  • 13
  • 24
  • are you sure it was appended as html? it might have just been appended as a text node – kennypu May 05 '14 at 08:35
  • I appended a very long string in the format of html. Is there a way to convert the string to the appropriate type? – bneigher May 05 '14 at 08:43
  • appended how? javascript? show us how you're appending it – kennypu May 05 '14 at 08:44
  • let me add that when I try to run jQuery.find("") on anything in this node it returns undefined. But the page renders the node fine – bneigher May 05 '14 at 08:55
  • 1
    that piece of code shouldn't even work as you can't have carriage returns (new lines) in a javascript string – kennypu May 05 '14 at 08:58
  • @kennypu this was done to make it readable.. The actual string doesn't have carriage returns. Also, are you sure about that because I tried \n after each tag already to see if it would do anything and it made no change... Perhaps I needed \\n to break it – bneigher May 05 '14 at 09:04
  • \n is fine, just the actual character (pressing enter) will break. see http://stackoverflow.com/questions/10154429/javascript-string-with-new-line-but-not-using-n – kennypu May 05 '14 at 09:06
  • It's a good idea to check your console for JS errors... – Alexander Pavlov May 05 '14 at 12:02
  • what does the html string look like that you're passing in as a variable? I think I understand what you were saying earlier. Can you paste in your variable declaration expression? – Alex Neigher May 05 '14 at 18:23
  • @AlexNeigher I have uploaded the old (cleaner) solution that didn't append anything to the DOM – bneigher May 05 '14 at 18:34
  • Where Appery('chat1') is equivalent to $('#chat1') – bneigher May 05 '14 at 18:36
  • @bneigher, why are you calling .text() and not .value()? what type of DOM element is `div.find(Appery("messageID"))` targeting? – Alex Neigher May 05 '14 at 18:59
  • It is targeting an HTML5 label tag, and .text(1) modifies that value. The find(1).text(1) logic indeed works, as selecting those modified values in this context successfully reflects the changes. – bneigher May 05 '14 at 19:03

0 Answers0