html - Dynamic population of a div from SPServices with javascript -
i want insert values query of spservices populate existing formatted div. or create divs on fly float left on page. close having issues append statement info in divs. here have far. 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 count of items in 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?? want 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 function add data row 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 : <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 ebola virus may require longer holding period, researchers find</a> <span class="excerpt">atlanta–storing ebola-infected sewage week @ 86° fahrenheit or higher should allow enough time more 99.99 percent of virus die, though lower ambient temperatures may require longer holding period, according new study researchers @ 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 , physical therapy effective treatment stroke, research shows</a> <span class="excerpt">atlanta—a combination of mental practice , physical therapy effective treatment people recovering stroke, according researchers @ georgia state university. findings, published on march 30 in journal frontiers in human neuroscience, examine how brains of stroke patients change after treatment. mental practice , physical therapy 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 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. used
function addtonewsdiv(name, caption, pictureurl, imageid, newsid, nameurl) { var mydiv = "rssjbnews"+newsid; //alert("mydiv: "+mydiv); //alert ('addtonewsdiv name : ' + name + ' pictureurl : ' + pictureurl + ' caption: ' + caption ); $("#"+mydiv).append("<a class='title' href='http://employees.blah.org/' target='_blank'>"+name+ "</a><span class='excerpt'>"+caption+" |</span><a class='btn-mini' href='"+nameurl+"'>view details »</a>"); }; and hardcoded container divs like:
<div class="news-outer"> <div class="news-inner" id="rssjbnews1"></div> <a class="news-label" href="http://employees.blah.org/">span>news</span></a></div>
Comments
Post a Comment