JavaScript element formatting in Partial view, but not functioning

Question

A javascript element works in the main view, but doesn't do anything in the partial view. It is formatted correctly, but its not functioning. Any suggestions?

See this fiddle: http://jsfiddle.net/bgrins/ctkY3/

<input type='text' class="basic"/>
<em id='basic-log'></em>

$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
        $("#basic-log").text("change called: " + color.toHexString());
    }
});

I'm trying to include the colorpicker in a partial view.

This might enlighten you http://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with . In short : Include that script in your main view. — Shyju, Aug 19 '16 at 19:32

score 0 · Answer 1 · edited May 23 '17 at 10:28

You cannot actually call the scripts section in your partial view and execute this method there. That is by design. See Darin's post here

What you can do is, keep this method in the main view. You can still conditionally execute this from your partial view if needed.

So in your main view

<script>
    var mySettings = mySettings || {};
    mySettings.shouldIShowSpectrum = false;
</script>
@Html.Partial("YourPartialViewNameHere")
@section scripts
{
    <script>
     function enableSpectrum() {
        $(".basic").spectrum({
            color: "#f00",
            change: function (color) {
                $("#basic-log").text("change called: " + color.toHexString());
            }
        });
    }
    // You can put the above method in an external js file as well.

    $(function() {
        if (mySettings.shouldIShowSpectrum)
        {
            enableSpectrum();
        }

    });
    </script>
}

and in your partial view, you can set the mySettings.shouldIShowSpectrum value true so that when the page gets rendered it will enable your plugin.

<h5>My Partial</h5>
<input type='text' class="basic" />
<em id='basic-log'></em>
<script>
    console.log("going to enable the plugin");
    var mySettings = mySettings || {};
    mySettings.shouldIShowSpectrum = true;
</script>

JavaScript element formatting in Partial view, but not functioning

1 Answers1