Post
Ask Question

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.

  1. <table cellpadding="0" cellspacing="0" class="slidingshell" style="width:25%;">  
  2.     <tr>  
  3.        <td>  
  4.           <a id="videoimg" ></a>  
  5.        </td>  
  6.     </tr>  
  7. </table>  
  8. <h2>  
  9.     <a id="videotitle" ></a>  
  10. </h2>  
  11. <h3>  
  12.     <p id ="videodescription"></p></br>  
  13.     <a id="clickurl"></a>  
  14. </h3>  
  15. </div>  
  16. <!-- .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:
  1. $(document).ready(function() {  
  2. var i=1;  
  3. //Query your custom list here  
  4. 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.

  1. var valuedes=[];  
  2. var valuetitle=[];  
  3. var valueimgurl=[];  
  4. var valuevideourl=[];  
  5. var valueassettype=[];  
  6.   
  7. //Call SP Services to get all data from the list  
  8. $().SPServices({  
  9.                 operation: "GetListItems",  
  10.                 listName: "CAROUSEL",  
  11.                 async: false,  
  12.                 CAMLQuery: query1,          
  13.                 completefunc: function (xData, Status) {  
  14.                 alert(xData.responseText);  
  15. var test1 = xData.responseText;  
  16. data1 = $.parseXML(test1),  
  17. $test1 = $(data1);                                  
  18.                 $(test1).find("z\\:row").each(function(){       
  19.         valuedescription[i]=$(this).attr("ows_Description");  
  20.                 valuetitle[i]=$(this).attr("ows_LinkTitle");         
  21.         valueimgurl[i]=$(this).attr("ows_Preview_x0020_Picture_x0020_URL");  
  22.         valueimgurl[i]=valueimgurl[i].split(",")[0];  
  23.                 valuevideourl[i]=$(this).attr("ows_Asset_x0020_URL");  
  24.         valuevideourl[i]=valuevideourl[i].split(",")[0];       
  25.         //It will start looping for all the IDs present in the group  
  26.         i=i+1;  
  27.     });    
  28.   }    
  29. });  
  30.      
  31. var val1=[];  
  32. var val2=[];  
  33. var val3=[];  
  34. var val4=[];  
  35. var val5=[];  
  36.    
  37. for(var j=1;j<=i;j++)  
  38. {    
  39.     val1[j]="<a id=\"videoimg"+j+"\" href=\"" + valuevideourl[j]+ "\" target=\"_blank\"><img src=\"" + valueimgurl[j] + "\"  /></a>";    
  40.     val2[j]= "<a id=\"videotitle"+j+"\" href=\""+ valuevideourl[j] +"\" target=\"_blank\"> \""+ valuetitle[j] + "\"</a>";    
  41.     val3[j] = "<p id =\"videodescription"+j+"\">\""+ valuedescription[j] +"\"<a href=\""+ valuevideourl[j] +"\"  target=\"_blank\"></a>   </p>";    
  42.     val4[j] ="<a id=\"heading"+j+"\" href=\"#\">"+ valuetitle[j] +"</a>";    
  43. }  
  44.     // 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.    
  45.     $('#videoimg').html(val1[1]);    
  46.     $('#videotitle').html(val2[1]);    
  47.     $('#videodescription').html(val3[1]);    
  48.     $('#clickurl').html(val5[1]);   
  49. }); 

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.


Similar Articles