jquery - MVC javascript display selected data -
first of all, list e-mail coming actionresult in first cycle. want see details clicking on listed data. open of jquery details. problem arises in section. in case ,the opening of details of first mail in detail of each row.
there details of message in second loop.to connect 2 loops in guid font coming. (messageid).
id=messageid (guid type)
mailing list
<div class="message-list-container"> <div class="message-list" id="message-list"> @foreach (var item in model) { <div id="@item.messageid" class="message-item"> <span class="sender" title="@item.from"> @item.from </span> <span class="time">@mvchelper.saatayarla(item.date)</span> @if(item.attachments.any()) { <span class="attachment"> <i class="ace-icon fa fa-paperclip"></i> </span> } <span class="summary"> <span class="text"> @item.subject </span> </span> </div> } </div> </div> mailing details
<!--messsage details--> @foreach (var item in model) { <!-- <div class="hide message-content" id="id-message-content">--> <div class="hide message-content" id="@item.messageid"> <div class="message-header clearfix"> <div class="pull-left"> <span class="blue bigger-125"> @item.subject </span> <div class="space-4"></div> <i class="ace-icon fa fa-star orange2"></i> <img class="middle" alt="john's avatar" src="/areas/admin/content/images/avatars/avatar.png" width="32" /> <a href="#" class="sender">@item.from</a> <i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i> <span class="time grey">@mvchelper.saatgoster(item.date)</span> </div> </div> <div class="hr hr-double"></div> <div class="message-body"> <p> @item.textbody </p> </div> <div class="hr hr-double"></div> <!--eklenti paneli--> <div class="message-attachment clearfix"> @if (item.attachments.any()) { <div class="attachment-title"> <span class="blue bolder bigger-110">eklentiler</span> <span class="grey">(@item.attachments.count() dosya)</span> </div> <ul class="attachment-list pull-left list-unstyled"> @foreach (var attachment in item.attachments) { <li> <a href="#" class="attached-file"> <i class="ace-icon fa fa-file-o bigger-110"></i> <span class="attached-name">@mvchelper.getattachmentname(attachment.tostring())</span> </a> <span class="action-buttons"> <a href="#"> <i class="ace-icon fa fa-download bigger-125 blue"></i> </a> <a href="#"> <i class="ace-icon fa fa-trash-o bigger-125 red"></i> </a> </span> </li> } </ul> } </div> </div><!-- /.message-content --> } <!--eklenti paneli son--> <!--message details end--> loop connecting 2 points.
first foreach = <div id="@item.messageid" class="message-item"> //places problem is. need connected. second foreach = <!-- <div class="hide message-content" id="id-message-content">--> <div class="hide message-content" id="@item.messageid"> var content = message.find('.message-content:last').html($('#id-message-content').html()); jquery code
$('.message-list .message-item .text').on('click', function () { var message = $(this).closest('.message-item'); //if message open, close if (message.hasclass('message-inline-open')) { message.removeclass('message-inline-open').find('.message-content').remove(); return; } $('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>'); settimeout(function () { $('.message-container').find('.message-loading-overlay').remove(); message .addclass('message-inline-open') .append('<div class="message-content" />'); var content = message.find('.message-content:last').html($('#id-message-content').html()); //remove scrollbar elements content.find('.scroll-track').remove(); content.find('.scroll-content').children().unwrap(); content.find('.message-body').ace_scroll({ size: 150, mousewheellock: true, styleclass: 'scroll-visible' }); }, 500 + parseint(math.random() * 500)); });
your first problem creating multiple elements identical id properties. makes html invalid.
here problem code:
@foreach (var item in model) { <div id="@item.messageid" class="message-item"> ... @foreach (var item in model) { <div class="hide message-content" id="@item.messageid"> ... for each message in model, create 2 <div> elements id has value of @item.messageid variable. second of these , illegal element because has same id earlier element. need make these <div>s have unique ids.
the second problem is:
when run
var content = message.find('.message-content:last').html($('#id-message-content').html()); this part: $('#id-message-content').html()
cannot find because there no element id "id-message-content". every time open message, appending "message-content" div message-item. not necessary.
to fix these issues, can change code this:
first loop:
@foreach (var item in model) { <div data-messageid="@item.messageid" class="message-item"> ... <span class="summary"> <span class="text"> @item.subject </span> </span> <div class="message-content" hidden></div> ... second loop:
@foreach (var item in model) { <div class="hide message-content" id="message-content-@item.messageid"> ... jquery:
$('.message-list .message-item .text').on('click', function () { var message = $(this).parents('.message-item'); //if message open, close if (message.hasclass('message-inline-open')) { message.removeclass('message-inline-open').find('.message-content').hide(); return; } $('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>'); settimeout(function () { $('.message-container').find('.message-loading-overlay').remove(); message.addclass('message-inline-open'); var content = message.find(".message-content"); content.show(); content.html($('#message-content-' + message.data("messageid")).html()); //remove scrollbar elements content.find('.scroll-track').remove(); content.find('.scroll-content').children().unwrap(); content.find('.message-body').ace_scroll({ size: 150, mousewheellock: true, styleclass: 'scroll-visible' }); }, 500 + parseint(math.random() * 500)); }); 
Comments
Post a Comment