Hi All,
I'm new to using JQuery so bear with me.
I had implmented some code based on a js file that I found online which enables a series of div tags within a nested structure on my page to step through and show each one individually on
the page. This all works great when I define
the div tags as static entries in
the masterpage. I should add that this is being implemented in a SharePoint master page.
Ultimately though, with a static collection of div tags ideally containing an image with some descriptive text, and a hyperlink its not very flexible. Roll on my changes to make this a little more configurable. I have implemented some additional code that will read from a SharePoint list via an ajax call to
the lists web service. For each entry in
the list I am building a div tag that contains
the information required dynamically. For testing, I am only pulling
the title through at present.
I have used
the following code:
$('#beltDiv').append(divHTML)
to append
the divs in
the loop that are created to my nested structure on
the page. I figured that this would cause
the fade code to work as expected but I was wrong. It doesn't do anything at all.
When check
the source on
the page,
the div tags are not shown. They are however available in
the DOM model when viewed through
the IE developer toolbar.
The issue (I think) looks to be that
the initiation of
the featureFade code is not working due to
the div tags being unavailable. Is there a way to address this?
The code used is shown below:
<script type="text/javascript">
$(document).ready(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Carousel Items</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function() {
var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/01.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P> </P><P> </P><P> </P><P> </P></div></div></div></div>";
$("#beltDiv").append(divHTML);
});
}
featureFade.setup({
galleryid: 'headlines',
beltclass: 'belt',
panelclass: 'panel',
autostep: { enable:
true, moveby: 1, pause: 10000 },
panelbehavior: { speed: 1000, wraparound:
true },
stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"],
defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" }
});
The section where
the div tags are dynamically appended is shown below. I've commented out
the static div tags that work as expected.
The only change is that these are implmented by
the JQuery logic:
<div class="homeFeature" style="display:inline-block">
<div id="headlines" class="headlines">
<div id="beltDiv" class="belt">
<!--
<div id="divPanel_ct01" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/01.jpg'); background-repeat:no-repeat">Static Test 1</div>
<div id="divPanel_ct02" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/02.jpg'); background-repeat:no-repeat">Static Test 2</div>
-->
</div>
</div>
I'm stumped as to why it's not recognising
the dynamically added elements in
the DOM. Any help would be greatly appreciated on this.
I'm happy to provide any further information on this.
Thanks in advance,
Grant
Further to
the answer recieved: I have modified
the function call:
function processResult(xData, status)
{
$(xData.responseXML).find("z\\:row").each(
function()
{
/*alert($(this).attr("ows_ImagePath"));*/
var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/ClydePort01big.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P> </P><P> </P><P> </P><P> </P></div></div></div></div>";
$("#beltDiv").append(divHTML);
}
);
featureFade.setup(
{
galleryid: 'headlines',
beltclass: 'belt',
panelclass: 'panel',
autostep: { enable:
true, moveby: 1, pause: 10000 },
panelbehavior: { speed: 1000, wraparound:
true },
stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"],
defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" }
}
);
}
