0

I have a cshtml view file, which contains button, clicking on which will launch a function displayPopupWindow:

<button type="button" onClick="displayPopUpWindow(4);">Button Name</button>

Initially, all javascript code was located in the script section of the same file. That way, everything is working the way it should be.

For debugging purposes, I have extended LoadVersionedJavascriptFile functionality, so I can migrate the whole script section into a separate javascript file. I did so, while encasing entire script into $(function(){...})

Now, when I click the button, it throws the error that the function is undefined.

function displayPopUpWindow(reportType) {
    //code
}

My main challenge is that even if I set a breakpoint on the first function line or just before the function, function is never accessed, so I cannot get any data, which could help me to figure out the cause.

Can anyone please point out why the function becomes unrecognized once the migration happens?

UPDATE:

I have applied all suggested changes, now the structure looks like the following

On the view page:

<div>
    //code
    <button type="button" id="btnDisplay" class="btn btn-primary">Display</button>
</div>

@section scripts {
    @Html.LoadVersionedJavascriptFile("~/Scripts/Reports/ExpiringUnits.js")
}

On Javascript file:

$(function() {
    $("btnDisplay").click(function () {
        displayPopUpWindow(4);
    });

    function displayPopUpWindow(reportType) {
        //code
    }
});

However, it never hits a breakpoint inside click function. I can only assume that reportType value 4 is not rendered properly. What else is wrong?

UPDATE

Forgot #, feeling stupid =P

Vadzim Savenok
  • 930
  • 3
  • 14
  • 37
  • Razor code is not parsed in external files. You can generate `var link = ...` in the main view as a global variable so it can be accessed in the external file, or pass it as a parameter to the function –  Dec 07 '16 at 22:05
  • @StephenMuecke You mean like to declare this variable inside the view and pass into js file? While I was thinking about something similar, I am more interested if there is a way to represent this line in pure js? – Vadzim Savenok Dec 07 '16 at 22:08
  • @VadzimSavenok Take a look at http://stackoverflow.com/questions/34360537/how-do-i-make-js-know-about-the-application-root/34361168#34361168 – Shyju Dec 07 '16 at 22:12
  • Well you can always copy what is generated by your `@Url.Content()` to the external file, but it would be far better to use `` and `$('#id="showpopup').click(function() { var report = $(this).data('report'); var link = $(this).data('link); ...` –  Dec 07 '16 at 22:13
  • @Shyju From what I read, it is pretty much similar to what Stephen was suggesting. Does that mean there is no way to turn it into a pure JS? My initial goal was to fully migrate JS into a separate file wihtout leaving any script section behind. – Vadzim Savenok Dec 07 '16 at 22:17
  • @VadzimSavenok if you want to use anything generated by your server method. This is the way to go. – Shyju Dec 07 '16 at 23:00

1 Answers1

1

If a function is inside document ready, it won't be able to called from outside.

It doesn't matter it is inside separate JavaScript file or script is inside same file.

Not Working

<button type="button" onClick="displayPopUpWindow(4);">Button Name</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        function displayPopUpWindow(reportType) {
            alert("Button is clicked!");
        }
    });
</script>

If you do not want to expose the function, you can attach click event to the button.

Working

<button id="btnDisplay" type="button">Button Name</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnDisplay").click(function () {
            alert("Button is clicked!");
        });
    });
</script>

Another thought

If you want to keep script inside separate file and without altering a lot of existing code, then do not use document ready, and render the script file at the bottom of the page.

Win
  • 61,100
  • 13
  • 102
  • 181