Question

I am creating a jquery object like so:

 htmlCode = $("<div id='"+data.layoutDescriptions[i].id+"'></div");

It seems to be missing some elements mainly when I am doing this:

if(data.type == "ListView"){

    htmlCode.append("<SELECT property='"+ data.property +"' size="+ data.listProps.length +" multiple>");
    i = 0;
    while(i < data.listProps.length){

        htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");
        i++;
    }
    htmlCode.append("</SELECT>");

} 

where data is a Json object.

When i do this as a string it works. e.g.
instead of

htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");

i would do

htmlCode = htmlCode + "<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>";

I want to find out what is missing so I want to see the Object
i have tried the following:

alert(JQuery.htmlCode.stringify());

alert(htmlCode.html);

Nether work.

Any Ideas??

Thanks.

Answer 1

Your first line of code

htmlCode = $("<div id='"+data.layoutDescriptions[i].id+"'></div");

declares the variable htmlCode as a jQuery object containing a single <div> element (defined by the HTML you passed to the function).

When you call

htmlCode.append("<SELECT property='"+ data.property +"' size="+ data.listProps.length +" multiple>");

you’re appending a <select> element (again, defined by the HTML passed to the function) to the end of that <div> element, which works fine.

However, when you call

htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");

you’re also appending an <option> to the <div> element, not to the <select> element which is what you want.

It seems like you’re trying to build a HTML string using a jQuery object and the .append() function, but that’s not what jQuery does. jQuery works with actual elements, it just lets you pass HTML to create them.