SharePoint 2010 - MetroTabs & SpServices . All Lists get rendered in first TAB

Question

Goodmorning guys,

I'm working on a SP2010 project for a internship. The company has multiple SSRS reports which they would like to make accesable trough UI buttons on the front page.

These reports are devided in multiple catagories. So I used the MetroTabs solution from Kevin Guyer to devide each catagorie in it's own tab. MetroTabs essentially takes al your webparts on the page and puts them in Tabs.

http://kevinguyer.squarespace.com/blog/2013/4/3/metro-style-easy-tabs-for-sharepoint-2010-1.html

As following I made multiple SP-Lists from which I pull fields ( e.g. Title, Url ) via SPServices/Jquery/CAML.

I execute the code below in a CEWP to get the list-fields per row and display these as custom buttons in the tab.

When executed its not a problem for 1 CEWP.

However, When I make multiple CEWP's (each with it's own JS) which all pull fields from different list it shows al the links in the first Tab while all the other remaining tabs are empty.

What am I doing wrong here? Essentialy I would like SharePoint to execute the JS when related Tab is selected. My Code does have $(document).ready(function() { for each JS file so I suspect that could be a issiue.

******EDIT***** Tried to render the lists in different CEWP's without the TABS. It does not execute the code in multiple CEWP's but rather the most recent one. So figured the MetroTabs isn't the problem here.

---

Appriciate any feedback guys and thanks in advance.

The First TAB

Second TAB

$(document).ready(function() { 

    GetListX(); //

 //I name this function depending on the name of the list.             
 //So each SP-list has its own function and it's own JS-file.

});

function GetListX() //Function to retrieve list

{

var method = "GetListItems";


var list = "ListNameX"; //Name of the list from which to pull fields


var fieldsToRead =     "<ViewFields>" +
                        "<FieldRef Name='Title' />" +
                        "<FieldRef Name='Url' />" +
                        "<FieldRef Name='RapportID' />" +
                    "</ViewFields>";


var query = "<Query>" +
                "<Where>" +
                    "<Neq>" +
                        "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                    "</Neq>" +
                "</Where>" +
                "<OrderBy>" + 
                    "<FieldRef Name='Title'/>" +
                "</OrderBy>" +
            "</Query>";


$().SPServices({
    operation: method,
    async: true,
    listName: list,
    CAMLViewFields: fieldsToRead,
    CAMLQuery: query,
    completefunc: function (xData, Status) { 
        $(xData.responseXML).SPFilterNode("z:row").each(function() { 

            var link = ($(this).attr("ows_Url")).split(",")[0];

            var name = ($(this).attr("ows_Title"));


            var rapportID = ($(this).attr("ows_RapportID"));

            AddRowToTable( name, link, rapportID);

        });                
    }
});

}

function AddRowToTable(name, link, rapportID)
{
    $("#container").append("<a target=\"_blank\" href='" + link + "'><div class=\"RapportRij\">" + name + "</div></a>");

}

</script>

<div>
<div id="container">


</div>
</div>

Answer 1

Have you updated the container id accordingly for each tab?

<div id="container">

Update: This should be library design logic, below is my test sample:

I think you have to modify the library logic, or try with other tab librarys. reference