MVC javascript display selected data

Question

First of all, I list the e-mail from coming ActionResult in the first cycle. I want to see the details by clicking on the listed data. I open with the help of jQuery details. The problem arises in this section. in this case ,the opening of the details of the first mail in the detail of each row.

There are details of the message in the second loop.To connect to the two loops in a guid font was 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>
                    &nbsp;
                    <img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32" />
                    &nbsp;
                    <a href="#" class="sender">@item.From</a>

                    &nbsp;
                    <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>
                        &nbsp;
                        <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 two points.

first foreach = <div id="@item.MessageId" class="message-item">

//Places where the problem is. They need to be 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 is open, then close it
    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));

});

what's your question? how to attach the event to .text elements within any .message-item element? it's not very clear. If that's what you want to do, just remove :eq(0) from your selector. Otherwise, I'm not sure what you are asking. — ADyson
– ADyson, Commented Sep 7, 2016 at 13:48
Thank you. I did as you said, all now open. The contents of the first e-mail message I select all displayed. '$('.message-list .message-item .text').on('click', function () {' html($('#id-message-content').html()); — KdrGny
– KdrGny, Commented Sep 7, 2016 at 13:54
ok. You've shown me a line of your code. do you have a question about it? — ADyson
– ADyson, Commented Sep 7, 2016 at 13:59

ADyson · Accepted Answer · 2016-09-09 07:53:13Z

1

Your first problem is that you are creating multiple elements with identical id properties. This makes your HTML invalid.

Here is the 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 your model, this will create 2 <div> elements whose id has the value of the @item.MessageID variable. The second of these is and illegal element because it has the same ID as an earlier element. You will need to make these <div>s have unique IDs.

The second problem is:

When you run

var content = message.find('.message-content:last').html($('#id-message-content').html());

this part: $('#id-message-content').html()

cannot find anything because there is no element whose id is "id-message-content". Also every time you open the message, you are appending another "message-content" div into the message-item. This is not necessary.

To fix these issues, you can change the code like 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="[email protected]">
...

jQuery:

$('.message-list .message-item .text').on('click', function () {
var message = $(this).parents('.message-item');

//if message is open, then close it
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));
});

edited Sep 9, 2016 at 7:53

answered Sep 8, 2016 at 14:51

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

KdrGny Over a year ago

thanks for your answer. But it does not open any item.

ADyson Over a year ago

@KadirGÜNEY sorry there were some small typing errors. I have edited the answer above. Please try again.

KdrGny Over a year ago

I thank you for your interest. Opening and yet within this time came as empty. first loop instance: <div data-messageid="MAIL-SENDER18c6148c967f4ee0a4eb37ca039ebbfc@MAIL-SENDER" class="message-item message-inline-open"> second loop instance: <div class="hide message-content" id="message-content-MAIL-SENDER18c6148c967f4ee0a4eb37ca039ebbfc@MAIL-SENDER">'

ADyson Over a year ago

Remove the "@" from your message id, it will be causing encoding problems. here is a working example: jsfiddle.net/x0hmra12/1 . The first two messages are ok, but the 3rd one has your example ID and fails because of the @. Look in the browser console to see the error when you click message 3. Remove the @ from your ID and it will work.

KdrGny Over a year ago

I understand. But he's coming in messageid. jQuery was an error I made it replaces.

|

KdrGny · Accepted Answer · 2016-09-09 12:41:16Z

0

Solved

 public static class mvcHelper
    {
public static string variableReplace(string id)
        {
            string yazi = null;
            if (id != null)
            {
                yazi = id.Replace('@', 'a').ToString();
            }
            else
            {
                yazi = id;
            }
            return yazi;
        }

    }

<div data-messageid="@mvcHelper.variableReplace(item.MessageId)" class="message-item">

<div class="hide message-content" id="[email protected](item.MessageId)">

answered Sep 9, 2016 at 12:41

KdrGny

14011 bronze badges

Collectives™ on Stack Overflow

MVC javascript display selected data

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related