4
\$\begingroup\$

I have written some JavaScript code with jQuery to create collapsible webparts in SharePoint 2010.

Can someone suggest some improvements? As I think that the methods I am using for selectors are not ideal. The solution works perfectly as it is, I just want to ensure that I am being as efficient as possible.

Below is a snippet of the HTML that I am doing the processing on.

UPDATE: Just a note, I am starting from s4-wpTopTable because it is the best way for me to ensure I am dealing with a SharePoint webpart.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td id="MSOZoneCell_WebPartWPQ4" valign="top" class="s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
        <table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr class="ms-WPHeader">
                            <td align="left" class="ms-wpTdSpace">&#160;</td>
                            <td title="Links - Use the Links list for links to Web pages that your team members will find interesting or useful." id="WebPartTitleWPQ4" class="ms-WPHeaderTd">
                                <h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle">
                                    <a accesskey="W" href="/sites/test/Lists/Links"><nobr><span>Links</span><span id="WebPartCaptionWPQ4"></span></nobr></a>
                                </h3>
                            </td>
                            <td align="right" class="ms-WPHeaderTdMenu" onclick="OpenWebPartMenu(&#39;MSOMenu_WebPartMenu&#39;, this, &#39;WebPartWPQ4&#39;,&#39;False&#39;); TrapMenuClick(event); return false;"><span style="display:none;"></span><div class="ms-WPMenuDiv" onmouseout="this.className='ms-WPMenuDiv'" onmouseover="this.className='ms-WPMenuDivHover'"><a onclick="OpenWebPartMenuFromLink(&#39;MSOMenu_WebPartMenu&#39;, this, &#39;WebPartWPQ4&#39;,&#39;False&#39;); return false;" id="WebPartWPQ4_MenuLink" onkeydown="WebPartMenuKeyboardClick(document.getElementById('WebPartWPQ4_MenuLink'), 13, 40, event)" href="#" title="Links Web Part Menu" class="ms-wpselectlink" onblur="UpdateWebPartMenuFocus(this, 'ms-wpselectlink', 'ms-WPEditText');" onfocus="UpdateWebPartMenuFocus(this, 'ms-wpselectlinkfocus', 'ms-WPEditTextVisible');" menuid="MSOMenu_WebPartMenu"><img class="ms-WPHeaderMenuImg" src="/_layouts/images/wpmenuarrow.png" alt="Links Web Part Menu" style="border-width:0px;" /></a></div></td><td class="ms-WPHeaderTdSelection"><span class="ms-WPHeaderTdSelSpan"><input type="checkbox" id="SelectionCbxWebPartWPQ4" class="ms-WPHeaderCbxHidden" title="Select or deselect Links Web Part" onblur="this.className='ms-WPHeaderCbxHidden'" onfocus="this.className='ms-WPHeaderCbxVisible'" onkeyup="WpCbxKeyHandler(event);" onmouseup="WpCbxSelect(event); return false;" onclick="TrapMenuClick(event); return false;" /></span></td><td align="left" class="ms-wpTdSpace">&#160;</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="" valign="top">
                    //CONTENT WILL BE IN HERE
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

And this is the jQuery that I am using:

<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.s4-wpTopTable').find('tr:first h3').append('<a class=\'min\' style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>');
        var Collapse = "/_layouts/images/collapse.gif";
        var Expand = "/_layouts/images/expand.gif";
    $('.min').click(function(){     
        var img = $(this).children();
        $(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
    });
});
</script>
\$\endgroup\$
3
\$\begingroup\$
$('.s4-wpTopTable').find('tr:first h3')...

is the same as

$('.s4-wpTopTable tr:first h3')...

Only one hit for jQueury goodness instead of two.
also you're attaching the click handler after putting it into the DOM. You can do it the other way:

// ...
.append(
    $('<a class=\'min\' style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>')
        .click(function(){     
            var img = $(this).children();
            $(this)
                .closest('.s4-wpTopTable')
                .find('tr:first')
                .next()
                .toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src', Expand);
        })
);
\$\endgroup\$
1
  • \$\begingroup\$ Its better to use the jquery on method for reasons mentioned here stackoverflow.com/questions/9122078/… so $('.min').click(function()... would be $('.min').on('click',function()... \$\endgroup\$
    – zadubz
    Jan 28 '15 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.