Javascript code doesn't work after putting the code as external file

Question

I'm applying a Javascript (JS) code for bootstrap modal(popup window) in my page. I'm planning to let it run dynamically as i enter an input into the textbox that appears from the popup window. Previously when i put the JS code in the layout page, it works. But when i tried to put the code in a separate JS file in a folder, it doesn't work anymore. Why is this? When i click the button, the popup window appears but when i entered input or clicked a button in the popup window, it didn't work. I've ensured that the file directory is not the problem.

I've also put the

<script type="text/javascript" src="~/Script/Modal.js"></script>

at the head section of the layout to ensure that it will be loaded dynamically.

This is what i put in my Modal.js file. Is it correct or am i missing something? I do have an if clause in between the codes.

$(function() {
// New Modal ================================================
$('#inputNew').on('hidden.bs.modal', function (e) {
    document.getElementById("inputNewCheckbox").checked = true;
    document.getElementById("inputMother").style.display = 'block';
    document.getElementById("inputMotherlabel").style.display = 'block';
    var value = $('#myPopupInput1').val();
    $('#inputMother').val(value);
    $('#inputNew').modal('hide');
});

$('#inputNew').on('click', '#SearchMother', function () {
   var value = $('#myPopupInput1').val();
   $('#inputMother').val(value);
   $('#inputNew').modal('hide');
});

if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
    if ($('#inputNewCheckbox').on("click", function () {
        $('#inputNewCheckbox').prop('checked', false);
    }));

}

})

This is the checkbox input in the View page

<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New

try src="../Script/Modal.js".. It looks like path issue to me. If it does not work, open developer tool and try finding your script file in that or you may see error in console that script not found because of wrong path. — Maharshi, Dec 27 '16 at 04:43
@Maharshi your suggestion doesn't work for me..by developer tool, does that mean i have to download the developer tools add-in for vs2015? — Nurul, Dec 27 '16 at 06:47
@Curiousdev which console? Output console? I see no errors there — Nurul, Dec 27 '16 at 06:48
which browser you are using? I mean developer tool in you browser — Maharshi, Dec 27 '16 at 06:49
@Maharshi firefox..ok i found it. Developer > Console..is it this one? — Nurul, Dec 27 '16 at 06:55
@Maharshi no errors but 2 warnings: 1) Use of getPreventDefault() is deprecated. Use defaultPrevented instead. - browserLink 2) Empty string passed to getElementById() - jquery-2.1.4.js — Nurul, Dec 27 '16 at 06:57
**document.getElementById("input").checked** "input" is id for checkbox element? paste your checkbox code here so we can figure it out? — Curiousdev, Dec 27 '16 at 09:34
**document.getElementById("inputNewCheckbox").setAttribute("data-waschecked","true");** instead of **document.getElementById("inputNewCheckbox").checked = true;** it will work — Curiousdev, Dec 28 '16 at 04:52
@Curiousdev sorry but i think that is not the problem, because the code i used previously worked. Now,it doesn't. Checking the checkbox is ok, unchecking the checkbox after second click(after the popup modal comes out) didn't work, but that's a different question. Actually, the problem i'm asking right now is the javascript code runs smoothly when i put the script at the bottom of the layout page(inside the 'script' tags), but when i transferred the code to a new javascript file(eg. modal.js), somewhat the javascript code didn't work anymore :( — Nurul, Dec 28 '16 at 08:01
You should probably read up on event delegation (basically the same issue as your other question); from the jQuery docs: https://learn.jquery.com/events/event-delegation/. This Q&A also does a good job of explaining the difference: http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on — Tieson T., Jan 02 '17 at 04:46
Basically, if the thing you're attempting to select doesn't exist on page load, your current code won't work. — Tieson T., Jan 02 '17 at 04:47
@TiesonT. Thanks a lot! I understand it now..your code suggestion .on('change', function (e) { code }); works :D — Nurul, Jan 02 '17 at 08:15

score 0 · Answer 1 · answered Dec 27 '16 at 08:41

try putting your code in document.ready

$(document).ready(function () {
     // New Modal ================================================
     $('#inputNew').on('hidden.bs.modal', function (e) {
         document.getElementById("input").checked = true;
     });
})

Javascript code doesn't work after putting the code as external file

1 Answers1

Linked