JQuery Dynamic Element - In DOM but unable to bind
- by Grant80
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" }
}
);
}
