Question

I have an image inside a partial view that will ultimately be changed by various controls in the view. Courtesy of MS Chart Controls this means I need to create a new image each time I change one of the settings. For now I simply want to remove the said image from the page on change of a drop down property (later on I plan to call the action which draws the chart with different parameters), however this does not seem to be working.

Inside my partial view:

<!--I populate the dropdown from a model loaded from a database-->
<select id="scoresSelect">
    @foreach(var option in @Model.testlist)
    {
      <option value="@option">@option</option>
    }
</select>

<div style="clear:both">&nbsp</div>

<img id="statusgraph" src="@Url.Action("StatusGraph", new { title=@Model.Options.First().Value.First()})"/>

 <p>Bottom controls</p>


<!--Downside of using partial views: scripts cannot be externally loaded-->
<script type="text/javascript">

$(document).ready(function () {

    $("#scoresSelect").change(function () {
        alert("changed");   // this executes just fine
        $("#graphid").prop({display: "none"});
    });



});


</script>

The alert method executes just fine and so I know it isn’t a javascript problem. Does anyone know why it breaks and how to make this work?

Thanks!

Answer 1

Use $("#graphid").css({display: "none"}); instead of $("#graphid").prop({display: "none"});

.prop() method gets the property value for only the first element in the matched set.

While The .css() method is a convenient way to get a style property from the first matched element.

NOTE: display is the property in css.