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

[Ken.McCoy]

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

// 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).

<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.

<%@ 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

[Ken.McCoy]

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

// 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

<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