0

We have a web part on a page that refers to a simple list with two fields: Title and URl. Obviously, this list is used by the end user to show links to various items (google, etc) on the web part in the page.

When linking to an actual form though, the form loads as a new page rather than a ModalDialog box. This is undesirable.

Reading various code snippets, I found the following solution to disable links when the javascript comes across an item with a certain filename (in my case, "newform.aspx").

Code from:

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/498b171a-b00a-4dd9-8bee-2348bc4ccbd8/calendar-view-edit-item-links

I have modified this code to attempt to modify the anchor tag's href attribute to point to a showmodaldialogbox() instead. The following is the code:

   function ShowInModal()
{
 var x = document.getElementsByTagName("A");

 for (var i=0;i<x.length;i++)
 {
  if (x(i).href.indexOf("NewForm.aspx")>-1)
  {
    x(i).href="javascript:SP.UI.ModalDialog.showModalDialog({url: 'http://google.ca'});";
  }
 }
}
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("ShowInModal"); </script>

This almost works. I can tell the anchor tag's href attribute is being modified by hovering over it and looking at the bottom of my browser's status bar - it shows the appropriate javascript.

Problem is, it will not display anything except a new page with [Object][Object] showing. As a test, I would like to load google into a modal dialog box, and work from there. Any ideas why this almost works, but no cigar for me?

Thanks,

2

I prefer using jQuery for this type of task rather than regular javascript.

$(function () { // When jQuery is ready, continue
    // First select all A tags containing 'NewForm.aspx' in their HREF attribute.
    $('a[href*="NewForm.aspx"]').click{function (event) {
        event.preventDefault(); // Prevents default click event.
        SP.UI.ModalDialog.showModalDialg({title: "Google", url: "http://google.com"});
    });
});

Or to do it following your example

// Create function
function ShowInModal() {
    SP.UI.ModalDialog.showModalDialg({title: "Google", url: "http://google.com"});    
};

// Use jQuery to change the href property of all A tags containing 'NewForm.aspx' in their HREF attribute.
$(function () { // When jQuery is ready, continue
    $('a[href*="NewForm.aspx"]').attr({
        // Using javascript:void(0) in href cancels out the necessity to use 'return false' or 'event.preventDefault()'
        'href': 'javascript:void(0);', 
        'onclick': 'ShowInModal();'
    });
});

Update
In response to your question in the comments.

I anticipate that you mean the URL of the A tags that you want to open in Modal Dialogs.

// Make your 'ShowInModal' take a parameter, in this case 'href'
function ShowInModal(href) {
    SP.UI.ModalDialog.showModalDialg({title: "Google", url: href});    
};
$(function () {
    // Loop through all A tags containing 'NewForm.aspx' in their href
    $('a[href*="NewForm.aspx"]').each(function (i, e) {
        // Store the A tag's current href in a variable
        var currentHref = $(e).attr('href');
        $(e).attr({
            'href': 'javascript:void(0);', 
            // Use the stored href as argument for the ShowInModal functions parameter.
            'onclick': 'ShowInModal("' + currentHref + '");'
        });
    });
});
  • The second option works wonderfully! Couldn't get the first option to do anything though. not sure why, but that's fine. My next issue, since moving to jquery is - how can I get the original URL and wrap it inside a showModalDialog()? I found this: $("a[href^='stackoverflow.com']") .each(function() { this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "stackoverflow.com"); }); – Kolten Sep 26 '13 at 17:38
  • @Kolten Please check my updated answer. – user2536 Sep 26 '13 at 19:14
0

Thanks a lot DANIEL, but it gave me a small error that SP.UI.ModalDialog.showModalDialg is not defined, i made the below change and it works:

<script type="text/javascript">
function ShowInModal() {
var options = {
    width: 950,
    height: 350,
    url : "/sites/../CustomNewForm.aspx"        
};
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);    
};

 function CloseCallback(result, target) {
if (result == SP.UI.DialogResult.OK) {
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
   } 
 }

  $(function () { // When jQuery is ready, continue
$('a[href*="CustomNewForm.aspx"]').attr({
    'href': 'javascript:void(0);', 
    'onclick': 'ShowInModal();'
});
});
</script>

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.