Write columns using SPDisplayRelatedInfo

Jun 15, 2010 at 10:33 PM

Good afternoon,

 

I am using the SPDisplayRelatedInfo function in a sharepoint list but would like to expand the usability by having it save the data to existing columns in my site.  What I am attempting to do is create form "templates" that live in a different list.  When my users select the template name from a look up field, I would like the template data to copy into the columns on the New request.  If they don't select one, they can still fill them out manually.  I would also like them to be able to edit the individual fields after they select the template, thus the need for copying the data instead of just showing it.  I found a similar discussion that mentioned using:

var divId = "showRelated_" + encodeColumn(opt.columnName);

but being the novice that I am, I don't know where to put this line so that I can call the data into a field.  I have some javascript, that I also googled, I'm really not a java developer, to set the field once I have the data, at least I hope I do.

 

Can you lend any assistance?

 

Jared

 

Coordinator
Jun 16, 2010 at 4:04 AM
Edited Jun 16, 2010 at 4:04 AM

You can definitely do this.  Using SPDisplayRelatedInfo only makes sense if you want to use it to display the content from the other item(s) on the form.  Otherwise, you can just use GetListItems to grab the other item(s) and copy the values from the columns into the current item you are working with.

I realize that I'm glossing over things here, but it really doesn't have to be that hard, though I can't really give you the "answer" without knowing a lot about your lists.

M.

p.s. The ID for the DIV I create in SPPDisplayRelatedInfo no longer starts with "showRelated_". A few versions back I changed it to "SPDisplayRelatedInfo_" to make it more consistent with the other functions, as noted in the docs $().SPServices.SPDisplayRelatedInfo

Jun 16, 2010 at 2:33 PM

I apologize for interrupting.. but I do have a similar Requirement.

I am already using SPDisplayRelatedInfo, but my requirement is slightly different from its functionality:

List 1is already filled with complete Data- Employee Detail: Columns, Name, Institution, Address, Phone Number, E-mail address, Job title, etc.....

List 2 uses SPDisplayRelatedInfo: Meeting: I want to have 5 columns in this: Name, Meeting Date, Address, Institution, Phone Number & E-mail address. On selecting 'Name', iI want it give me related 'Institution', 'Address' & 'Phone number' filled in the text boxes. I would 'Meeting Date' by myself.

I am able to display the relation column value using your SPDisplayRelatedInfo, but I would want them to be filled in as Column values for List 2.

How can I accomplish this? Guide me through..

Jun 16, 2010 at 4:03 PM
Edited Jun 17, 2010 at 6:51 PM

Ok, just using a play list here, but the concept is the same.  I have a list called "Templates", in this list are three fields, Title, StoredData1 and StoredData2.  In another list I have a lookup field tied to the title column, "Template", and two other columns, FirstItem, SecondItem.  Using SPDisplayRelatedInfo, I have the Template field tied to the other list, this part is working as advertised.  But I'm still having difficulty pulling the data out of it.  Here is my script so far, try not to do a spit take with your laughter:

 

<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-0.5.6.min.js"></script>
<script language="javascript" type="text/javascript">
        $(document).ready(function() {
                $().SPServices.SPDisplayRelatedInfo({    
                    columnName: "Template",
                    relatedList: "Templates",
                    relatedListColumn: "Title",
                    relatedColumns: ["StoredData1", "StoredData2"],
                    displayFormat: "list",
                    completefunc: SetFields
                });
        });
        function SetFields(){
            <INSERT DIV RETRIEVAL HERE>
            var theTextBox = getTagFromIdentifierAndTitle("input","","FirstItem");
                theTextBox.value = divId;
        };
        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;
        }

</script>

 

This being my third day playing with Javascript, I think I'm in a little over my head.  But the theory is sound, I think, well at least to me.  The second function does work to set the field, and the call portion of the first function also works.  But I'm doing something wrong because it isn't writing any data.  It also starts loading the field immediately, as I tried just plugging in a piece of data for the "divId" variable, it filled the field as soon as the page loaded, which I think is what it is supposed to do.

 

Edit: Removed the function I was using as it is no where close to what it should be.  Still having difficulty accessing the div.

 

Jun 16, 2010 at 6:48 PM

Hello Marc, I read all your posts and dug deep into everything there is,

