0

I am having a similar issue as the following question:

SP.UI.ModalDialog.showModalDialog not working with IE7

The problem is, the resolution to that question doesn't apply to my specific scenario: I have a page with a List Web Part that contains links to various forms on our SharePoint 2010 site. I want to open these links in a dialog box, so I have developed some jQuery that modifies the href and adds an onclick() parameter:

<script>
// Function: Show in Modal Dialog Box

function ShowInModal(href) {
    SP.UI.ModalDialog.showModalDialog({title: "OurNH Form", url: href});    
};


// JQuery: Change all form URLs to open in popup dialog box
$(function () {
    // Loop through all A tags containing 'NewForm.aspx' as the 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 + '");'
        });
    });
});</script>

This is in a hidden Content Editor Web Part on the same page that the links are displayed on. In IE7, when the user clicks on a link, nothing happens. All other browsers work fine. Any ideas on how to get this working with IE7?

Update: Final code solution in answer to this question:

<script>
// JQuery: Change all form URLs to open in popup dialog box.
// but lets wait until the document is ready before altering things just incase
$(document).ready(function () {
    // Loop through all A tags containing 'NewForm.aspx' as the href
    $('a[href*="NewForm.aspx"]').each(function (key, tag) {
        var $input = $( this );
        // prop is cross browser compatible
        var currentHref = $input.prop('href');

        $input.prop('href', 'javascript:void(0);');

        // User cross browser click method
        $input.click(function() {
            SP.UI.ModalDialog.showModalDialog({title: "OurNH Form", url: currentHref});
        });
    });
});
</script>
  • What is the IE 7 development tools console tell you? I could quite possibly be a bug in the other code. Can you for example see that the onclick and href gets updated in IE 7? Also, can it be the <script> tag not having type="text/javascript" added as an attribute? – Robert Lindgren Nov 12 '13 at 18:38
  • I fixed it for IE7 but now broke it for IE9 :( Added the "ShowInModal()" function to the href attribute so now it has both href and onclick pointing to the function, but while it now diplays correctly in IE7, in IE9 the 'shaded area' of the popup covers the entire screen and I cannot exit the form (nothing is clickable - although I can type into it). I guess I will need to add some specific IE7 browser checking into the function and edit the href or not based upon that... – Kolten Nov 13 '13 at 19:29
  • You can also simplify your code with $('a[href*="NewForm.aspx"]').each(function (e) { e.preventDefault(); ShowInModal($(this).attr('href')); return false; }), see if that helps your new issue without changing the link itself. – Francisco Aquino Nov 13 '13 at 21:36
  • @F.Aquino hmm I cannot seem to get it to work... This is what I have: <script language="text/javascript"> function ShowInModal(href) { SP.UI.ModalDialog.showModalDialog({title: "OurNH Form", url: href});}; $('a[href*="NewForm.aspx"]').each(function (e) { e.preventDefault(); ShowInModal($(this).attr('href')); return false; }); </script> – Kolten Nov 13 '13 at 22:33
2
+50

your onlick is malformed, you should also use the .bind JQuery function since thats what you are using its cross browser compatible.

So a quick rewrite would be:

// JQuery: Change all form URLs to open in popup dialog box.
// but lets wait until the document is ready before altering things just incase
$(document).ready(function () {
    // Loop through all A tags containing 'NewForm.aspx' as the href
    $('a[href*="NewForm.aspx"]').each(function (key, tag) {

        // prop is cross browser compatible
        var currentHref = currentUrl.prop('href');
        currentUrl.prop('href', 'javascript:void(0);');

        // User cross browser click method
        tag.click(function() {
            SP.UI.ModalDialog.showModalDialog({title: "OurNH Form", url: currentHref});
        }
});

Should work...

Basically the click binding and property change aren't cross browser. Also make sure you are using JQuery 1.10.2 or below do not use 2 it is only ie9+ compatible.

Just make sure your selector is right in IE7 if you get no results as the a[href*="NewForm.aspx"] should be case insensitive. Using the contains selector is actually the fix for this selector in ie6+7 so this should be fine.

| improve this answer | |
  • Thanks for this. I got it working! Editing my OP with the final code. – Kolten Nov 17 '13 at 5:15

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.