1

I want to move my JavaScript code to an external js file and use it within my View, as I want to "clear up/neaten up" my code on my page a bit, as I am using a lot of Javascript.

Before I post my code, what is best practice ? Keeping all the JavaScript in the View, or by creating an external js file and putting the code in there instead ?

Below is part of my code in my View(I have left the rest out as it follows the same structure and I dont want to unnecessarily add too much code here) :

@section scripts
    {
    <script type="text/javascript">        

        $('#aboutme_menu').on('click', function (event) {
            var editable_elements = document.querySelectorAll("[contenteditable=true]");
            for (var i = 0; i < editable_elements.length; i++) {
                editable_elements[i].setAttribute("contentEditable", false);
                editable_elements[i].style.background = "#F0F0F0";
                editable_elements[i].style.borderColor = "#F0F0F0";
            }

            var employmentcancelbutton = document.getElementsByClassName('employment-cancel-button'), i;

            for (var i = 0; i < employmentcancelbutton.length; i++) {
                employmentcancelbutton[i].style.visibility = 'hidden';
            }

            $('.employment-edit-button').html('Edit');
            $(".employment-edit-button").prop('disabled', false);
        });

        $('#employment_menu').on('click', function (event) {
            var editable_elements = document.querySelectorAll("[contenteditable=true]");
            for (var i = 0; i < editable_elements.length; i++) {
                editable_elements[i].setAttribute("contentEditable", false);
                editable_elements[i].style.background = "#F0F0F0";
                editable_elements[i].style.borderColor = "#F0F0F0";
            }

            document.getElementsByClassName('aboutme-cancel-button')[0].style.visibility = 'hidden';
            $('.aboutme-edit-button').html('Edit');
            $(".aboutme-edit-button").prop('disabled', false);
        });
</script>
}

I have tried by adding this code as is(Excluding the @Section and <script> Tags) into an external js file(UserProfile.js) and called the following on the top and bottom of the View and its not executing the code. 

<script src="~/Scripts/UserProfile.js"></script>

Is there something else I need to add in the js file ? What am I missing ?

Please correct me if I am doing anything wrong or not following best practices.

EDIT 1

@satpal lead me in the right direction, I wrapped my code in my js file in the following : $(window).load(function () { and then it worked.

Why does this work, but not $(function () { or $(document).ready(function () { ?

Thank you.

AxleWack
  • 1,801
  • 1
  • 19
  • 51
  • 1
    Wrap you event handler in document-ready handler – Satpal Oct 27 '16 at 07:18
  • Thanks for the reply, just to clarify, do I add the following in my external js file : $(document).ready(function () { //code }); ? As I tried this now and referenced this js file in my View and it didnt work :( – AxleWack Oct 27 '16 at 07:23
  • @Satpal - I edited my question, I was able to get it working wrapping my code in the external js file with $(window).load(function () {, so I have given your answer a +1 as it lead me in the right direction. Why would this work and not what you suggested ? – AxleWack Oct 27 '16 at 07:54
  • `$(document).ready(function () {` should work, to know the diff visit http://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions and Just I have not answered so where did you given me +1? – Satpal Oct 27 '16 at 07:57
  • Thanks. The link is informative. I tried it again now and it does not work...Any reason why ? I upped your comment above - is that not considered as +1 ? – AxleWack Oct 27 '16 at 08:00
  • See the browser console if you feel an error has occurred there. `$(function())` and `$(window).load` should have similar behavior, but the latter will start if window part has loaded after DOM elements are available. – Tetsuya Yamamoto Oct 27 '16 at 08:17

0 Answers0