Discussion item won't open in modal window

Question

SharePoint 2010

I have a display form that has a task list webpart and a discussion list webpart.

The display form opens in a modal window.

When a task list item link is clicked, it opens in an additional modal window (desired).

However, when a discussion list item link is clicked, it opens as a standard page (not desired).

I've tried modifying the discussion item link to open as a modal window with javascript (SP.UI.ModalDialog.showModalDialog), but was not successful (nothing changed). I even changed the href to '#' in the when and otherwise clause, and still nothing changed.

I can modify other list item links without a problem, but the discussion one eludes me.

How can I get it to open in an additional modal window like the task list item described above?

Answer 1

You can achieve this by overriding the OnPostRender callback of the client side rendering engine and replacing the default behaviour of the click action.

Paste below code into a .js file and load it as JSLink for your webpart.

nice primer on JSLink

PS: I except jquery to be loaded in the masterpage

PPS: Don't forget to go to the lists settings (advanced settings) and check "Yes" for launching forms in dialogs.

( function () {
var ctx = {};
ctx.Templates = {};
ctx.OnPostRender = function( ctx ) {
console.log( ctx.wpq )
    // in case you need prevent other webparts from getting modified on post render
    // we indicate the web part id, you get it by inspecting the DOM.
    if( ctx.wpq == 'WPQ7' ) {
        var dn = $( "#WebPart" + ctx.wpq );
        dn.find( '#idHomePageNewItem' ).click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            var aData = {
                url : ctx.listUrlDir + "/NewForm.aspx",
                title : "Ask A Question",
                dialogReturnValueCallback : function() {
                    // call back that is triggered when dialog closes
                    // ..we need to refresh, either we click on the 
                    // refresh button of webpart if exists otherwise
                    // we simply reload the page
                    var dnRefresh = dn.find( "a[title='Refresh']" );
                    if( dnRefresh[ 0 ] ) {
                        dnRefresh[ 0 ].click();
                    }
                    else {
                        self.location.reload();
                    }
                }
            };
            SP.UI.ModalDialog.showModalDialog( aData );
        } );
    }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides( ctx );
} )();

Answer 2

If this is for one page only, an alternative option is to do this in a script editor web part.

This example does not require jQuery, you may need to update the DOM ID selectors.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById('forum1-NewPostLink');
    var refreshLink = document.getElementById('forum1-RefreshLink');

    var modal = function(e) {
        e.preventDefault();
        var options = {
            url: this.href, 
            title: 'Community Discussion', 
            dialogReturnValueCallback: function(retVal) { 
                if (retVal === 1) {
                    if (refreshLink) {
                        refreshLink.click();
                    } else {
                        window.location.reload(true);
                    }
                } 
            }
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }

    a.addEventListener('click', modal);
});
</script>