So, the related info is stored in a Div. But I am not sure from your posts that is 'SPDisplayRelatedInfo_ColumnName' its 'ID' or its 'NAME'.

so should i use document.getElementById or document.getElementsByName ???

Also how do i access the related information from this DIV ??

here's my code: I want to access FID value [your code is running perfect as advertised displaying the related info]

<script language="javascript" type="text/javascript">
$(document).ready(function() {

 $().SPServices.SPDisplayRelatedInfo({      
               columnName: "Investigator",
               relatedList: "Investigators Detail",
               relatedListColumn: "Investigator_x0020_Name",
               relatedColumns: ["FID", "Institution", "Full_x0020_Address", "HomePhone", "Email"],
               displayFormat: "list",
               completefunc: GetRelatedValue()
                });
        });

        function GetRelatedValue(fieldValue){      

   var infodiv=document.getElementsByName("SPDisplayRelatedInfo_InvestigatorName");
alert(infodiv[0].value);

 
};

</script>

 

How do I access the VALUES of related fields. Though column's display name is "Investigator" its Static Name is "InvestigatorName".

Is the name that should be at appended at the end of "SPDisplayRelatedInfo_", the column name on the final list and not the one on the realted list ? is that right?

Stuck badly..! I feel that I 'm almost there.!! the only issue is to acces the DIV

 

Thank you.

Jun 17, 2010 at 7:09 PM

Good afternoon,

 

After playing with this a lot more, I'm still stuck.  Using cvgandhi's code as a base, I had no idea what function to use to retrieve the data, I've tried numerous different methods for retrieving the div value, so far the best I get is "Null".  I've tried "document.getElementsByName(" and "document.getElementbyId(", with about every combination of item names and Id's I could think of.  I have also tried a jquery item I'm pretty sure I have the syntax wrong for as well, a .data(name) call.

Also combing through the source, I don't see the "var divId = "SPDisplayRelatedInfo_" + encodeColumn(opt.columnName);" line in there, I was looking to see if I was typing it wrong or something, I don't actually see "SPDisplayRelatedInfo_" at all, probably just my search methods.  I was looking at the 0.5.6 code, am I looking in the wrong place? 

If I understand the process right, it should be storing each column under a unique div identified as "SPDisplayRelatedInfo_<columnName>".  Now is the column name stored the related column or the parent column?  Probably a dumb question, I have a lot of those.

Thanks for your assistance,

Jared

 

Jun 17, 2010 at 7:32 PM

Hey,

you know what,, I FIGURED it out! we should have read SPServices docmentation attentively way back. Anyway, So you might be doing everything right, except understanding the main concept (I also got it yesterday evening): THERE IS ONLY ONE DIV !!!

yes, all the columns are stored in a <table> tag under just ONE <div> tag.

so the structure is like this:

<div id = "SPDisplayRelatedInfo_ColumnStaticName">

<table><tr>

<td>Column1 data</td>

<td>Column2 data<t/d> </tr> </table>

</div>

here, ColumnStaticName is the static name of the column for which you select a value from dropdown list on the form.

IN YOUR CASE , it should be the static name of the column 'Template', while Column1data and Column2 data are StoredData1 and StoredData2 value which you can extract by going inside the td tags under DIV tag.

This would make everything even more clear:

  var srcDivId="SPDisplayRelatedInfo_InvestigatorName";
  var tds = document.getElementById(srcDivId).getElementsByTagName("td");
  var Column1Data = tds[0].innerHTML;
  var Column2Data = tds[1].innerHTML;

Cheers Mate !! Proud of myself ..hehehe just kidding!

i am sure this would clear all your doubts, took me goood loong 3 hours to figure out everything after going deep inside the Genius code of SPServices.

Reallly useful tool.

CVG


 

Jun 18, 2010 at 12:57 PM

Thank you very much cvgandhi and Marc.  It is working now as desired.  Just need to go in and hide the display and we are all set!  Thanks again!

 

Jun 18, 2010 at 2:27 PM

you are welcome..

have a good one

Jun 18, 2010 at 8:56 PM

