Can the "Script Editor" webpart retrieve values from a list?

Question

I am trying to edit the "Post.aspx" page of my blog. Here are the steps that I am trying to take:

I go to any random blog post. I click on "edit". I then click on "Add Web Part" on the Right hand side. I then add a "Script Editor" Web Part. I plan to add a custom field to the blog; but for now it would help if I could get any value from the "Posts" list in to this web part.

Here is an example of something that does work. What I would like to do is have this web part actually retrieve the src URL part from a custom field in the list rather than the hard coded url in this script. So if there is any way for me to retrieve data in to this script editor web part that would be great.

<div id="sidebar">

    <iframe width="420" height="315" src="https://www.youtube.com/embed/fTTPYH-o5YM" frameborder="0" allowfullscreen></iframe>

</div>

Answer 1

You can use SPServices to grab the column you want, and set the iFrame source with it. Give your iFrame an ID if you can, otherwise select it from its parent div. In your script editor, add the following (replace the query if necessary) :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js">  </script>

$(document).ready(function () {

var frameSrc;
var id = 1;
$().SPServices({
    operation: 'GetListItems',
    async: false,
    debug: false,
    listName: 'Posts',
    CAMLQuery: '<Query><Where><Eq><FieldRef Name="ID"/><Value Type="Counter">' + id +  '</Value></Eq></Where></Query>',
    completefunc: function (xData, Status) {
             var xNode = $(xData.responseXML).SPFilterNode("z:row")[0];
             $(xData.responseXML).SPFilterNode("z:row").each(function () {
                 //ows_CustomField
                 frameSrc = $(this).attr("ows_LinkFilename");
             });
         }
     }
  });

   //Set the iFrame src
   $('#myIframe').attr('src', frameSrc);

});