1

I noticed I can't embed inline javascript in an SPO 2013 Web Part page, but can reference a library.

I'm outputting a table from that js. If I put alerts that table displays but then disappears once the code proceeds.

Any way to do this without jsrender?

Suspect the table needs to be in the embedded markup code.

This is a function in a jquery library i reference in SiteAssets.

      $.ajax({
                url: 'https://xxxx/SearchValues/' ,
                data: 'SearchData=' + searchData,
                type: 'GET',
                dataType: 'json',
              //  jsonp: 'jsonp-callback',
                success: function (data) {
           //       alert("before write response");
                    WriteResponses(data);
                },
                error: function (x, y, z) {
                    alert(x + '\n' + y + '\n' + z);
                }
            }); 



            //Display results  in a table
            function WriteResponses(SitesList) {
                var strResult = "<table border='1px'><th width='20px'>ID</th><th width='100px'>TITLE</th><th 

width='100px'>FARM</th><th width='250px'>URL</th><th width='100px'>OWNERS</th><th width='200px'>ADMINISTRATORS</th>";
                $.each(SitesList, function (index, oSite) {
                    strResult += "<tr><td>" + oSite.LS_ID + "</td><td> " + oSite.LS_TITLE + "</td><td>" + oSite.LS_FARM + 

"</td><td>" + oSite.LS_SITE_URL + "</td><td>" + oSite.LS_OWNERS + "</td><td>" + oSite.LS_ADMINISTRATORS + "</td></tr>";
                });
                strResult += "</table>";
                $("#divResult").html(strResult);
alert(strResult);
            }

        }


    function WriteResponses(SitesList) {
        var strResult = "<table border='1px'><th width='20px'>ID</th><th width='100px'>TITLE</th><th width='100px'>FARM</th><th 

        width='250px'>URL</th><th width='100px'>OWNERS</th><th width='200px'>ADMINISTRATORS</th>";
        $.each(SitesList, function (index, oSite) {
        strResult += "<tr><td>" + oSite.LS_ID + "</td><td> " + oSite.LS_TITLE + "</td><td>" + oSite.LS_FARM + "</td><td>" + 

        oSite.LS_SITE_URL + "</td><td>" + oSite.LS_OWNERS + "</td><td>" + oSite.LS_ADMINISTRATORS + "</td></tr>";
        });
        strResult += "</table>";
        $("#divResult").html(strResult);
         }
  • Have you tried using Script Editor webpart? – Aveenav Jul 8 '14 at 13:32
  • Im in SPO 2013 on a Developer Site. Interface looks exactly the same as embed code. – Hell.Bent Jul 8 '14 at 14:26
  • tried it, just get that function is not defined (when inline js) – Hell.Bent Jul 8 '14 at 14:45
1

One of the ways to achieve the same result is to use knockout.js.

You can use knockout.js and populate the data using a foreach loop in a observable array. And in the Web-Part you need to map the knockout data member.

This is good because you will use object oriented JavaScript and MVVM. And code will be little less. Please check the following code:

JavaScript:

var my = my || {}; //my namespace
my.ListItem = function () {
    this.LS_ID = ko.observable();
    this.LS_TITLE = ko.observable();
    this.LS_FARM = ko.observable();
    this.LS_SITE_URL = ko.observable();
    this.LS_OWNERS = ko.observable();
    this.LS_ADMINISTRATORS = ko.observable();
};
//My View Model
my.vm = function () {
    var
    Listdata = ko.observableArray([]),
    PopulateListdata = function(SitesList){
        $.each(SitesList, function (index, oSite) {
            Listdata.push(new my.ListItem()

            .LS_ID(oSite.LS_ID)

            .LS_TITLE(oSite.LS_TITLE)

            .LS_FARM(oSite.LS_FARM)

            .LS_SITE_URL(oSite.LS_SITE_URL)

            .LS_OWNERS(oSite.LS_OWNERS)

            .LS_ADMINISTRATORS(oSite.LS_ADMINISTRATORS)
            }
        };           
    return {
        Listdata: Listdata,
        PopulateListdata: PopulateListdata
    };
}();
my.vm.PopulateListdata(SitesList);
ko.applyBindings(my.vm);

HTML:

<script src='http://knockoutjs.com/downloads/knockout-3.1.0.js" type="text/javascript"></script> 
<div id='divResult'> 
<table border='1px'>
    <th width='20px'>ID</th> 
    <th width='100px'>TITLE</th> 
    <th width='100px'>FARM</th> 
    <th width='250px'>URL</th> 
    <th width='100px'>OWNERS</th> 
    <th width='200px'>ADMINISTRATORS</th> 
    <tbody data-bind='foreach: Listdata'> 
        <tr> 
            <td data-bind='text: LS_ID'></td>
            <td data-bind='text: LS_TITLE'></td> 
            <td data-bind='text: LS_FARM'></td> 
            <td data-bind='text: LS_SITE_URL'></td> 
            <td data-bind='text: LS_OWNERS'></td> 
            <td data-bind='text: LS_ADMINISTRATORS'></td> 
        </tr>
    </tbody> 
</table>
</div>

I forgot to attach the KO refrence. I have updated it . Please check.

  • looks very good. will try this in a few. Sorry, where is the ko reference and any particular release? – Hell.Bent Jul 8 '14 at 15:46
  • Question, did you generate that code with something? By chance know of any WYSIWYG Drag and Drop designer/editor for Knockout? My source is actually REST/Json. See updated question. – Hell.Bent Jul 8 '14 at 16:03
  • No. I did not use any editor to generate the code. For reference you can check the following link: knockoutjs.com – Sudip Ranjan Sil Jul 8 '14 at 16:10
  • Please paste in your original HTML code (not with encoded &lt; etc.) and use the correct markup in the post instead, it is not useful as it stands now (since it is not copy-pasteable – Robert Lindgren Jul 8 '14 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.