Boy nothing is ever easy.  Ok, so this works now, but, since it is bound to $(document).ready() it wipes out the values every time the page is reloaded.  So if people filling in the form should happen to miss a required field, any of their changes are removed and replaced with the original values.  Is there any way to bind this to .change() or some other function that goes off after the page has loaded?  I tried doing this directly with the following call but it doesn't load, the function just stops working.  Putting an alert in tells me that the syntax for the .change() is correct.

 

<script language="javascript" type="text/javascript">
        $("select[title$='Template']").change(function(){
                    $().SPServices.SPDisplayRelatedInfo({    
                    columnName: "Template",
                    relatedList: "Templates",
                    relatedListColumn: "Title",
                    relatedColumns: ["StoredData1", "StoredData2"],
                    displayFormat: "list",
                    headerCSSClass: "ms-hidden",
                    rowCSSClass:"ms-hidden",
                    completefunc: SetFields
                });        
        });
        function SetFields(){
            var srcDivId = "SPDisplayRelatedInfo_Template";
            var tds = document.getElementById(srcDivId).getElementsByTagName("td");
            var Column1Data = tds[0].innerHTML;
            var theTextBox = getTagFromIdentifierAndTitle("input","","FirstItem");
                theTextBox.value = Column1Data;
        };
        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;
            
        };
        $(document).submit(function(){
            alert('Submit works');
        });
    

</script>

 

Any ideas?

 

Thanks,

Jared

 

Coordinator
Jun 20, 2010 at 7:39 PM
Edited Jun 21, 2010 at 5:30 AM

Jared:

As I said above, the goal of SPDisplayRelatedInfo is really to display the related values on page.  However, the values shown should change each time the user selects a new value for the Template column, then your SetFields function will be called, setting the other fields.  If you want those changes to be committed to the item at that point, you can use UpdateListItems or trigger a commit with a postback.  Otherwise, those values are volatile until they have been committed.

M.

Jun 21, 2010 at 2:39 PM

I kinda figured that this would be the case.  I will just have to work with the other functions and see what I can do.  Does the GetListItems function work on change?  Or I could just tell people to get it right the first time :P.

Coordinator
Jun 22, 2010 at 3:38 PM

Maybe I'm not understanding your questions correctly. You can bind anything you want to do to a change event, though.

M.

Jun 24, 2010 at 1:20 PM

Hey Jared,

I have exact similar requirement now, I tried with change function too..

but it is not working, I tried keeping alert box too, but it is not showing it.

