why does this code don't work in the content-editor? (MyTasks)

Question

I wrote a JavaScript function where I get my Tasks and Tasks from Team Space. They are supposed to look like:

And this works as long as its a own HTML-site. Like tasks.html. When I try to add it to another SharePoint-site like home in an content-Editor I get an typeerror:

sp.ui.utility is undefined

and the site stops responding. So my question is why is that so? There is something I don't get.

Here is the Code: HTML:

<div class="due-display" id="dueDisplayVisibility" onclick="winOpen();">
    <p id="loadingText" class="loadIndicator">Loading...  <img src="/Style Library/kcs/images/loader.gif"></p>
    <div class="overDue" id="overDueForm">
        <table>
            <tr>
                <th class="th-due-digits-red" id="overDueDigits"></th> <!--gets filled by function: fillDueDisplayForms()-->
                <th class="th-due-text-red" id="overDueText"></th> <!--gets filled by function: fillDueDisplayForms()-->
            </tr>
        </table>
    </div>
    <div class="dueSoon" id="dueSoonForm">
        <table>
            <tr>
                <th class="th-due-digits-orange" id="dueSoonDigits"></th> <!--gets filled by function: fillDueDisplayForms()-->
                <th class="th-due-text-orange" id="dueSoonText"></th> <!--gets filled by function: fillDueDisplayForms()-->
            </tr>
        </table>
    </div>
    <div class="neverDue" id="neverDueForm">
        <table>
            <tr>
                <th class="th-due-digits-green" id="neverDueDigits"></th> <!--gets filled by function: fillDueDisplayForms()-->
                <th class="th-due-text-green" id="neverDueText"></th> <!--gets filled by function: fillDueDisplayForms()-->
            </tr>
        </table>
    </div>
    <div class="noMySite" id="noMySiteForm">
        <p id="noMySiteTextLine1" class="noMySiteText"></p> <!--gets filled by function: fillNoMySiteForm() -->
        <p id="noMySiteTextLine2" class="noMySiteText"></p> <!--gets filled by function: fillNoMySiteForm() -->
    </div>
</div>

and the JavaScript:

<script src="/_layouts/15/init.js" type="text/javascript"></script>
<script src="/_layouts/15/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.core.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.workmanagement.js" type="text/javascript"></script>
<script src="/Style%20Library/kcs/js/jquery.js"></script>

$(document).ready(function () {
    getMyTasks();
});

If you want I can post the full java script file.

Any help or advise would be great.

Edit: Just tried it with:

$(document).ready(function() {
 ExecuteOrDelayUntilScriptLoaded(getMyTasks, "sp.js");
});

and the error stays the same: sp.ui.utility is undefined

Edit2: error was this line:

<script src="/_layouts/15/init.js" type="text/javascript"></script>

real name of the file:

<script src="/_layouts/15/sp.init.js" type="text/javascript"></script>

together with the solution from below it works without any Problems.

Answer 1

Try this for calling your function:

SP.SOD.executeFunc('sp.js','SP.ClientContext',getMyTasks);

You will get more info from below link:

SP.SOD.executeFunc(key, functionName, fn) Method