I'm trying to make a ment section for my site. After a ment has been posted I would like to show it immediately instead of being forced to reload the page. So I need to somehow be able to create div and other elements and later fill them with the relevant data.
$(document).ready(function () {
$("mentAnswer").keypress(function (e) {
if (e.which == 13) {
var mentData = { Value: ($(input).attr("data-answerId")),
Description: ($(input).attr("value"))
};
$.ajax({
type: "POST",
url: '@Url.Action("SubmitComment", "Home")',
data: JSON.stringify(mentData),
dataType: "json",
contentType: 'application/json, charset=utf-8',
traditional: true,
success: function (data) {
//create elements.
}
});
}
});
This the block I want to create.
<div class="mentContent">
<div class="ment">@ment.Comment.Text</div>
<ul>
<li>
<div class="newsTime">@ment.User.FirstName @ment.User.LastName</div>
</li>
<li>- </li>
<li>
<div class="newsTime">
@foreach (var role in ment.CommenterRoles) {
if (role.Role.Equals("Authenticated") || role.Role.Equals("Administrator")) {
//Don't write anything
} else {
@role.Role@:.
}
}
</div>
</li>
<li>- </li>
<li>
<div class="newsTime">
@Project.Tools.TimeTool.ToTimeSinceString(ment.Comment.SubmitDateTime)
</div>
</li>
</ul>
</div>
<hr />
I'm trying to make a ment section for my site. After a ment has been posted I would like to show it immediately instead of being forced to reload the page. So I need to somehow be able to create div and other elements and later fill them with the relevant data.
$(document).ready(function () {
$(".mentAnswer").keypress(function (e) {
if (e.which == 13) {
var mentData = { Value: ($(input).attr("data-answerId")),
Description: ($(input).attr("value"))
};
$.ajax({
type: "POST",
url: '@Url.Action("SubmitComment", "Home")',
data: JSON.stringify(mentData),
dataType: "json",
contentType: 'application/json, charset=utf-8',
traditional: true,
success: function (data) {
//create elements.
}
});
}
});
This the block I want to create.
<div class="mentContent">
<div class="ment">@ment.Comment.Text</div>
<ul>
<li>
<div class="newsTime">@ment.User.FirstName @ment.User.LastName</div>
</li>
<li>- </li>
<li>
<div class="newsTime">
@foreach (var role in ment.CommenterRoles) {
if (role.Role.Equals("Authenticated") || role.Role.Equals("Administrator")) {
//Don't write anything
} else {
@role.Role@:.
}
}
</div>
</li>
<li>- </li>
<li>
<div class="newsTime">
@Project.Tools.TimeTool.ToTimeSinceString(ment.Comment.SubmitDateTime)
</div>
</li>
</ul>
</div>
<hr />
- What does the ajax call return? HTML for a single ment, the entire ments pane? Nothing? – Henry Commented Aug 17, 2011 at 12:29
- it doesn't return anything really. A bool representing wheter or not the operation was successful towards the DB. All the info I need to create the ment exists in either the ViewBag or the ment input. – wardh Commented Aug 17, 2011 at 12:32
- 1 Perhaps consider making it return a partial view containing the markup for a single ment – Henry Commented Aug 17, 2011 at 12:51
4 Answers
Reset to default 4This is a very basic example of how to add ment dynamically. Whitout more information on what data is returned I cant help much more. This makes the assumption that your Action returns a partial view for that single ment.
JSFiddle containing example markup: http://jsfiddle/HenryGarle/SMbxk/
// This is what you would add to your success call - Assumes that your action method returns a parial view for the ment
data = "<div class=\"ment\"> Some Example </div>";
$(".mentContent").prepend(data);
My reendations:
Create a partial view that displays a single ment. Inside of your ments do a foreach loop calling the partial passing through a single ment object. i.e:
foreach (var ment in Model.Comments)
{
@Html.Partial("ment", ment);
}
Comment.cshtml:
This is where you place your repeated mark up.
SubmitComment action: Return the partial Comment.cshtml with the newly added Comment
return View("Comment", newCommentObj);
This means there will be no extra data being passed around. The other approach is to take the information posted in and add the markup yourself using the prepend (Or append, depending on your needs) Or as nayish has mentioned, use the clone but again although this is a little more manual and you'll end up managing the markup in two places instead of one. Using these methods would make maintaining it a pain in the long run.
What you need to do is create an area in your page which is hidden and there put any elements you want to multiply and change later:
HTML
<div id="hidden" style="display: none">
<div class="mentContent">
<div class="ment">@ment.Comment.Text</div>
<ul>
<li>
<div class="newsTime"></div>
</li>
<li>- </li>
<li>
<div class="newsTime">
</div>
</li>
<li>- </li>
<li>
<div class="newsTime">
</div>
</li>
</ul>
</div>
</div>
now using jquery clone this div and change the inside of the different list items and plant it wherever you want on the page.
Use the .load() function to load the results of an ajax call to a selector.
If you aim it at an action that returns partial view then you won't have to play with the JSON result to build the HTML to insert into the DOM using the DOM insertion functions:
- http://api.jquery./category/manipulation/dom-insertion-inside/
- http://api.jquery./category/manipulation/dom-insertion-outside/
- http://api.jquery./category/manipulation/dom-insertion-around/
- http://api.jquery./category/manipulation/dom-replacement/
You may want to have a look a this: http://api.jquery./jquery.tmpl/
I think it's still beta, but it made me think about your question.