I want to insert values from a query of SPServices to populate an existing formatted div. Or create divs on the fly that float left on the page. I am close but having issues with my append statement to get the info in the divs. Here is what I have so far. Thanks in advance...
function GetNewsItems() {
var newsId = 0;
var count;
var method = "GetListItems";
var myList = "PlacardImages";
var fieldsToRead = "<ViewFields>" +
"<FieldRef Name='Title' />" +
"<FieldRef Name='Caption' />" +
"<FieldRef Name='Name' />" +
"<FieldRef Name='ID' />" +
"<FieldRef Name='LinkFilenameNoMenu' />" +
"</ViewFields>";
var query = "<Query>" +
"<Where>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='Title'/>" +
"</OrderBy>" +
"</Query>";
//Get the count of items in the list
$().SPServices({
operation: method,
async: false,
listName: myList,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
completefunc: function (xData, Status) {
count = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
}
});
$().SPServices({
operation: method,
async: false,
listName: myList,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var name = ($(this).attr("ows_Title")).split(",")[0];
var nameURL = ($(this).attr("ows_Title")).split(",")[1]; //undefined?? we want this to be complete url
var pictureURL = ($(this).attr("ows_LinkFilenameNoMenu")); //.split(",")[0];
pictureURL = "<img src='http://employees.blah.org/sites/development/Placards/" + pictureURL + "' alt=''>"
var caption = ($(this).attr("ows_Caption"));
var imageId = ($(this).attr("ows_ID"));
//call a function to add the data from the row to the screen
newsId++;
AddToNewsDiv(name, caption, pictureURL, imageId,newsId)
alert('name: '+name+" caption: "+caption+" pictureURL: "+pictureURL+" imageId: "+imageId+" newsId: "+newsId+" nameURL: "+nameURL);
});
}
});
}
function AddToNewsDiv(name, caption, pictureURL, imageID, newsId) {
//alert ('AddToNewsDiv name : ' + name + ' pictureURL : ' + pictureURL + ' caption: ' + caption );
$("#rssjbNews").append("<div class='rssjb span6' id='news" + newsId + "' ><ul><LI><DIV class='news-outer'><DIV class='news-inner'>" +
"<A class='title' href='http://employees.blah.org/" + imageID + "' target='_blank'>" + name +
"</A>" +
"<SPAN class='excerpt'>" + caption +
" more » </SPAN></DIV>" +
"<A class='news-label' href='http://employees.blah.org/'><SPAN>News</SPAN></A>" +
"</DIV></LI></ul></div>");
};
/* Current HTML looks like this :
<DIV id="news-container">
<DIV id="slides">
<DIV class="news">
<DIV class="rssjb">
<UL>
<LI>
<DIV class="news-outer">
<DIV class="news-inner">
<A class="title" href="http://employees.blah.org/" target="_blank">Sewage Infected With Ebola Virus May Require Longer Holding Period, Researchers Find</A>
<SPAN class="excerpt">ATLANTA–Storing Ebola-infected sewage for a week at 86° Fahrenheit or higher should allow enough time for more than 99.99 percent of the virus to die, though lower ambient temperatures may require a longer holding period, according to a new study by researchers at Georgia State University’s School of Public Health. more» </SPAN><a class="btn" href="#">View details »</a>
</DIV>
<A class="news-label" href="http://employees.blah.org/"><SPAN>News</SPAN></A>
</DIV>
</LI>
<LI>
<DIV class="news-outer">
<DIV class="news-inner">
<A class="title" href="http://employees.blah.org/" target="_blank">Blend Of Mental Practice And Physical Therapy Effective Treatment For Stroke, Research Shows</A>
<SPAN class="excerpt">ATLANTA—A combination of mental practice and physical therapy is an effective treatment for people recovering from a stroke, according to researchers at Georgia State University. The findings, published on March 30 in the journal Frontiers in Human Neuroscience, examine how the brains of stroke patients change after treatment. Mental practice and physical therapy are interventions¦ more»</SPAN><a class="btn" href="#">View details »</a>
</DIV>
<A class="news-label" href="http://employees.blah.org/"><SPAN>News</SPAN></A>
</DIV>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
</DIV>
*/
/* Current CSS for news classes:
article {
padding: 20px 0;
}
.news {
background: rgb(255, 255, 255);
}
.news::before {
line-height: 0;
display: table;
content: "";
}
.news::after {
line-height: 0;
display: table;
content: "";
}
.news::after {
clear: both;
}
.news::before {
line-height: 0;
display: table;
content: "";
}
.news::after {
line-height: 0;
display: table;
content: "";
}
.news::after {
clear: both;
}
.news ul {
margin: 0px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 15px;
}
.news ul li {
background: white;
list-style: none;
width: 40%;
height: 100px;
line-height: 16px;
overflow: hidden;
font-size: 12px;
vertical-align: top;
display: table-cell;
position: relative;
border: 1px solid #C1A117;
}
.news ul li .news-outer {
padding: 10px 30px 10px 10px;
height: 80px;
position: relative;
}
.news ul li .news-outer .news-inner {
height: 80px;
overflow: hidden;
position: relative;
}
.news ul li .news-outer .news-label {
background: rgb(204, 0, 0);
padding: 0px 5px;
transform-origin: left bottom;
left: 100%;
width: 200px;
height: 20px;
bottom: 0px;
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 20px;
font-size: 14px;
position: absolute;
box-sizing: border-box;
transform: rotate(-90deg);
-moz-box-sizing: border-box;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-box-sizing: border-box;
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
}
.news ul li .news-outer .news-inner a:first-child {
line-height: 24px;
font-size: 18px;
font-weight: bold;
display: block;
}
*/
Got it. I used
And just hardcoded the container divs like: