0

I have tried to get this to work but the code starts to hide the dropdownlist and shows it when I check the checkbox so far so good, but I can't figure out to hide it Again.

Can anybody help me with this. I am pretty new to MVC and jQuery. The code I have found on this site, but maybe somebody can tell me what I am doing wrong. Thanks

.cshtml file

    @model MaLog.NET.Models.ChartModel

@{
    ViewBag.Title = @Layouts.Layouts.Chart;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="Post postHeader firstPost" >

    @using (Html.BeginForm("ChartDisplay", "Chart", FormMethod.Post, new { id = "SelectPagesForm" }))
    {
        // Difinition af dropdownlister @Layouts.Layouts.SelectAllLinacs, definere overskriften....
        <div id="EntitySelectDiv" >
            @Html.DropDownList("EntityId", (SelectList)ViewBag.Entities, @Layouts.Layouts.SelectAllLinacs)
        </div>
        <div id="PageSelectDiv" >
            @Html.DropDownList("PageId", (SelectList)ViewBag.Pages, @Layouts.Layouts.SelectAllPages)
        </div>
        <div id="EnergySelectDiv" >
            @Html.DropDownList("EnergyId", (SelectList)ViewBag.Energies, @Layouts.Layouts.SelectAllEnegries)
        </div>
        <div id="ItemSelectDiv" >
            @Html.DropDownList("ItemId", (SelectList)ViewBag.Items, @Layouts.Layouts.SelectAllItems)
        </div>
        <div id ="Item2SelectDiv">
            @Html.DropDownList("ItemId2", (SelectList)ViewBag.Items, @Layouts.Layouts.SelectAllItems)
        </div>
        <div>
        <input type="checkbox" name="CompareAdmin" value="True" id="compareadmin">
       </div>
        <div>Samlign</div>
        //Opdater Knappen (viser Chartet)
        <ul class="menu floatLeft">
            <li><a href="#" onclick="$('#SelectPagesForm').submit()">@Layouts.Layouts.Update</a></li>
        </ul>

    }

</div>

@if (Model != null)
{
    string Entitytemp = Model.Entity;
    string Pagetemp = Model.Page;
    string Energytemp = Model.Energy;
    string Itemtemp = Model.Item;
    if (Itemtemp == " ")
    {
        ViewBag.Error = "Error: Item list ikke aflæst korrekt eller mangler at vælge et Item.";
    }
    else if (Entitytemp == " ")
    {
        ViewBag.Error = "Error: Accelerator list ikke aflæst korrekt eller mangler at vælge en Accelerator.";
    }
    else if (Pagetemp == " ")
    {
        ViewBag.Error = "Error: Side list ikke aflæst korrekt eller mangler at vælge en Side.";
    }
    else if (Energytemp == " ")
    {
        ViewBag.Error = "Error: Energi list ikke aflæst korrekt eller mangler at vælge en Energi.";
    }
    else
    {
        <div class="parameterchart">
            <img  src="@Url.Action("MalogChart", new { MainGroupID = 1, Entity = Model.Entity, Page = Model.Page, Energy = Model.Energy, Item = Model.Item })" alt="ViewChart" />
        </div>
    }
}

Script

<script type="text/javascript">




    $(document).ready(function () {
        $('select#ItemId2 > option[value=]').attr('value', ' ');
        if ($('#compareadmin').is(":checked")) {
            //show the hidden div
            $('#ItemId2').show("fast");
        }
        else {
            //otherwise, hide it
            $('#ItemId2').hide("fast");
        }

        $('#compareadmin').click(function () {
            if (this.checked) {
                $('select#ItemId2').combobox({
                    selected: function (event, ui) {
                        $('#AjaxLoader').show("fast");
                        $.post('@Url.Action("AjaxGetEntitiesList", "Chart")', { Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                            AJaxUpdateEntitiesList(data);
                        }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                        $.post('@Url.Action("AjaxGetEnergiesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val() }, function (data) {
                            AJaxUpdateEnergiesList(data);
                        }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                        $.post('@Url.Action("AjaxGetPagesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                            AJaxUpdatePagesList(data);
                        }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                    }
                })
            }
            else{
                $('select#ItemId2').hide("fast");
                    }


        });



        $('select#EntityId > option[value=]').attr('value', ' ');
        $('select#EntityId').combobox({
            selected: function (event, ui) {
                $('#AjaxLoader').show();
                $.post('@Url.Action("AjaxGetPagesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdatePagesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetEnergiesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val() }, function (data) {
                    AJaxUpdateEnergiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetItemsList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateItemsList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
            }
        });
        //$('input#EntityId_').val($('select#EntityId > option[value=]').text());

        $('select#PageId > option[value=]').attr('value', ' ');
        $('select#PageId').combobox({
            selected: function (event, ui) {
                $('#AjaxLoader').show();
                $.post('@Url.Action("AjaxGetEntitiesList", "Chart")', { Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateEntitiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetEnergiesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val() }, function (data) {
                    AJaxUpdateEnergiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetItemsList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateItemsList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
            }
        });
        //$('input#PageId_').val($('select#PageId > option[value=]').text());

        $('select#EnergyId > option[value=]').attr('value', ' ');
        $('select#EnergyId').combobox({
            selected: function (event, ui) {
                $('#AjaxLoader').show();
                $.post('@Url.Action("AjaxGetPagesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdatePagesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetEntitiesList", "Chart")', { Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateEntitiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetItemsList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateItemsList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
            }
        });
        //$('input#EnergyId_').val($('select#EnergyId > option[value=]').text());

        $('select#ItemId > option[value=]').attr('value', ' ');
        $('select#ItemId').combobox({
            selected: function (event, ui) {
                $('#AjaxLoader').show();
                $.post('@Url.Action("AjaxGetEntitiesList", "Chart")', { Page: $('select#PageId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdateEntitiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetEnergiesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Page: $('select#PageId :selected').val() }, function (data) {
                    AJaxUpdateEnergiesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
                $.post('@Url.Action("AjaxGetPagesList", "Chart")', { Entity: $('select#EntityId :selected').val(), Energy: $('select#EnergyId :selected').val() }, function (data) {
                    AJaxUpdatePagesList(data);
                }, "json").error(function (xhr, status, error) { alert("Status: " + status + ", Error: " + error); });
            }
        });




    });

    function AJaxUpdatePagesList(data) {
        var selectedVal = $('#PageId option:selected').val();
        $('#PageId').empty();
        if (selectedVal != null) {
            var firstOption = data.length > 0 ? '@Layouts.Layouts.SelectAllPages' : '@Layouts.Layouts.NoPagesAvalible';
            $('#PageId').append(
                            $("<option></option>").text(firstOption).attr("value", " "));
        }
        $.each(data, function (key, val) {
            $('#PageId')
                            .append($("<option></option>")
                            .attr("value", val.Value)
                            .text(val.Text));
        });
        $('select#PageId').val(selectedVal);
        $('#PageId_').val($('select#PageId option:selected').text());

        $('#AjaxLoader').hide();
    }

    function AJaxUpdateEntitiesList(data) {
        var selectedVal = $('#EntityId option:selected').val();
        $('#EntityId').empty();
        if (selectedVal != null) {
            var firstOption = data.length > 0 ? '@Layouts.Layouts.SelectAllLinacs' : '@Layouts.Layouts.NoEntitiesAvalible';
            $('#EntityId').append(
                            $("<option></option>").text(firstOption).attr("value", " "));
        }
        $.each(data, function (key, val) {
            $('#EntityId')
                            .append($("<option></option>")
                            .attr("value", val.Value)
                            .text(val.Text));
        });
        $('select#EntityId').val(selectedVal);
        $('#EntityId_').val($('select#EntityId option:selected').text());

        $('#AjaxLoader').hide();
    }

    function AJaxUpdateEnergiesList(data) {
        var selectedVal = $('#EnergyId option:selected').val();
        $('#EnergyId').empty();
        if (selectedVal != null) {
            var firstOption = data.length > 0 ? '@Layouts.Layouts.SelectAllEnegries' : '@Layouts.Layouts.NoEnergiesAvalible';
            $('#EnergyId').append(
                            $("<option></option>").text(firstOption).attr("value", " "));
        }
        $.each(data, function (key, val) {
            $('#EnergyId')
                            .append($("<option></option>")
                            .attr("value", val.Value)
                            .text(val.Text));
        });
        $('select#EnergyId').val(selectedVal);
        $('#EnergyId_').val($('select#EnergyId option:selected').text());

        $('#AjaxLoader').hide();
    }

    function AJaxUpdateItemsList(data) {
        var selectedVal = $('#ItemId option:selected').val();
        $('#ItemId').empty();
        if (selectedVal != null) {
            var firstOption = data.length > 0 ? '@Layouts.Layouts.SelectAllPages' : '@Layouts.Layouts.NoPagesAvalible';
            $('#ItemId').append(
                            $("<option></option>").text(firstOption).attr("value", " "));
        }
        $.each(data, function (key, val) {
            $('#ItemId')
                            .append($("<option></option>")
                            .attr("value", val.Value)
                            .text(val.Text));
        });
        $('select#ItemId').val(selectedVal);
        $('#ItemId_').val($('select#ItemId option:selected').text());

        $('#AjaxLoader').hide();
    }
</script>
Spider man
  • 3,224
  • 4
  • 30
  • 42
Thor Schierbeck
  • 3
  • 3
  • 1
    possible duplicate of [How to show/hide an element on checkbox checked/unchecked states using jQuery?](http://stackoverflow.com/questions/18307323/how-to-show-hide-an-element-on-checkbox-checked-unchecked-states-using-jquery) – YesItsMe Jun 23 '15 at 11:10
  • You have posted a ton of unnecessary code, it will only scare off potential helpers. It is hard to find the elements in question here. I assume we only need a checkbox and a dropdownlist, along with the script code you tried – chiapa Jun 23 '15 at 11:49
  • I gave up reading because it's too much code – Mihai Tibrea Jun 23 '15 at 12:42

1 Answers1

0

I think there could be a problem with following lines of code:

    $('#compareadmin').click(function () {
        if (this.checked) {

Try to change it to:

    $('#compareadmin').click(function () {
        if ($(this).is(':checked') {

Or this lines where you only need to provide id not the element selector as id is always unique on page or it must be unique if not:

  else{
        $('select#ItemId2').hide("fast");
    }

change it to :

  $('#ItemId2').hide("fast");

Try above things and let me know if don't work.

Priyank Sheth
  • 2,352
  • 19
  • 32