I have a very weird issue that is occurring with jquery code that I put in a Script Editor web part. In IE 9 and below the code does not seem to run if you just open up the browser to the page that contains the webpart. If you then open up the IE developer tools and then hit refresh the code runs and executes perfectly. And when I say code doesn't run I mean nothing at all shows in the web part just the title of the Script Editor and that's it.

No issues at all when run in Chrome and Firefox. The whole thing with the developer tools part is just blowing my mind I don't get why it will run when you have open that but won't run when you haven't opened them. Any help would be appreciated.

    <div id="leaveBalance"></div>
    <script type="text/javascript">
        (function () {
            jQuery(function ($) {
                $.ajax({
                    dataType: "json",
                    timeout: 3500,
                    cache: false,
                    url: "GetLeave.aspx"
                }).done(function (data) {
                    processData(data);
                }).fail(function () {
                    failedLoad();
                });
            });

            function processData(data) {
                var testing = "testing";
                var sickLeave = data.U_ALT_JSON_DATA.U_ALT_RESP[0];
                var annualLeave = data.U_ALT_JSON_DATA.U_ALT_RESP[1];
                var leaveTable = $('<table>').append(
                        $('<tr>').append(
                            $("<th colspan='2'>").text("Annual Leave")
                        ),
                        $('<tr>').append(
                            $("<td>").html("Hours Balance <i>(as of " + annualLeave.Resp_accrual_end_dt + "</i>)"),
                            $("<td>").text(annualLeave.Resp_hrs_bal)
                        ),
                        $('<tr>').append(
                            $("<td>").text("Hours Adjusted"),
                            $("<td>").text(annualLeave.Resp_hrs_adj)
                        ),
                        $('<tr>').append(
                            $("<td>").text("Hours Requested"),
                            $("<td>").text(annualLeave.Resp_hrs_req)
                        ),
                        $('<tr>').append(
                            $("<td>").html("Hours Available <i>(as of " + annualLeave.Resp_accrual_end_dt + "</i>)"),
                            $("<td>").text(annualLeave.Resp_hrs_avail)
                        ),
                        $('<tr>').append(
                            $("<th colspan='2'>").text("Sick Leave")
                        ),
                        $('<tr>').append(
                            $("<td>").html("Hours Balance <i>(as of " + sickLeave.Resp_accrual_end_dt + "</i>)"),
                            $("<td>").text(sickLeave.Resp_hrs_bal)
                        ),
                        $('<tr>').append(
                            $("<td>").text("Hours Adjusted"),
                            $("<td>").text(sickLeave.Resp_hrs_adj)
                        ),
                        $('<tr>').append(
                            $("<td>").text("Hours Requested"),
                            $("<td>").text(sickLeave.Resp_hrs_req)
                        ),
                        $('<tr>').append(
                            $("<td>").html("Hours Available <i>(as of " + sickLeave.Resp_accrual_end_dt + "</i>)"),
                            $("<td>").text(sickLeave.Resp_hrs_avail)
                        )
                    );
                $("#leaveBalance").html(leaveTable);
            }

            function failedLoad() {
                var testig = "testing";
                $("#leaveBalance").html("There was an issue displaying your data.");
            }
        })();
    </script>

• Edited by jlehmanusf 15 hours 58 minutes ago

Looks like your jquery file is not loading at the time of function call.can you please check jquery file reference and also try -

add your loading code in a function and register that function through spBodyOnLoadFunctionNames,

_spBodyOnLoadFunctionNames.push("YourLoadFunctionForAjaxCall");

and within your load function , wait for script loading -

ExecuteOrDelayUntilScriptLoaded(function () {
     
    }, "jquery.js");

Something like this -

_spBodyOnLoadFunctionNames.push("MyLoadFn");


function MyLoadFn()
{
    ExecuteOrDelayUntilScriptLoaded(function () {

            // jQuery(function ($) {  $.ajax({ .......

    }, "jquery.js");
}

Hi,

From your description, my understanding is that your code does not runs and executes well in IE 9.

Will your issue occur If you run some other JS code? Please test this code below in your environment:

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>    

<script type="text/javascript">

        (function () {

            jQuery(function ($) {

                $.ajax({ 

                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('list')", 

                   type: "GET", 

                   headers: {"accept": "application/json;odata=verbose"}, 

                   success: function (data) { 

                                alert(1);

                   }, 

                   error: function (xhr) { 

                                alert(2);

                   } 

                }); 

            });

        })();

    </script>

Besides, you could test your code in another computer or test it in another version IE(such as IE 10).