Troublesome eventlistener in spservices generated table

Dec 20, 2013 at 7:20 PM
Hi!

I'm having a bit of a problem with a table generated from a list using spservices.

What I want to do is to display a button to delete each item next to the title of the item. The list only contains the items created by the user.

This is what I've created so far:
<script language="javascript" type="text/javascript">
SP.SOD.registerSod('SPServices', "/kurskatalog/_catalogs/masterpage/script/SPServices/jquery.SPServices-2013.01.min.js");

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {console.log("loaded required js");});
SP.SOD.executeFunc('SPServices', null, function () {console.log("loaded SPservices");});

ExecuteOrDelayUntilScriptLoaded(function(){
function kursAvmelding(kID) {
    console.log("kID = " + kID);
}
console.log("Populating table...");
var thisUserAccount = $().SPServices.SPGetCurrentUser({
    fieldName: "Title",
    debug: false
    });
$().SPServices({
        operation: "GetListItems",
        async: false,
        webURL: "/sites/kursredaktor/",
        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Kurs_x0020_Dato' /><FieldRef Name='Author' /></ViewFields>",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='Author'></FieldRef><Value Type='Text'>" + thisUserAccount + "</Value></Eq></Where></Query>",
        completefunc: function (xData, Status) {
            console.dir($(xData.responseXML).html());
            var counter = 1;
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var sletteid = "sletteid" + counter;
                var tdHtml = "<tr><td>" + $(this).attr("ows_Title") + "<td>" + $(this).attr("ows_Kurs_x0020_Dato") + "</td><td><a id='" + sletteid + "' href='#'><img src='/_layouts/15/images/CNSREJ16.GIF'></a></td></tr>";
                $("#tbody_id").append(tdHtml);
                document.getElementById(sletteid).addEventListener("click", kursAvmelding($(this).attr("ows_ID")), false);
                counter++;
                });
        }
});
console.log("Done!");
}, "sp.js");

</script>

<table id="table_id">
    <thead>
        <tr>
            <th>Kurs</th>
            <th>Dato</th>
            <th>Avmelding</th>
        </tr>
    </thead>
    <tbody id="tbody_id">
    </tbody>
</table>
I also have the delete funciton ready, but I have an obstacle that prevents me from getting that far - the delete function gets called upon rendering of the table :(

This is a screenshot from firebug:
Image

Now, I'm not sure if this issue is related to SPServices, SharePoint, JavaScript or divine intervention, but I'm pretty sure an eventlistener is supposed to wait for the event to occir before running the function... right..?

In any case, I appreciate all feedback.
Jan 7, 2014 at 6:51 PM
Update:

Thought I'd share my finished solution as I found something that works that could perhaps be of use for others as well.

Anyway, this code will query a list for all items created by the current user, then display that in a table with a button for deleting the items. Clicking delete will prompt for confirmation -> delete the item -> remove the row.

Screenshot:
Image

Code:
<script language="javascript" type="text/javascript">
SP.SOD.registerSod('SPServices', "/kurskatalog/_catalogs/masterpage/script/SPServices/jquery.SPServices-2013.01.min.js");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {console.log("loaded required js");});
SP.SOD.executeFunc('SPServices', null, function () {console.log("loaded SPservices");});


ExecuteOrDelayUntilScriptLoaded(function(){
var thisUserAccount = $().SPServices.SPGetCurrentUser({ //sets the current user, to be used in camlquery for filter
    fieldName: "Title",
    debug: false
    });
    
$().SPServices({
        operation: "GetListItems",
        async: false,
        webURL: "/sites/kursredaktor/",
        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Kurs_x0020_Dato' /><FieldRef Name='Author' /><FieldRef Name='AvmDato' /></ViewFields>",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='Author'></FieldRef><Value Type='Text'>" + thisUserAccount + "</Value></Eq></Where></Query>",
        completefunc: function (xData, Status) {
            var counter = 1;
            
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var sletteid = "sletteid" + counter;
                var title = $(this).attr("ows_Title");
                var cID = $(this).attr("ows_ID");
                var dato = $(this).attr("ows_AvmDato");
                var tdHtml = "<tr id='" + "kursrad" + cID + "'><td>" + $(this).attr("ows_Title") + "<td>" + dato + "</td><td><a id='" + sletteid + "' href='#'><img src='/_layouts/15/images/CNSREJ16.GIF'></a></td></tr>";
                $("#tbody_id").append(tdHtml);
                document.getElementById(sletteid).addEventListener("click", function() {
                    var confirmation = confirm("Are you sure you wish to unregister from \n" + title + "?");
                    if (confirmation == true) {

                    $().SPServices({
                        operation: "UpdateListItems",
                        async: false,
                        webURL: "/sites/kursredaktor/",
                        listName: "{CCB8060E-5157-49FD-B438-6B45AC4F3013}",
                        batchCmd: "Delete",
                        ID: cID,
                        completefunc: function (xData, Status) {
                            $('#kursrad'+cID).remove();             
                        }
                    });
                    }
                    else {
                    console.log("unregister cancelled");
                    }
                }, false);
                counter++;
                });
        }
});

}, "sp.js");

</script>

<table id="minekurs_tabell">
    <thead>
        <tr>
            <th>Class</th>
            <th>Date</th>
            <th>Unregister</th>
        </tr>
    </thead>
    <tbody id="tbody_id">
    </tbody>
</table>
Thanks again Marc for a great tool :)
Marked as answer by kris_m on 1/8/2014 at 2:49 AM