Proper conversion of MVC javascript section into pure javascript file

Question

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

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 — user3559349
– user3559349, Commented Dec 7, 2016 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
– Vadzim Savenok, Commented Dec 7, 2016 at 22:08
@VadzimSavenok Take a look at stackoverflow.com/questions/34360537/… — Shyju
– Shyju, Commented Dec 7, 2016 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 <button type="button" id="showpopup data-report="4" data-link="@Url.Content("~/Reports"">Button Name</button> and $('#id="showpopup').click(function() { var report = $(this).data('report'); var link = $(this).data('link); ... — user3559349
– user3559349, Commented Dec 7, 2016 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
– Vadzim Savenok, Commented Dec 7, 2016 at 22:17

Win · Accepted Answer · 2016-12-08 00:40:52Z

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.

answered Dec 8, 2016 at 0:40

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vadzim Savenok Over a year ago

Updated my OP after applying your suggestion. Still have a problem.

Collectives™ on Stack Overflow

Proper conversion of MVC javascript section into pure javascript file

UPDATE:

UPDATE

1 Answer 1

Not Working

Working

Another thought

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

UPDATE

1 Answer 1

Not Working

Working

Another thought

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related