$("select[title$='Investigator']").change(function(){
alert('Changed !!!');

can't understand what is wrong in it.

@ Marc, any suggestions??

 

cvg

Coordinator
Jun 24, 2010 at 1:34 PM

Sorry guys; I'm finally just spotting the issue.  When you call SPDisplayRelatedInfo, *it* does the binding to the change event.  It sets things up regardless of the type of dropdown, etc. In other words, I'm doing the work for you.  So be doing the binding yourself, you're probably unbinding my binding which would make it work in the forst place.

M,

Jun 24, 2010 at 1:38 PM

Hey Marc,

Thanks for getting back to the issue, i got what u saying. But still the issue remains the same, How do i make the thing work ONLY when the columnName changes: i.e basically not on the first time when i go in 'EDITFORM', but ONLY when i change the selection in EDITFORM ?

Thanks again.

please let us know

Coordinator
Jun 25, 2010 at 2:59 AM

I'm not sure why you'd want to. Shouldn't the related item's values display on page load for the value that was previously selected?

M.

Jul 14, 2010 at 5:11 PM

Hey Guys,

I think I may have solved the problem with the data persisting, I've added a couple lines with 'if' statements into the function that runs during the "completefunc" portion of the SPDisplayRelatedItems call.  With these statements, the values only change on specific instances, like if the cell is empty, or if someone changes the lookup value.  Otherwise, the data persists even if the page reloads due to an improper click.  Here is the code that seemed to fix the problem:

 

$(document).ready(function(){
        //Calls SPServices function to retrieve data on document load.  Shortcut method to avoid recreating call.
                $().SPServices.SPDisplayRelatedInfo({    
                    columnName: "Template",
                    relatedList: "Templates",
                    relatedListColumn: "Title",
                    relatedColumns: ["StoredData1"],
                    displayFormat: "list",
                    //Hide Column Headers and the data output from original function, not using the function as originally designed
                    headerCSSClass: "ms-hidden",
                    rowCSSClass:"ms-hidden",
                    completefunc: SetFields
                });        
        });
        function SetFields(){
            var srcDivId = "SPDisplayRelatedInfo_Template";
            var tds = document.getElementById(srcDivId).getElementsByTagName("td");
            var Column1Data = tds[0].innerHTML;
            var theDropDown = getTagFromIdentifierAndTitle("select","","Template");            
            var theTextBox = getTagFromIdentifierAndTitle("input","","FirstItem"); 

           //This is what prevents it from being changed every time the page flips.
            if (theTextBox.value==""){
                theTextBox.value = Column1Data;                
            }
            else if (theTextBox.value!==Column1Data){                
                theDropDown.parentElement.onclick = function(){     //This only changes the value if they do not match and someone actually clicks on the "Template" box.              
                    theTextBox.value = Column1Data;            
                };
            }
           
        };

 

 

I know its ugly, but it works, I can probably clean it up some more and maybe try an "onchange" event in here somewhere, but so far I haven't gotten the "onchange" to work.

Sep 16, 2011 at 6:36 PM

Assume I don't qualify to be even a novice.  I have a content editor web part on a newform page with the code below. I am trying to get the data returned by the SPDisplayRelatedInfo pushed into a text field on the same form (the column "QuestionText").

the spjs-utility i obtained here http://sharepointjavascript.wordpress.com/2010/05/28/get-or-set-value-for-sharepoint-field-in-newform-editform-and-dispform-get-only-in-dispform/ which has functions to set/get a column value.

Although the data from SPDisplayRelatedInfo is displayed on the field I am not sure the completefunc is ever fired.  Can anyone see where I've gone wrong?

<script language="javascript" type="text/javascript" src="../../jQueryFiles/jquery-1.6.4.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jQueryFiles/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jQueryFiles/spjs-utility.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "Core Questions",
			relationshipListParentColumn: "Category",
			relationshipListChildColumn: "Title",
			parentColumn: "Category",
			childColumn: "CoreQuestionID",
			debug: true
		});
$().SPServices.SPDisplayRelatedInfo({
	columnName: "CoreQuestionID",
	relatedList: "Core Questions",
	relatedListColumn: "Title",
	relatedColumns: ["CoreQuestionText"],
	displayFormat: "list",
        completefunc: SetDefaultQuestionText
});

	});
function SetDefaultQuestionText(){
var srcDivId="SPDisplayRelatedInfo_CoreQuestionText";
var tds = document.getElementById(srcDivId).getElementsByTagName("td");
var Column1Data=tds[0].InnerHTML;
setFieldValue('QuestionText',Column1Data);
}

