Click here to Skip to main content
15,897,968 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: javascript doesn't work with FORM tag Pin
Peter_in_27802-May-12 12:53
professionalPeter_in_27802-May-12 12:53 
QuestionJquery Notification Navigation Pin
Billa223-Apr-12 16:31
Billa223-Apr-12 16:31 
AnswerRe: Jquery Notification Navigation Pin
ZurdoDev25-May-12 9:00
professionalZurdoDev25-May-12 9:00 
Questiongenerated HTML calling javascript functions Pin
KingDidd20-Apr-12 8:01
KingDidd20-Apr-12 8:01 
AnswerRe: generated HTML calling javascript functions Pin
Benaiah Mischenko24-Apr-12 23:26
Benaiah Mischenko24-Apr-12 23:26 
QuestionComet hints Pin
mehrdadc4817-Apr-12 21:11
mehrdadc4817-Apr-12 21:11 
QuestionCode does't work on a MVC partial view rendering Pin
Kenneth McCoy11-Apr-12 7:36
professionalKenneth McCoy11-Apr-12 7:36 
AnswerRe: Code does't work on a MVC partial view rendering Pin
Kenneth McCoy12-Apr-12 6:46
professionalKenneth McCoy12-Apr-12 6:46 
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

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

HTML
<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.Cool | :cool:

Ken
Questionhow to detect upload dialog closing? Pin
Ali Al Omairi(Abu AlHassan)9-Apr-12 4:58
professionalAli Al Omairi(Abu AlHassan)9-Apr-12 4:58 
AnswerRe: how to detect upload dialog closing? Pin
Mohibur Rashid15-Apr-12 19:17
professionalMohibur Rashid15-Apr-12 19:17 
QuestionUse getElementById without request to server Pin
Christi50007-Apr-12 22:05
Christi50007-Apr-12 22:05 
AnswerRe: Use getElementById without request to server Pin
Ali Al Omairi(Abu AlHassan)8-Apr-12 3:11
professionalAli Al Omairi(Abu AlHassan)8-Apr-12 3:11 
GeneralRe: Use getElementById without request to server Pin
Christi50008-Apr-12 6:12
Christi50008-Apr-12 6:12 
GeneralRe: Use getElementById without request to server Pin
Ali Al Omairi(Abu AlHassan)9-Apr-12 2:39
professionalAli Al Omairi(Abu AlHassan)9-Apr-12 2:39 
GeneralRe: Use getElementById without request to server Pin
Christi50009-Apr-12 5:05
Christi50009-Apr-12 5:05 
GeneralRe: Use getElementById without request to server Pin
Ali Al Omairi(Abu AlHassan)11-Apr-12 0:18
professionalAli Al Omairi(Abu AlHassan)11-Apr-12 0:18 
GeneralRe: Use getElementById without request to server Pin
RichardGrimmer11-Apr-12 5:31
RichardGrimmer11-Apr-12 5:31 
GeneralRe: Use getElementById without request to server Pin
Ali Al Omairi(Abu AlHassan)11-Apr-12 6:01
professionalAli Al Omairi(Abu AlHassan)11-Apr-12 6:01 
GeneralRe: Use getElementById without request to server Pin
RichardGrimmer11-Apr-12 21:30
RichardGrimmer11-Apr-12 21:30 
GeneralRe: Use getElementById without request to server Pin
Ali Al Omairi(Abu AlHassan)12-Apr-12 5:19
professionalAli Al Omairi(Abu AlHassan)12-Apr-12 5:19 
AnswerRe: Use getElementById without request to server Pin
Angel13209-Apr-12 20:53
Angel13209-Apr-12 20:53 
QuestionJavascript Pin
Manikandan H4-Apr-12 21:02
Manikandan H4-Apr-12 21:02 
AnswerRe: Javascript Pin
ZurdoDev12-Apr-12 8:58
professionalZurdoDev12-Apr-12 8:58 
QuestionHow to find the row in the gridview that was selected Pin
MacIntyre4-Apr-12 13:24
MacIntyre4-Apr-12 13:24 
AnswerRe: How to find the row in the gridview that was selected Pin
Angel13209-Apr-12 20:52
Angel13209-Apr-12 20:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.