Appending HTML Tags of Content Editor Webpart Using Java Script in SharePoint

I know that when we people use a screen saver or a slider on our Home Pages we need to hard code our URLs for images or videos in our sliders to get it working.

Here I bring you a new concept of doing it without hardcoding the values.

I know it's tricky, but I learned the trick and soon you will too.

Here you see the following is an example of HTML code that we place in a content editor web part.

<table cellpadding="0" cellspacing="0" class="slidingshell" style="width:25%;">
    <tr>
       <td>
          <a id="videoimg" ></a>
       </td>
    </tr>
</table>
<h2>
    <a id="videotitle" ></a>
</h2>
<h3>
    <p id ="videodescription"></p></br>
    <a id="clickurl"></a>
</h3>
</div>
<!-- .slide-->

• Prepare a SharePoint Custom List where you can have columns for Video/Image URL, a Title column and a Description column.
• Go to the page where you have placed the following HTML code.
• Add a JavaScript file there shown as in the following:

$(document).ready(function() {
var i=1;
//Query your custom list here
var query1 = "<Query><OrderBy><FieldRef Name='ID' Ascending='TRUE'/></OrderBy></Query>";

Assign the variables to an array, so that you don't need to call it every time.

var valuedes=[];
var valuetitle=[];
var valueimgurl=[];
var valuevideourl=[];
var valueassettype=[];

//Call SP Services to get all data from the list
$().SPServices({
                operation: "GetListItems",
                listName: "CAROUSEL",
                async: false,
                CAMLQuery: query1,
                completefunc: function (xData, Status) {
                alert(xData.responseText);
var test1 = xData.responseText;
data1 = $.parseXML(test1),
$test1 = $(data1);
                $(test1).find("z\\:row").each(function(){
        valuedescription[i]=$(this).attr("ows_Description");
                valuetitle[i]=$(this).attr("ows_LinkTitle");
        valueimgurl[i]=$(this).attr("ows_Preview_x0020_Picture_x0020_URL");
        valueimgurl[i]=valueimgurl[i].split(",")[0];
                valuevideourl[i]=$(this).attr("ows_Asset_x0020_URL");
        valuevideourl[i]=valuevideourl[i].split(",")[0];
        //It will start looping for all the IDs present in the group
        i=i+1;
    });
  }
});

var val1=[];
var val2=[];
var val3=[];
var val4=[];
var val5=[];

for(var j=1;j<=i;j++)
{
    val1[j]="<a id=\"videoimg"+j+"\" href=\"" + valuevideourl[j]+ "\" target=\"_blank\"><img src=\"" + valueimgurl[j] + "\"  /></a>";
    val2[j]= "<a id=\"videotitle"+j+"\" href=\""+ valuevideourl[j] +"\" target=\"_blank\"> \""+ valuetitle[j] + "\"</a>";
    val3[j] = "<p id =\"videodescription"+j+"\">\""+ valuedescription[j] +"\"<a href=\""+ valuevideourl[j] +"\"  target=\"_blank\"></a>   </p>";
    val4[j] ="<a id=\"heading"+j+"\" href=\"#\">"+ valuetitle[j] +"</a>";
}
    // Here the below code  will append the HTML coding automatically, you need not everytime change the url and other details for every change in your Home Page.
    $('#videoimg').html(val1[1]);
    $('#videotitle').html(val2[1]);
    $('#videodescription').html(val3[1]);
    $('#clickurl').html(val5[1]);
});

It will resolve many concerns, especially of the clients to pay the developers every time for making the HTML changes to their Home Pages so now they can change it on a list using a simple form and the result will exist directly on the Home Page without even touching the code.

For the developers it will save a lot of time especially when they don't have any.