</script>
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $().SPServices.SPCascadeDropdowns({ relationshipList: "Core Questions", relationshipListParentColumn: "Category", relationshipListChildColumn: "Title", parentColumn: "Category", childColumn: "CoreQuestionID", debug: true }); $().SPServices.SPDisplayRelatedInfo({ columnName: "CoreQuestionID", relatedList: "Core Questions", relatedListColumn: "Title", relatedColumns: ["CoreQuestionText"], displayFormat: "list", completefunc: SetDefaultQuestionText }); }); function SetDefaultQuestionText(){ var srcDivId="SPDisplayRelatedInfo_CoreQuestionText"; var tds = document.getElementById(srcDivId).getElementsByTagName("td"); var Column1Data=tds[0].InnerHTML; setFieldValue('QuestionText,Column1Data); } // ]]></script>
Coordinator
Sep 16, 2011 at 6:46 PM

The completefuncx is only going to fire when the function is initially called, not on a selection.

What you'll want to do is bind to the change event for the CoreQuestionID column and run your script there.

M.

Sep 28, 2011 at 7:48 PM

Hi all.  I'm very much a newbie so please forgive me if I ask a dumb question or two.  Below is the code I used to do cascading drop downs and display related info.  It all works perfectly as advertised.  Then reality reared its ugly head.  I realized that my user would also need to see the related info when in display mode ... and of course since display mode has no dropdown, it won't show the related info.  So I figured, if I can write the related info to a SharePoint field during NewForm and EditForm, I could simply display the SharePoint fields in DispForm.  There seemed to be a way to write the related info into a SharePoint field, using the completefunc capability.  I have beat my head against the wall on this for two days ... and it's starting to hurt!  I have found that the function is called and executes properly, except the value returned from tds[0].InnerHTML is always "undefined".  The length of tds is 1.  If I set tds.InnerHTML to a string, I see the string displayed in the SharePoint field.  I also see that the related info is displayed directly below the Site Name field (as expected and correctly), so tds[0].InnerHTML should not be empty (undefined) ... but it appears to be!?  Can anyone help, please?  My code is below:


<script language="javascript" type="text/javascript" src="http://home.corp.primedia.com/Common%20code%20and%20utilities/jquery-1.6.4.min.js"></script>
<script language="javascript" type="text/javascript" src="http://home.corp.primedia.com/Common%20code%20and%20utilities/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://home.corp.primedia.com/Common%20code%20and%20utilities/spjs-utility.js"></script>
<script language="javascript" type="text/javascript">

 $(document).ready(function() {
 

/* Get Site and Test parent-child relationship  */
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Test Configuration",
   relationshipListParentColumn: "Site_x0020_Name",
   relationshipListChildColumn: "Title",
   parentColumn: "Site Name",
   childColumn: "Test Name",
   debug: true
  });

/* Get Site description */
  $().SPServices.SPDisplayRelatedInfo({
   columnName: "Site Name",
 relatedList: "Site Configuration",
 relatedListColumn: "Title",
 relatedColumns: ["Site_x0020_Description"],
 displayFormat: "list",
 completefunc: SetSiteDescription 
  });

/* Get Test Description, Start Date, and End Date.  */
  $().SPServices.SPDisplayRelatedInfo({
   columnName: "Test Name",
 relatedList: "Test Configuration",
 relatedListColumn: "Title",
 relatedColumns: ["Test_x0020_Start_x0020_Date","Test_x0020_End_x0020_Date","Test_x0020_Description_x002e_"],
 displayFormat: "list"
  });
 
/* Get Site and Segment parent-child relationship  */
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Segment Configuration",
   relationshipListParentColumn: "Site_x0020_Name",
   relationshipListChildColumn: "Title",
   parentColumn: "Site Name",
   childColumn: "Segment Name",
   debug: true
  });

/* Get Segment Description, Start Date, and End Date.  */
  $().SPServices.SPDisplayRelatedInfo({
   columnName: "Segment Name",
 relatedList: "Segment Configuration",
 relatedListColumn: "Title",
 relatedColumns: ["Test_x0020_Start_x0020_Date","Test_x0020_End_x0020_Date","Test_x0020_Description_x002e_"],
 displayFormat: "list" 
  });
 
  /* Get Test and Variance parent-child relationship  */
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Variance Configuration",
   relationshipListParentColumn: "Test_x0020_Name",
   relationshipListChildColumn: "Title",
   parentColumn: "Test Name",
   childColumn: "Variance Name",
   debug: true
  });


/* Get Variance Description.  */
  $().SPServices.SPDisplayRelatedInfo({
   columnName: "Variance Name",
 relatedList: "Variance Configuration",
 relatedListColumn: "Title",
 relatedColumns: ["Test_x0020_Description_x002e_"],
 displayFormat: "list" 
  });


 });
 
 function SetSiteDescription
 (){
  var srcDivId="SPDisplayRelatedInfo_Site_x0020_Name";
  var tds = document.getElementById(srcDivId).getElementsByTagName("td");
  var SiteDescript=tds[0].InnerHTML;
  var theSiteDescription = document.getElementById("ctl00_PlaceHolderMain_g_a7832bc4_f92a_4a82_96e6_18aa788ec00f_ff9_1_ctl00_ctl00_TextField"); 
/*  setFieldValue('Site Description',"My big test"); */
  theSiteDescription.value = SiteDescript; 
 }



 


Coordinator
Sep 30, 2011 at 5:29 AM

Robert:

As you've discovered, SPDisplayRelatedInfo was never meant to be used with a DispForm. It's completefunc runs once on setup in case you want to alter the structure of the output container in some way.

The best solution would be to replace the ListFormWebPart on the DispForm with a Data View Web Part (DVWP) which is customized to use an AggregateDataSource and display the additional data.

M.

Oct 3, 2011 at 2:28 PM

Hi Marc,

