Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Code does't work on a MVC partial view rendering

    The following code works as intended when a page is loaded with the defined elements, but does not if it is to be called on a MVC partial view rendering. I understand why it doesn’t is because the page has already loaded but the elements this code acts on has not been loaded.

    I have tried referencing the source of the code in partial view .ascx file and have also tried loading the code within script tags: these do not work.

    Any help on how I can get this to work on a partial view/page update would be appreciated.

    Sliding.js

    Code:
    // This is a reduced accordian effect on div class hideableItem elements.
    $(document).ready(function () {
        $('.itemHeader').click(function () {
            // Get the parent of the item that was previously clicked.
            var priorSelectedParent = $('.itemHeaderSelected').parent().attr('id');
            $('#' + priorSelectedParent + ' .hideableItem').slideUp('fast');
            $('#' + priorSelectedParent + ' .itemHeaderSelected').addClass('itemHeader');
            $('#' + priorSelectedParent + ' .itemHeader').removeClass('itemHeaderSelected');
            // Get the parent of the item that was clicked.
            var headerParent = $(this).parent().attr('id');
            $('#' + headerParent + ' .hideableItem').slideDown('slow');
            $('#' + headerParent + ' .itemHeader').addClass('itemHeaderSelected cornersRoundSmall');
            $('#' + headerParent + ' .itemHeaderSelected').removeClass('itemHeader');
        })
    });
    
    // On pages that utilize the accordian effect this causes the div class openingHeader
    // to open after the page loads.
    $(document).ready(function () {
        $('.hideableItem').hide();
        // Needed to add a slight time delay before triggering the click event.
        setTimeout(function () {
            // Select the 'Summary' section be open after the page loads.
            $('.openingHeader').trigger('click');
        }, 10);
    });
    Background.ascx file where Sliding.js is to be implemented (shortened for brevity).

    Code:
    <script type="text/javascript" src="../../Scripts/Sliding.js"></script>
    
    <h2 class="contentTopElement">
        Background Information</h2>    
    <div id="slidingPartial" class="slidingInfo cornersRoundSmall">
        <div id="summary">
            <h3 class="itemHeader openingHeader">Summary of Qualifications</h3>
            <div class="hideableItem">
                <p>
                    Established a...</p>
                <p>
                    Ability to...</p>            
            </div>
        </div>
        <div id="achievements">
            <h3 class="itemHeader">Achievements</h3>
            <div class="hideableItem">
                <p>
                    Quality Control...</p>
                <p>
                    USDA Service…</p>
            </div>
        </div>
    </div>
    Index.aspx file that calls various partial views.

    Code:
    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        
        <script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
        <script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../Scripts/Sliding.js"></script>
    
        <div class="relativeWrapper">
            <div id="leftColumn">
                <ul class="sideMenu">
                    <li class="selectionItem"><%= Ajax.ActionLink("Introduction","Introduction",new AjaxOptions{UpdateTargetId="columnContent"}) %></li>
                    <li class="selectionItem"><%= Ajax.ActionLink("Background","Background",new AjaxOptions{UpdateTargetId="columnContent"}) %></li>
                    <li class="selectionItem"><%= Ajax.ActionLink("Contact","Contact",new AjaxOptions{UpdateTargetId="columnContent"}) %></li>
                </ul>
            </div>
            <div id="rightColumn">
                <div id="columnContent">
                    <%= Html.Partial("Introduction", new AjaxOptions { UpdateTargetId = "columnContent" })%>
                </div>
            </div>
        </div>
    </asp:Content>
    Thank you,
    Ken
    Last edited by Ken.McCoy; 04-12-2012 at 06:22 PM. Reason: To show that the issues have been resolved

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Found a solution.

    Eureka! While I was hoping for a JavaScript answer to completely solve this problem (and would still appreciate one if possible) I did find a solution and wanted to share it so that others may benefit.

    There were two issues in this problem: attaching click events to the itemHeader class elements and getting the hideableItem class elements to hide after the partial page update. The following is what had to be changed to correct the issues.

    • I had to do away with $(document).ready event statements wrapping the two functions and name them.
    • Use the on() method to attach a handler to the click event.
    • Within the page calling the partial update I had to modify the Ajax.ActionLink method by adding an additional property, OnSuccess, to the AjaxOptions list. OnSuccess calls the javascript function hidingItems when the partial page update is successfully completed.

    Here is the code with the corrections.

    Sliding.js

    Code:
    // Event handler attachment that attachs the showItem handler to the click event.
    $(document).on('click', '.itemHeader', showItem);
    
    // Causes the previously unhidden hideableItem to hide and shows the current clicked item
    // thereby providing the accordion effect.
    function showItem() {
        // Get the parent of the item that was previously clicked.
        var priorSelectedParent = $('.itemHeaderSelected').parent().attr('id');
        $('#' + priorSelectedParent + ' .hideableItem').slideUp('slow');
        $('#' + priorSelectedParent + ' .itemHeaderSelected').addClass('itemHeader');
        $('#' + priorSelectedParent + ' .itemHeader').removeClass('itemHeaderSelected');
        // Get the parent of the item that was clicked.
        var headerParent = $(this).parent().attr('id');
        $('#' + headerParent + ' .hideableItem').slideDown('slow');
        $('#' + headerParent + ' .itemHeader').addClass('itemHeaderSelected cornersRoundSmall');
        $('#' + headerParent + ' .itemHeaderSelected').removeClass('itemHeader');
    }
    
    // On pages that utilize the accordion effect this causes the div class openingHeader
    // to open after the page loads.
    function hidingItems() {
        $('.hideableItem').hide();
        // Needed to add a slight time delay before triggering the click event.
        setTimeout(function () {
            // Select the 'Summary' section be open after the page loads.
            $('.openingHeader').trigger('click');
        }, 10);
    }
    Index.aspx

    Code:
    <li class="selectionItem"><%= Ajax.ActionLink("Background","Background", 
        new AjaxOptions{UpdateTargetId="columnContent", OnSuccess="hidingItems"}) %></li>
    Thank you to all of you who took your time looking into this problem for me.

    Ken


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •