There is a discussion thread in my page, where a thread has parentID & replies to it are its children. while decorating the HTML, I am fetching data from JSON file, where parentID is mentioned, if it is null it is a parent element, else child need to append at its parent ID 'li' tag. I am not able to put the code exactly which will serve my purpose.
Code : Script :
//Write the data to discussion window
var message = $.parseJSON(data.d);
$("#ui-discussion").html(null);
$.each(message, function (index, item) {
if (item.ParentID == "NULL") {
var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
"<label id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
"<label>" + item.Display_Text + "</label><label id='discussionID'>" + item.DiscussionID + "</label></div></div>";
$('<li class="ui-discussion-parentmessage">' + content + '</li>').appendTo('#ui-discussion');
}
else {
var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
"<label id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
"<label>" + item.Display_Text + "</label></div></div>";
$('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#ui-discussion');
}
Below is my HTML :
<ul id="ui-discussion">
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,
consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Ut</label><label
id="discussionID">983402</label></div>
</div>
</li>
<ul>
<li class="ui-discussion-childmessage">
<div>
<div id="empImage">
<img src="Images/emp2.png"></div>
<div>
<label id="empName">
Vincent Cash</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,consecteturadipisicingelit</label></div>
</div>
</li>
</ul>
<ul>
<li class="ui-discussion-childmessage">
<div>
<div id="empImage">
<img src="Images/emp3.png"></div>
<div>
<label id="empName">
Tucker Montgomery</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,consecteturadipisicingelseddoeiusmod</label></div>
</div>
</li>
</ul>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>Hi</label><label
id="discussionID">590079</label></div>
</div>
</li>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>This is a test message</label><label
id="discussionID">424769</label></div>
</div>
</li>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>New Message</label><label
id="discussionID">255351</label></div>
</div>
</li>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>Hi</label><label
id="discussionID">2030</label></div>
</div>
</li>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi hi hi</label><label
id="discussionID">154860</label></div>
</div>
</li>
<ul>
<li class="ui-discussion-childmessage">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Arti Agarwal</label><label id="chatdate">9/18/2013</label><label></label></div>
</div>
</li>
</ul>
<ul>
<li class="ui-discussion-childmessage">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Arti Agarwal</label><label id="chatdate">9/18/2013</label><label></label></div>
</div>
</li>
</ul>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi</label><label
id="discussionID">282729</label></div>
</div>
</li>
<ul>
<li class="ui-discussion-childmessage">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Arti Agarwal</label><label id="chatdate">9/18/2013</label><label>hi</label></div>
</div>
</li>
</ul>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi</label><label
id="discussionID">587583</label></div>
</div>
</li>
<li class="ui-discussion-parentmessage ui-state-active">
<div>
<div id="empImage">
<img src="Images/emp1.png"></div>
<div>
<label id="empName">
Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>HI</label><label
id="discussionID">395700</label></div>
</div>
</li>
</ul>
change this line $('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#ui-discussion');
to
$('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#' + item.ParentID);
you will also want to give your id to the <li>
of the parent.
to give
var message = $.parseJSON(data.d);
$("#ui-discussion").html(null);
$.each(message, function (index, item) {
if (item.ParentID == "NULL") {
var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
"<label id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
"<label>" + item.Display_Text + "</label><label id='discussionID'>" + item.DiscussionID + "</label></div></div>";
$('<li class="ui-discussion-parentmessage" id="' + item.Enterprise_Id +'">' + content + '</li>').appendTo('#ui-discussion');
} else {
var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
"<label id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
"<label>" + item.Display_Text + "</label></div></div>";
$('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#' + item.ParentID);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.