Within a view I have a partial view. My view holds a list of open IT Tickets. When I click on one of the open tickets, the partial view loads with the ticket details along with any comments that have been added. I am using JQuery/Ajax to load the partial view.
In the ticket details there is a button that runs another JQuery/Ajax script that goes back to the controller to add the comment and then renders the partial view again so that the comment shows up right after the user enters it. This is working almost perfectly. When the user clicks the button to add the comment, it is added and displayed on the page. But, if you click a different ticket and then back to the previous one, the newest comment is gone. Yet it is in the database. Also, if I stop the site via Visual Studio and restart it, the comment is there. So I think there is just something wrong in my logic in displaying the updated data.
The JQuery Script that adds the comment with in the Details View:
$(function () {
$("#AddComment").unbind('click').click(function (){
var tickid = @Html.Raw(Json.Encode(Model.TicketID));
var commenttext = $("#txtAddComment").val();
var creator = "Java";
$.ajax({
url: '@Url.Action("AddCommentToTicket", "HelpDesk")',
data: { 'ticketID': tickid, 'comment': commenttext, 'creator':creator },
type: 'GET',
success: function (result) {
$("#loadpartial").html(result);
}
});
})});
The Controller where the data is reloaded:
public PartialViewResult SelectTicketView(int ticketID)
{
Tickets model = new Tickets();
ViewBag.CategoryList = Category.GetCategories();
ViewBag.StatusList = TicketStatus.GetStatusList();
model = Tickets.GetTicketByID(ticketID);
model.TicketComments = new List<Comments>();
model.TicketComments = Comments.GetCommentsForTicketByID(ticketID);
//model.TicketComments = Comments.GetCommentsForTicketByID(ticketID);
//ViewBag.TicketComments = Comments.GetCommentsForTicketByID(ticketID);
return PartialView("TicketDetails", model);
}
My Main View (index) that holds the list of Tickests. Also the JQuery code that grabs which ticket to show the details:
@Model MVCPage.Models.Tickets
<script>
$(function () {
$(":radio").on('click', function () {
var value = $(this).val();
$.ajax({
url: '@Url.Action("SelectTicketView", "HelpDesk")',
data: { 'ticketID': value },
type: 'GET',
success: function (data) {
$("#loadpartial").html(data);
}
});
});
});
<div id="TicketList">
<table id="tblTickets">
<tr>
<th>Ticket #</th>
<th>Created By</th>
<th>Title</th>
<th>Submitted</th>
<th>Category</th>
</tr>
@foreach (var item in Model.OpenTicketList)
{
<tr>
<td>
@Html.RadioButtonFor(m => m.TicketID, item.TicketID, new { @class = "radioBtn" })@item.TicketID.ToString()
</td>
<td>
<label>@item.Creator.ToString()</label>
</td>
<td>
<label>@item.Title.ToString()</label>
</td>
<td>
<label>@item.DateCreated.ToString()</label>
</td>
<td>
<label>@item.Cat.CategoryDesc.ToString()</label>
</td>
</tr>
}
</table>
My Partial View that is within the main view (index). It holds the details of the selected ticket and comments related to the ticket:
@Model MVCPage.Models.Tickets
<div id="divSelectedTicket" class="ContentColumn">
<fieldset>
<legend>Ticket Details</legend>
<div class="CommentColumns">
<div class="LeftColumn">
<label id="lblActiveTicketTitle">Title</label>
</div>
<div class="RightColumn">
@Html.TextBoxFor(m =>m.Title)
</div>
</div>
<div class="CommentColumns">
<div class="LeftColumn">
<label id="lblCreatedBy">Created By</label>
</div>
<div class="RightColumn">
@Html.TextBoxFor(m =>m.Creator)
</div>
</div>
<div class="CommentColumns">
<div class="LeftColumn">
<label id="lblCategory">Category</label>
</div>
<div class="RightColumn">
@Html.DropDownListFor(m => m.Cat.CatID, new SelectList(ViewBag.CategoryList, "CatID", "CategoryDesc"))
</div>
</div>
<div class="CommentColumns">
<div class="LeftColumn">
<label id="lblTickStatus">Status</label>
</div>
<div class="RightColumn">
@Html.DropDownListFor(m =>m.StatusID, new SelectList(ViewBag.StatusList, "StatusID","StatusDesc"))
</div>
</div>
<div class="CommentColumns">
<div class="LeftColumn">
<label>Description</label>
</div>
<div class="RightColumn">
@Html.TextAreaFor(m =>m.Description)
</div>
</div>
</fieldset>
</div> <!-- Closer for #divSelectedTicket !-->
<div id="divSelectedTicketComments" class="ContentColumn">
<fieldset>
<legend>Ticket Comments</legend>
<div class="CommentColumns">
<div class="LeftColumn">
<label>Add Comment</label>
</div>
<div class="RightColumn">
<textarea id="txtAddComment"></textarea>
<input type="button" id="AddComment" value="Add" />
</div>
</div>
<div id="divComments">
@foreach(var comment in Model.TicketComments)
{
@Html.TextAreaFor(m=>comment.CommentText, new {@class= "CommentTextBox"})
<div class="CommentColumns">
<div class="LeftColumn">
<label>@comment.DateAdded</label>
</div>
<div class="RightColumn">
<label>@comment.CreatedBy</label>
</div>
</div>
}
</div>
</fieldset>
</div>
you need to provide more of your partial view and your container view. You are correct, the problem is how you setup your partial view in a View and how your jquery is updating the content. Please provide more of the Views.
here's my assumption - the jquery codes above are from TicketDetails Partial View? The reason for this is because of var tickid = @Html.Raw(Json.Encode(Model.TicketID)); And the SelectTicketView Action is invoked via another Jquery which will show the Ticket Details?
more can be answered if I see more codes.
UPDATE
Based on your new codes, I can somewhat guess its behavior. But still some strange behavior vs what you said.
Your main View will generate a Tickets list. and each of these ticket list contains radio button which is wired to an ajax event. When the user clicks on the radio button, your ajax will get ticket details based on the ID. so far so good.
When the user click "AddComment", it supposedly sends to the comment to your MVC action and adds it in to DB.
I have a few question:
$("#loadpartial").load(data)Put this in your main view:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
});