3

I'm using SharePoint 2010 and Internet Explorer 9. (I have no choice in browser or versions -- policy dictates I use these until told otherwise)

I actually solved my problem, but I still don't understand why there was a problem, and I really want to understand why. The solution makes no sense to me. To paraphrase Douglas Adams, I speculate that if I knew exactly why this happened, I would know a lot more about the nature of the (SharePoint) Universe than I do now.

The problem I was having:

I have a page with many web parts. In a couple of content-editor webparts, I have javascript/jquery using the load() function to load in some list views, like this:

$("#ListofSubscribersPlaceHolder").load(SubscriberView+" .ms-listviewtable",function(responseTxt,status,xhr) {
     if ( status == "error" ) alert( "Error: " + xhr.status + " " + xhr.statusText );

     if (responseTxt.contains("no items to show")) {
       $("#ListofSubscribersPlaceHolder").html("<p>No subscribers yet.</p>");
    }

    else {
       // Remove the header row
       $("#ListofSubscribersPlaceHolder table").find("tr").first().remove();
    }
});

The list view includes the Edit icon and associated A-tag for each list item, with an onclick calling EditItemWithCheckoutAlert, which pops up the edit item form, and an href loading the edit item as a page instead of a pop-up.

When you visit the list view as a separate page, the Edit item works as you would expect, with a pop-up. But when you click on it in the web part, it follows the href to a web page instead of doing the pop-up form.

Other pop-ups that used the NewItem2 function in their onclick= worked fine. I set up alerts to show the A-tag after the page was fully rendered, and the onclick was definitely defined.

The solution I found:

Through digging and trial and error, I finally discovered that the problem went away (i.e. the popups work) if I removed the ms-listviewtable class from the table containing the link. So I added this line after the line that removes the header row:

$("#ListofSubscribersPlaceHolder table").removeClass("ms-listviewtable");

and now it works perfectly.

My Question:

I'm completely baffled as to why a class would prevent the onclick from working but let the href work. Looking at the stylesheets being pulled in, ms-listviewtable just defines borders and colors -- nothing fancy as far as I can tell.

In my search for a solution, I searched for how one might deliberately do such a thing. Aside from remonstrances that using css to modify behavior is wrong, there were 2 basic answers:

  1. The pointer-events attribute. I checked that (with an alert of the A-tag's $(this).css("pointer-events")), and it is undefined. (Any other attributes I should check?)

  2. Other suggestions involved covering the edit icon with an invisible unclickable layer, but wouldn't that also disable the href link? At any rate, I found no evidence that this was being done.

Any ideas what could be going on here?

Try it yourself

If you want to see for yourself, try adding this code:

<table class=ms-listviewtable>
<tbody><tr><td>TEST:</td>
<td>
<a onclick="EditItemWithCheckoutAlert(event,'http://www.google.com','0','','','/','','955');return false;" href="http://www.google.com"><IMG border=0 alt=Edit src="/_layouts/images/edititem.gif"></a>
</td></tr></tbody></table>

With class=ms-listviewtable, I get a fresh page with google in it; without it, I get a pop-up on the current page (with an error saying it can't put that page in an iframe, but that's irrelevant: the point is that you get a popup, i.e. the onclick works).

If you can't reproduce it on SharePoint 2010, let me know, because then I can look for local anomalies.

0

My understanding is that you want to load an edit form.

My suggestion would be to use a dialog box instead of a pop up. Pop-up is probably going to get blocked by a lot of browsers, especially your network has strict policies.

http://blogs.msdn.com/b/sharepointdev/archive/2011/06/23/how-to-open-a-list-form-in-a-modal-dialog-box.aspx

    <input onclick="javascript:SP.UI.ModalDialog.showModalDialog({ url: '../Lists/GBE/NewForm.aspx', title: 'User Survey' }); return false;" id="btnVote" type="button" value="Vote" />

I normally use something like this. Sorry I can't directly answer as to why your method behaved the way it did.

  • Sorry if I used the wrong term. It is a dialog box I am trying to use, not a pop up. The problem is that edit form dialog box only works if the icon for it does not have the class ms-listviewtable applied to it, and I'm wondering how in the world the class can cause that to happen. – Francoise Becker Mar 24 '15 at 13:45

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.