How do I load my javascript file inside my partial view that is nested inside a view? MVC5

Question

I have two custom made javascript files (viewJscript.js, and partialJscript.js). Inside the view i simply put:

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/viewJscript.js"></script>

And this works just fine. Now I am trying to do the same in my partial view which is nested inside the view:

    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/partialJscript.js"></script>

And it doesnt work. So what should I do in order to load my partialJscript.js inside my partial view?

I forgot to mention that the partial view is dynamic and is opened upon a button click from the view

EDIT Here is my code inside the partialJscript.js file:

$(function () {
        var divSensorNames = $("#sensorNames");
        $('.webgrid2-table th:first-child,  .webgrid2-table td:first-child').hide();

        $('.webgrid2-table th:nth-child(2),  .webgrid2-table td:nth-child(2)').hide();

        $('.webgrid2-table th:nth-child(3),  .webgrid2-table td:nth-child(3)').hide();

        $('#AddNewSensor').on('click', function () {
            $('#sensorList').load('@Url.Action("ChooseSensorList", "PredefinedViews")');
        });

        $('.editSensorMode').on("click", function () {
            var tr = $(this).parents('tr:first');
            //var SensorID = tr.find("#SensorID").html();
            var PredefinedViewItemID = tr.find("#PredefineViewsItemID").html();
            var urlEditModes = "@Url.Action("EditSensorMode", "PredefinedViews", new { pviId = "PredefinedViewItemID" })";
            //urlEditModes = urlEditModes.replace("SensorID", SensorID);
            urlEditModes = urlEditModes.replace("PredefinedViewItemID", PredefinedViewItemID);
            $('#sensorList').load(urlEditModes);
        });

        $(".sensor-delete-table").on("click", function () {

            var tr = $(this).parents('tr:first');
            var PredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
            var PredefineViewID = tr.find("#PredefineViewID").html();
            var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());
            //amount = amount + anyNumber; This also works!
            //var rowCountBefore = $('.webgrid2-table tr').length;

            var flag = confirm('@Html.Localize("deleteCheck")');
            var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
            urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
            if (PredefineViewID != "" && flag) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                    data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID }),
                    dataType: "json",
                    complete: function (result) {

                        var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
                        urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
                        $(divSensorNames).load(urlShowSensors);

                        amount--;
                        $("[data-id='" + PredefineViewID + "']").text(amount.toString());
                });
            }
        });
    });

Answer 1

In other words, you're using AJAX to bring in the HTML of the partial view. For security reasons, browsers do not allow scripts tags from dynamically-inserted HTML to be run. You'll either have to include the script in your main view, or load the script dynamically via JavaScript in your AJAX callback. You can do this with something like Require.js or Modernizr.load.