Thanks for the advice. As it turns out, I decided to create a webpart to populate the related info. Fields. It gave me a little more flexibility with the formatting. Again, thanks for taking the time to respond and for your advice.

Sincerely,

Robert Fuhr

Software Engineer, IT Department

Consumer Source Inc. a PRIMEDIA company

rfuhr@primedia.com

(678) 421-3528 office

From: sympmarc [email removed]
Sent: Friday, September 30, 2011 12:29 AM
To: Robert Fuhr
Subject: Re: Write columns using SPDisplayRelatedInfo [SPServices:216134]

From: sympmarc

Robert:

As you've discovered, SPDisplayRelatedInfo was never meant to be used with a DispForm. It's completefunc runs once on setup in case you want to alter the structure of the output container in some way.

The best solution would be to replace the ListFormWebPart on the DispForm with a Data View Web Part (DVWP) which is customized to use an AggregateDataSource and display the additional data.

M.

Feb 16, 2012 at 3:16 AM

Hi guys

$().SPServices.SPDisplayRelatedInfo

Its working only with single line of text datatype, not multiple.

As per previous posts  ---> what type of datatype is 'FirstItem' Column?  Bcoz text is not displaying in multiple text datatype column.

My Requirement is :

           to get the text come thru to multiple lines of text column.

Please anyone.

Any ideas.

 

Thanks.

 

 

 

 

Coordinator
Feb 16, 2012 at 2:01 PM

remo1114:

Can you explain more about what you are trying to do and post your code? Also, always better to start a new thread than add to a very old one unless your question is highly connected.

M.

Feb 16, 2012 at 10:28 PM

Hi Marc

Yes it is highly connected.

I have 2 lists:

ListB name-->Quote Term Type--->  columns: Title, Description(multiple lines of Text)

                   ----------     -----------------------------

                  Term1           terms and conditions related to term1..................

                 Term2            terms and conditions related to term2.................

ListA name--->Terms---> columns:  

                Terms( lookup to ListB:Title) , Description(Multiple lines of text)  

 

so when user select some value in ddl in ListA(ex: Term1) , related text should display in ListA: Description.

Its is displaying If I use ListA: Description as Single line of text, but I need the description column as Multiple lines of text.  ( not working with multiple lines of text column)

 

My Code:

 

<script language="javascript" type="text/javascript"  src="/testsite/SiteAssets/jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="/testsite/SiteAssets/jquery.SPServices-0.7.1.min.js"></script>

<script language="javascript" type="text/javascript">$(document).ready(function() {
$().SPServices.SPDisplayRelatedInfo({ 

columnName: "Terms", 

relatedList: "Quote Term Type", 

relatedListColumn: "Title", 

relatedColumns: ["Description"], 

displayFormat: "list", 

//Hide Column Headers and the data output from original function, not using the function as originally designed 

//headerCSSClass: "ms-hidden", 

//rowCSSClass:"ms-hidden", 

completefunc: SetFields,

debug: true

  });

}); 

function SetFields(){ 

          var srcDivId = "SPDisplayRelatedInfo_Terms";

          var tds = document.getElementById(srcDivId).getElementsByTagName("td");

          var Column1Data = tds[0].innerHTML; 

          var theDropDown = getTagFromIdentifierAndTitle("select","","Terms");  

           var theTextBox = getTagFromIdentifierAndTitle("input","","Description"); 

           //This is what prevents it from being changed every time the page flips.

            if (theTextBox.value==""){ 

              theTextBox.value = Column1Data;  

                         } 

          else if (theTextBox.value!==Column1Data){          

                     theDropDown.parentElement.onclick = function(){   

                      theTextBox.value = Column1Data;

                           }; 

          }     

              };

 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;         

          };

</script>

 

Cheers

Feb 29, 2012 at 5:09 AM

Hi marc

Any ideas. Appreciatable

 

Thanks

Mar 5, 2012 at 8:53 AM

I am trying to implement the solution to write columns using SPDisplayRelatedInfo. All works fine in FF. However, in IE.8 I am getting error ‘0.innerHTML’ is null or not an object

 

I display related info from TextBox and writing in TextBox here is my code:

<script type="text/javascript">

