1

I have a web-part created using SP Services to display Announcements on my SharePoint.

I have tried to copy this web part and display different list (also announcements) however I'm having trouble that both web parts display now both lists together instead of each own Announcements list.

List 1 name: Announcements
List 2 name: Internal_Updates

Both web parts are on the same page:

Code for web part 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

An XHTML 1.0 Strict standard template -->

<!--<script type="text/javascript" src="../pageScriptJS/jQuery/jquery-1.12.2.min.js"></script>--> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-1.12.2.min.js"></script> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js"></script> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery.SPServices-2014.02.js"></script> <link rel="stylesheet" href="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" /> <style type="text/css"> .tabsWrapper .tabs li a{ color: white !important; font-size: 15px; } .tabsWrapper{ width: 100%; } .tabsWrapper div{ font-size: 15px; font-family: arial; text-decoration: none; } .tabsWrapper div a{ text-decoration: none; } .tabsWrapper div table{ border-collapse: collapse; width: 100%; } .tabsWrapper div table td{ padding-bottom: 5px; padding-top: 5px; } .tabsWrapper div table td:hover{ border: 1px solid black; background: #4C67B6; color: white; } .tabsWrapper div table td a:visited{ text-decoration: none; color: black; } .tabsWrapper div table td:hover a{ color: white; display: inline-block; width: 100%; text-decoration: none; } .addNew{ float: right; top: 5px; right: 5px; font-size: 15px; color: black; padding: 5px 5px 5px 5px; } .addNew:hover{ background: #007FFF; cursor: pointer; border: 1px solid black; } .searchWrapper{ width: 100%; border-bottom: 1px solid black; } .searchWrapper div{ margin: 5px 5px 5px 5px; } </style> </head> <body> <div class="tabsWrapper" id="regAnnArea"> <ul class="tabs"> <span class="addNew" onclick="window.open('/Lists/Announcements/NewForm.aspx')">Add New</span> <li><a href="#tabs-1">OPS Announcements</a></li> </ul> <div class="searchWrapper"> <div> <label for="regAnnSearchBox">Search:</label> <input type="text" id="regAnn" class="searchBox" /> </div> </div> <div id="tabs-1"><table></table></div> <a href="#">subscribe</a> </div> <br /><br /> <script type="text/javascript"> $(document).ready(function(){ //init tabs $(".tabsWrapper").tabs(); //string to get html ready to be apended var regAnnString = ""; var procAnnString = ""; var procString = ""; //prepare all necessary data to be pulled from SP regarding regular announcements $().SPServices({ operation: "GetListItems", webUrl: "/Lists/Announcements.aspx", async: false, listName: "Announcements", CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>", completefunc: function (xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { //title of the pulled DOM element from SP var title = $(this).attr('ows_Title'), //id of the pulled DOM elelent from SP annID = $(this).attr('ows_ID'); //string changes based on DOM elements pulled from SP regAnnString += "<tr><td><a target='_blank' href='/Lists/Announcements/DispForm.aspx?id="+annID+"'>"+title+"</a></td></tr>"; }); //append ready string to html table $(".tabsWrapper #tabs-1 table").append(regAnnString); } }); //search thingy for all $('.searchBox').on('keyup', function(){ var userValue = $(this).val().toLowerCase(); var id = $(this).attr('id'); $("#"+id+"Area div table tr").each(function(){ var $row = $(this); var cellValue = $(this).children('td:first').text().toLowerCase(); cellValue.indexOf(userValue) != -1? $row.show() : $row.hide(); }); }); }); </script> </body>

Code for web part 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

An XHTML 1.0 Strict standard template -->

