Question

Appreciate some insight given the following code:

<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>video_player</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 liHtml = "<a href='" + $(this).attr("ows_Title") + "'><img src='" + $(this).attr("ows_snapshot_file_location") + "' width=120 height=90><strong>" + $(this).attr("ows_video_description") + "</strong><br /><br />" + $(this).attr("ows_video_description") + "<em>" + $(this).attr("ows_video_length") + "</em></a><br />";
        //{missing code}//
    });
}
</script>

What code should I enter inside the //{missing code}// such that I can store the variable ‘lihtml’ into a array that can be used in any javascript? (I wish to use document.write() to display the “lihtml” variable.

UPDATE 1:
After taking minus4 consideration, the code is as follows:

<script type="text/javascript">
var glob;

$(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>video_player</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 liHtml = "<a href='" + $(this).attr("ows_Title") + "'><img src='" + $(this).attr("ows_snapshot_file_location") + "' width=120 height=90><strong>" + $(this).attr("ows_video_description") + "</strong><br /><br />" + $(this).attr("ows_video_description") + "<em>" + $(this).attr("ows_video_length") + "</em></a><br />";
        glob.append(liHtml);
    });
}
</script>

and at the other part of the same document, I used

<script type="text/javascript">
document.write(glob);
</script>

and now, I receive the ‘undefined’ error. Any insight?

Answer 1

Try –

var glob = [];

then –

function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
        var liHtml = "<a href='" + $(this).attr("ows_Title") + "'><img src='" + $(this).attr("ows_snapshot_file_location") + "' width=120 height=90><strong>" + $(this).attr("ows_video_description") + "</strong><br /><br />" + $(this).attr("ows_video_description") + "<em>" + $(this).attr("ows_video_length") + "</em></a><br />";
        glob.push(liHtml);
    });
}

and for output –

document.write(glob.join(""));

That should build up a dynamic array of your html strings, that can be output via the array.join method. I think the problem with you original code is you’re using `append’ on a normal JavaScript variable when it is a jQuery specific function. Adding the content to a dynamic array should have the same effect.