SPServices SPDisplayRelatedInfo css

Question

I have modified my newform.aspx to have the $().SPServices.SPDisplayRelatedInfo

details of related information is also a lookup, when I choose the columName from the dropdown, it has a hyperlink.

What I want to do is to remove that and so I used some jquery css to remove.

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices.SPDisplayRelatedInfo({
    columnName: "Issue Type",
    relatedList: "ListName",
    relatedListColumn: "Title",
    relatedColumns: ["Issue_x0020_Category_x003a_Title", "Project ID"],
    displayFormat: "table",
    debug: true
    });
});
$(document).ready(function(){
      $('#SPDisplayRelatedInfo_Issue_x0020_Type').find('table,tr,th,td').css({'border':'1px solid'});
      $("a").removeAttr("href");  
});

What happens with the above code are:

1. When I open the newform.aspx, the table headers in my SPDisplayRelatedInfo has a border - EXPECTED

2. When I choose an Issue Type from the dropdown, the related information are shown, but the border is GONE, and hyperlink are still there (it shouldn't be there since I have a jquery that removes the href) - ERROR

Now how will I fix this when the related info are shown, the hyperlinks are gone, and the table borders are there?

Answer 1

I think you should try using the completefunc property of SPDisplayRelatedInfo parameters to pass a function which runs your cleanup code. This will allow it to run after the request has been completed and the extra table has been added to the page.

The document.ready() event is similar to a _spBodyOnLoad function in SharePoint. Both waits for the main structure of the page to be loaded and ready, so that javascript which manipulates the page is safe to run. However the SPDisplay call might also only start after this time, and this asynchronous process involves a further request to look up information from the server.

I worked around a similar issue by running similar code to manipulate the result as a function called on successful completion of the SPServices.SPDisplayrelatedInfo definition. There's an attribute which allows a function to be attached and called on completion called 'completefunc'

Here's a suggestion based on your code:

$().SPServices.SPDisplayRelatedInfo({
  columnName: "Issue Type",
  relatedList: "ListName",
  relatedListColumn: "Title",
  relatedColumns: ["Issue_x0020_Category_x003a_Title", "Project ID"],
  displayFormat: "table",
  completefunc: function () { 
    $('#SPDisplayRelatedInfo_Issue_x0020_Type').find('table,tr,th,td').css({'border':'1px solid'})
    $('#SPDisplayRelatedInfo_Issue_x0020_Type a').removeAttr("href");

  },
  debug: true
}

It looked like the $("a").removeAttr("href") needed to be bit more specific otherwise it could have removed all the links in the whole page.

In my own site I used a slightly different css selector and method remove the unwanted links.

$("#SPDisplayRelatedInfo_Issue_x0020_Type tr:nth-child(4) td.ms-vb a").contents().unwrap();

Answer 2

you can remove the hyper link with the dropdown change event like

$("#dropdownid").change(function(){
$('#SPDisplayRelatedInfo_Issue_x0020_Type').find('table,tr,th,td').css({'border':'1px solid'})
    $('#SPDisplayRelatedInfo_Issue_x0020_Type a').removeAttr("href");
});