<!--<script type="text/javascript" src="../pageScriptJS/jQuery/jquery-1.12.2.min.js"></script>--> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-1.12.2.min.js"></script> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js"></script> <script type="text/javascript" src="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery.SPServices-2014.02.js"></script> <link rel="stylesheet" href="/scripts/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" /> <style type="text/css"> .tabsWrapper .tabs li a{ color: white !important; font-size: 15px; } .tabsWrapper{ width: 100%; } .tabsWrapper div{ font-size: 15px; font-family: arial; text-decoration: none; } .tabsWrapper div a{ text-decoration: none; } .tabsWrapper div table{ border-collapse: collapse; width: 100%; } .tabsWrapper div table td{ padding-bottom: 5px; padding-top: 5px; } .tabsWrapper div table td:hover{ border: 1px solid black; background: #4C67B6; color: white; } .tabsWrapper div table td a:visited{ text-decoration: none; color: black; } .tabsWrapper div table td:hover a{ color: white; display: inline-block; width: 100%; text-decoration: none; } .addNew{ float: right; top: 5px; right: 5px; font-size: 15px; color: black; padding: 5px 5px 5px 5px; } .addNew:hover{ background: #007FFF; cursor: pointer; border: 1px solid black; } .searchWrapper{ width: 100%; border-bottom: 1px solid black; } .searchWrapper div{ margin: 5px 5px 5px 5px; } </style> </head> <body> <div class="tabsWrapper" id="regAnnArea"> <ul class="tabs"> <span class="addNew" onclick="window.open('/Lists/Internal_Updates/NewForm.aspx')">Add New</span> <li><a href="#tabs-2">OPS Internal Updates</a></li> </ul> <div class="searchWrapper"> <div> <label for="regAnnSearchBox">Search:</label> <input type="text" id="regAnn" class="searchBox" /> </div> </div> <div id="tabs-1"><table></table></div> <a href="#">subscribe</a> </div> <br /><br /> <script type="text/javascript"> $(document).ready(function(){ //init tabs $(".tabsWrapper").tabs(); //string to get html ready to be apended var regAnnIString = ""; var procAnnIString = ""; var procIString = ""; //prepare all necessary data to be pulled from SP regarding regular announcements $().SPServices({ operation: "GetListItems", webUrl: "/Lists/Internal_Updates.aspx", async: false, listName: "Internal_Updates", CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>", completefunc: function (xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { //title of the pulled DOM element from SP var title = $(this).attr('ows_Title'), //id of the pulled DOM elelent from SP annID = $(this).attr('ows_ID'); //string changes based on DOM elements pulled from SP regAnnIString += "<tr><td><a target='_blank' href='/Lists/Internal_Updates/DispForm.aspx?id="+annID+"'>"+title+"</a></td></tr>"; }); //append ready string to html table $(".tabsWrapper #tabs-2 table").append(regAnnIString); } }); //search thingy for all $('.searchBox').on('keyup', function(){ var userValue = $(this).val().toLowerCase(); var id = $(this).attr('id'); $("#"+id+"Area div table tr").each(function(){ var $row = $(this); var cellValue = $(this).children('td:first').text().toLowerCase(); cellValue.indexOf(userValue) != -1? $row.show() : $row.hide(); }); }); });

Improve this question
10
  • Your question is bit confusing. Are you trying to get the list items from "Announcements" list or "Internal_Updates" list? Are you adding both the webparts on same page or different? Commented Mar 2, 2020 at 9:47
  • Hi Ganesh, thanks for your reply. I'm adding both webparts on the same page. Commented Mar 2, 2020 at 9:52
  • Can you please put the code to get the data from the 1st list? Also, please change the variable names in the above code and check the result. No variable name should be common in both the snippet. Commented Mar 2, 2020 at 9:56
  • The second webpart looks like this, I place both on the same page: Commented Mar 2, 2020 at 9:59
  • The second web part looks looks exactly the same with Internal_Updates changed to Announcements in URL's/list names, I place both on the same page: Commented Mar 2, 2020 at 10:02

1 Answer 1

Reset to default
1

Please update the variable names in your 1st web part.

Make sure variable names are unique for both the web part.

Update1:

Set the different IDs for tab in HTML for both the web parts.

i.e., for Announcement List: $(".tabsWrapper #tabs-1 table").append(regAnnString)

for Internal_Updates List: $(".tabsWrapper #tabs-2 table").append(regAnnIString)

Update 2:

In the HTML of Internal_Updates web part, you have missed updating the ID of div.

Kindly update the div Id to tabs-2

Improve this answer
7
  • Edited question with changes to tabs name. Now both web parts are showing items from Announcements, no items from Internal_Updates anymore :( Commented Mar 2, 2020 at 10:51
  • can you provide the Inspect element of your web part in Which we can see the HTML structure? Commented Mar 2, 2020 at 10:56
  • 1
    Not sure how to do that. I can post whole html including JS part in the question. Commented Mar 2, 2020 at 10:57
  • that will be great Commented Mar 2, 2020 at 11:00
  • 1
    Haha, it worked finally, thank you so much @Litt Spector! Commented Mar 2, 2020 at 11:17

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.