Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • John Dawson 24 posts 145 karma points
    Jan 30, 2019 @ 15:07
    John Dawson
    0

    How to populate modal with property from range of nodes

    We have a doctype for Team Members and a "Meet the Team" section is populated by iterating through a Multiple Team Member Picker to display their portraits, names and positions. I am trying to get a modal to pop up when you click the portrait of a member to display a short bio.

    The problem I'm having is making each modal correct for the team member you have clicked on. As the layout for the team members is defined in a foreach loop, the modal is loaded after this loop has ended so it just ends up filling in the modal with the bio from the first team member. I hope this is making sense!

    Here's the code for the Partial View:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    @inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
    @using USN.BusinessLogic;
    
    @{
    var teamMembersList = Model.GetPropertyValue("teamMembers").NullSafeToString().Split(',').ToList();
    var count = teamMembersList.Count();
    var index = 1;
    
    <div class="page-component page-component-team-members">
        <div class="row">
            <div class="col-md-12">
                @Html.Partial("USN_BPS_Content", Model, new ViewDataDictionary { { "titleSize", "h2" }, { "spacing", "less" } })
            </div>
        </div>
        <div class="team-list">
                @{
                    if (teamMembersList != null && teamMembersList.Count() > 0)
                    {
                        foreach (var node in Umbraco.TypedContent(teamMembersList))
                        {
                            if (node != null)
                            {
                                var image = node.GetCropUrl("image", "default").NullSafeToString();
                                var name = node.GetPropertyValue("fullName").NullSafeToString();
                                var position = node.GetPropertyValue("position").NullSafeToString();
                                var bio = node.GetPropertyValue("bio").NullSafeToString();
    
                                if (node.GetPropertyValue("image").NullSafeToString() == String.Empty)
                                {
                                    image = VNHelper.GetDefaultAvatar() + "?mode=crop&anchor=center&width=200&height=200";
                                }
    
                                if (name == String.Empty)
                                {
                                    name = node.Name;
                                }
    
                                if (index == 1)
                                {
                                    @Html.Raw("<div class=\"row\">")
                                }
                                <div class="col-md-2">
                                    <div class="team-member">
                                        <div class="image-container">
                                            <div class="image hoverPortrait" id="member @index" data-toggle="modal" data-target="#bio">
                                                <img src="@image" alt="@name" />
                                            </div>
                                        </div>
                                        <h5>@name</h5>
                                        @if (position != String.Empty)
                                        {
                                            <span>@position</span>
                                        }
                                    </div>
                                    <div class="modal fade" id="bio" tabindex="-1" role="dialog">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title">About @name</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>@bio</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                                if (index == count)
                                {
                                    @Html.Raw("</div>")
                                }
    
                                index++;
                            }
                        }
                    }
                }
        </div>
    </div>  
    

    }

    So in the modal where I reference @name and @bio it only returns the info from the first team member, regardless of which member you click.

    I am very new to Umbraco, so apologies if this doesn't make sense.

    Thanks!

    John

    EDIT: Screenshots to help:

    Initial page created in the foreach loop

    After clicking **any** of the members, it displays the bio for Lynne Corner

  • Nik 1036 posts 4190 karma points MVP c-trib
    Jan 30, 2019 @ 15:27
    Nik
    101

    Hi John,

    The issue you have, looking at your code there isn't an issue with your Umbraco code by the looks of it, but more your Modal code.

    If you look at the following line:

    <div class="image hoverPortrait" id="member @index" data-toggle="modal" data-target="#bio">
    

    This is where you are specifying which modal each image should display but you aren't changing the data-target attribute. So every image is trying to display #bio.

    As a quick proof of concept, change the top of your foreach loop to look like this:

    var loopCount = 0;
    foreach ( var node in Umbraco.TypedContent(teamMembersList))
    {
    

    Then replace data-target="#bio" with data-target="#bio-@loopCount"

    Also, replace this line:

     <div class="modal fade" id="bio" tabindex="-1" role="dialog">
    

    with this

    <div class="modal fade" id="bio-@loopCount" tabindex="-1" role="dialog">
    

    Then, after index++; add loopCount++;

    See how that works for you :-)

    Nik

  • John Dawson 24 posts 145 karma points
    Jan 30, 2019 @ 15:47
    John Dawson
    0

    Fantastic! Thanks so much!

    Of course it makes sense about the data-target now you point it out. I was thinking it was something I was missing because of my inexperience with Razor and Umbraco, but it was just the logic I was missing!

    Thanks again!

  • Nik 1036 posts 4190 karma points MVP c-trib
    Jan 30, 2019 @ 15:49
    Nik
    0

    No worries :-) Happy it helped

    Nik

Please Sign in or register to post replies

Write your reply to:

Draft