Display Form Text Inaccessible via JS

Question

I'm overriding the Display Form of a list as per Mark Rackley's blog post: http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=47

For this particular list, I need to parse a text field, split it into an array, and build a table containing the array elements. However I can't seem to access the text of any elements on the form. The very same code/html functions as expected in the Edit Form, so I feel I've narrowed the culprit to something in the Display Form.

An element like:

<span class="formOverride" id="rName" data-displayName="Requisition Name">
    <!-- FieldName="Requisition Name" FieldInternalName="Title" FieldType="SPFieldText"-->
    "Test Requisition"
</span>

Returns empty with:

var testString = $("#rName").text();
alert("'" + testString + "'");

I've tried a number of selectors, including plain JS, and they all return an empty string. Again, the very same code in the Edit Form returns the string as expected.

The data shows in the page source, and in Inspect Element from Chrome. Inspect DOM Properties of the element in question also shows that the data is available, but the selectors just don't pick it up.

Anyone know of something in the SharePoint 2013 Display Form that would prevent script from accessing text? When I remove the text(), the alert gives the generic [object Object] output, so the selector seems to be picking the element up, just not the text...

Answer 1

Try using the getTagFromIdentifierAndTitle method to get this value rather than using jQuery's element selector. The reason being is SharePoint writes some funky code for it's aspx pages and if you are using SharePoint Designer's form fields, this code will most likely find the element you need. Give it a try to set your variable and then extract the innerHTML or however you want to get the text out of it.

var txtRName = getTagFromIdentifierAndTitle("input", "", "Requisition Name");

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
  var len = identifier.length;
  var tags = document.getElementsByTagName(tagName);
  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
      return tags[i];
    }
  }
  return null;
}