$(document).ready(function() {

       $().SPServices.SPDisplayRelatedInfo({      

               columnName:"Item Number",

               relatedList: "{95FDDCC5-4B57-4F5B-BD59-F91D486B1375}",

               relatedListColumn: "Title",

               relatedColumns: ["Item_x0020_Description"],

               displayFormat: "list",

               async: false,

               headerCSSClass: "ms-hidden",

               rowCSSClass:"ms-hidden",

              completefunc: getvalue,

               debug: true

         });      

});            

 

function getvalue() {

               var srcDivId = "SPDisplayRelatedInfo_Item_x0020_Number";

              

               var tds = document.getElementById(srcDivId).getElementsByTagName("td");

              

               var Column1Data = tds[0].innerHTML;

              

               var theTextBox = getTagFromIdentifierAndTitle("input","TextField","Quantity");

              

              var theTextBox1 = getTagFromIdentifierAndTitle("input","TextField","Item Number");

              

               alert("How am I gonna get this value? Answer is:" + Column1Data )

               
               theTextBox.value="";

              

               if (theTextBox.value=="")

                 {

                   theTextBox.value = Column1Data;              

                 }
                

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;

          

};  

</script>

Any thoughts?

Coordinator
Mar 6, 2012 at 12:55 AM

It sounds like time to debug in the browser. Given the error you are getting, my guess is that the issue is in this line:

 var Column1Data = tds[0].innerHTML;

M.

Mar 6, 2012 at 11:53 AM

Hi Marc,

You are right! var Column1Data = tds[0].innerHTML; is the issue. Debug in the browser shows only the line. I am using  jquery-1.7.1.min.js is there any issue with it?

Pawel

Coordinator
Mar 6, 2012 at 1:49 PM

I would inspect tds before that line and see what it contains.

You also might want to use jQuery selectors rather than JavaScript since you're already using jQuery.

var srcDivId = "SPDisplayRelatedInfo_Item_x0020_Number";
var tds = document.getElementById(srcDivId).getElementsByTagName("td");
var Column1Data = tds[0].innerHTML;

becomes

var Column1Data = $("div#SPDisplayRelatedInfo_Item_x0020_Number td:first").html();

BTW, this code assumes that there will only be one item returned from SPDisplayRelatedInfo.

M.

Mar 7, 2012 at 8:47 AM

Thanks Marc, using JQuery selector solved the problem with IE 8. ;)

As always professional advice ;)

 

Thanks Pawel

 

For those who intend to use the solution here is the code

thats works in IE 8:

<script type="text/javascript">
$(document).ready(function() {
        $().SPServices.SPDisplayRelatedInfo({       
               columnName:"Item Number", 
               relatedList: "{YourListName}",
               relatedListColumn: "Title",
               relatedColumns: ["Item_x0020_Description"],
               displayFormat: "list",
               completefunc: getvalue,
               debug: true
      });
$().SPServices.SPAutocomplete({  

            sourceList: "{YourListName}",  

            sourceColumn: "Title",  

            columnName: "Item Number",  

            numChars: 2,  

            ignoreCase: true,

            slideDownSpeed: 100,  

            debug: true 

        });  

});

function getvalue() {
                
               var Column1Data = $("div#SPDisplayRelatedInfo_Item_x0020_Number td:first").html();
    
               var theTextBox = getTagFromIdentifierAndTitle("input","TextField","Item Description");
                
               var theTextBox1 = getTagFromIdentifierAndTitle("input","TextField","Item Number");
             
               theTextBox.value="";
                
               if (theTextBox.value=="")
                {
                theTextBox.value = Column1Data;                
                }
 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;
        }  
    };
  
</script>
Mar 7, 2012 at 2:17 PM

Having this working, it come another issue. I have two People Picker columns on this same form.

var theTextBox = $('div.ms-inputuserfield').text(Column1Data); Works perfect. However, it is writing into all the people picker columns on the form (Column1Data).

The question is how you can distinguish People Picker columns extending $('div.ms-inputuserfield'). ? Or maybe there is another way to do it?

BTW.

getTagFromIdentifierAndTitle doesn’t work and form is customized in SD

 

Any ideas?

Pawel

Coordinator
Mar 12, 2012 at 2:52 AM

freetec:

You should tighten up your selector. See this post for more details.

M.

Mar 13, 2012 at 1:46 PM

Thanks Marc