0

I only have access to body content and not the header or footer, Jquery is loaded in the footer of each page, so when my scripts load in the body, they have errors like "$ is not defined". When I try to load the scripts on dom ready I still get the error because it is still loading before the main jquery. Is there anything I can do to get the jquery in the body to load AFTER the footer script?

FURTHER EXPLANATION: I did search to see what other users had posted and didn't run across this particular situation. I tried a simple 

$(document).ready(function () {

and it didn't work. I'm trying to get a form validation script to work and still keep getting

Uncaught TypeError: $(...).validate is not a function

Using the answer below did fix some of the issues but not this one. My code is:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript">
window.addEventListener('load', function () {    
     $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js");
     $.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js");
     $.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js"); 
}); 
</script>
<script type="text/javascript">
window.addEventListener('load', function () {
    $('#commentForm').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true
            },
            mobile_phone: {
                required: true,
                phoneUS: true
            }
        },
        submitHandler: function (form) { // for demo

            //alert('valid form submitted'); // for demo

            var $phone_temp = $('#mobile_phone').val();
            $('#mobile_phone').val($phone_temp.replace(/\D+/g, ''));

            form.submit();
        }
    });
}); 
</script>
       <!-- in footer: using for local testing -->
        <script src="https://.../jquery.js"></script>
        <script src="https://.../bootstrap.js"></script>
user1559189
  • 31
  • 4
  • 1
    Welcome to Stack Overflow! Please review the [guide to asking good questions](https://stackoverflow.com/help/how-to-ask). You should typically add details in the form of a minimal, complete, verifiable code example. This helps us determine if you even need the other scripts in the body, or if they can also be in the footer, or if they need `window.onload` to control their load timing for example. – Logan Bertram Jul 20 '18 at 14:47
  • @LoganBertram I would disagree that the question is unclear. They actually pretty well explained their situation. – Taplar Jul 20 '18 at 14:51
  • 1
    @Taplar I'm just a big believer in making problems as clear as possible. It doesn't deserve 3 downvotes and is perfectly clear, but adding some code can help other newbies ID and solve their own similar issue. – Logan Bertram Jul 20 '18 at 15:06
  • @LoganBertram I agree with Taplar, the question is ok. What I can say is that I have seen already the same question many times on SO and that a bit of googling would have solved the issue. So my only critic to the OP is about lazyness (and I didn't downvote btw) – Lelio Faieta Jul 20 '18 at 15:07
  • Possible duplicate of [adding to window.onload event?](https://stackoverflow.com/questions/15564029/adding-to-window-onload-event) – Igor Jul 20 '18 at 15:11

2 Answers2

8
//a load event happens after all resources are loaded for the page.
window.addEventListener('load', function () {
   //do your jQuery logic
});
Taplar
  • 24,788
  • 4
  • 22
  • 35
0

This is what eventually worked

<script>
window.addEventListener('load', function () {
 $.when(
 $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"),
 $.getScript("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"),
 $.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"),
 $.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"),
      $.Deferred(function( deferred ){
    $( deferred.resolve );
})
).done(function(){

$('#commentForm').validate({ // initialize the plugin
    rules: {
        email: {
            required: true,
            email: true
        },
        mobile_phone: {
            required: true,
            phoneUS: true
        }
    },
    submitHandler: function (form) { // for demo

        //alert('valid form submitted'); // for demo

        var $phone_temp = $('#mobile_phone').val();
        $('#mobile_phone').val($phone_temp.replace(/\D+/g, ''));

        form.submit();
    }
});
});
});
</script>
user1559189
  • 31
  • 4