Ad

Selecting A Specific Element From Multiple Forms

- 1 answer

I'm trying to select a specific element from multiple forms but it's not working properly:

So my javascript code is:

function makeActive(target)
{
    $("div.interactive").removeClass("interactive");
    $("#form" + target).addClass("interactive");
}

$(document).ready(function () {
    $('.interactive option[name=bu]').on('change', function () {
        $('.interactive option[name=discipline]').empty();
        $('.interactive option[name=project]').empty();
        $('.interactive option[name=role]').empty();
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetList", "Central")',
            dataType: 'Json',
            data: { InitiateId: $('.interactive option[name=bu]').val(), InitiateType: "BU" },
            success: function (data) {
                console.log("That was calling")
                $('.interactive option[name=discipline]').append('<option value="">Select</option>');
                $.each(data, function (index, value) {
                    $('.interactive option[name=discipline]').append('<option value="' + value.Id + '">' + value.Name + '</option>');
                });
                $('.interactive option[name=project]').append('<option value="">Select Discipline firt</option>');
                $('.interactive option[name=role]').append('<option value="">Select Project first</option>');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });

And cshtml struct page is:

    <div id="faq" role="tablist" aria-multiselectable="true">
        @foreach (var actor in Model)
        {
        string areacontrol = "answer" + actor.Id;
        count +=1;
        bool open = false;

        if (ViewBag.actor != null)
        {
        if (actor.Id == ViewBag.actor.Id)
        {
        open = true;
        }
        }
        else
        {
        if (count == 1)
        {
        open = true;
        }
        }

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="questionOne">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#faq" target="_blank" rel="nofollow noreferrer" href="#@areacontrol" aria-expanded="false" aria-controls="answerOne"
                        onclick=" makeActive(@actor.Id)">
                        @actor.Name (@actor.Email)
                    </a>
                </h5>
            </div>
            <div id="@areacontrol" class="panel-collapse collapse @(open?" in":"")" role="tabpanel" aria-labelledby="questionOne">
                <div class="panel-body">
                    @using (Html.BeginForm("Assign", "Central", FormMethod.Post))
                    {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    string form = "form" + actor.Id;
                    <div class="row form-group @(open?" interactive":"")" id="@form">
                        <div class="col-md-3 col-md-offset-0">
                            <label for="bu">Business Unit</label>
                            <select name="bu" class="form-control">

                                <option value="">--Select--</option>
                                @foreach (var item in flowcontext.ContiBusinessUnits.ToList())
                                {
                                if (ViewBag.bu != null && actor.Id == ViewBag.actor.Id)
                                {
                                bool selected = false;
                                if (ViewBag.bu.Name == item.Name)
                                {
                                selected = true;
                                }
                                if (selected)
                                {
                                <option value="@item.Id" selected>@item.Name</option>
                                }
                                else
                                {
                                <option value="@item.Id">@item.Name</option>
                                }
                                }
                                else
                                {
                                <option value="@item.Id">@item.Name</option>
                                }
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="discipline">Discipline</label>
                            <select name="discipline" class="form-control">
                                @if (ViewBag.discipline != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.discipline.ID">@ViewBag.discipline.Name</option>
                                }
                                else
                                {
                                <option value="">Select Business Unit first</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="project">Project</label>
                            <select name="project" class="form-control">
                                @if (ViewBag.project != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.project.ID">@ViewBag.project.Name</option>
                                }
                                else
                                {
                                <option value="">Select Discipline first</option>
                                }
                                ViewBag.role_id = contiRole;
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="destination">Role</label>
                            <select name="role" class="form-control">
                                @if (ViewBag.role != null && actor.Id == ViewBag.actor.Id)
                                {
                                <option value="@ViewBag.role.ID">@ViewBag.role.Name</option>
                                }
                                else
                                {
                                <option value="">Select Project first</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3" style="display:none">
                            <label for="destination">User Id</label>
                            <select name="userid" class="form-control">
                                <option value="@actor.Id" selected>@actor.Name</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3 col-md-offset-8">
                            <input type="submit" class="btn btn-primary btn-block" value="Add">
                        </div>
                    </div>
                    }
                </div>
            </div>
        </div>
        }
    </div>

<!--end language: lang-html -->

In that inside a foreach loop, I load/ generate a form. First: The bootstrap collapse will be open for the first user(actor); Inside, I have a form with is necessary to be similar and be a cascade drop select!

When I make a change[ $('.interactive option[name=bu]').on('change', function (){}]that calls for me a controller method which returns me a list and with that list a generate the second field and again for other 2 field! That helps me to make a cascade select for a form and that works well but only for the first one!

I think either I'm not making the selections properly or using ajax, "$ (document) .ready" does not get the data properly. How I can select properly or tell others methods!
How can improve that and make it work for all form elements?

Ad

Answer

I found the solution!

The problem was that I did not recognize my selections after we came up with a change using ajax and I just load all my field immediately after the page load and group them for each form!

 $(form + 'select[name=bu]').on('change', function (){};

And I just call a function for getting all actorid and pushing on a list and "leasing" for all field;

Ad
source: stackoverflow.com
Ad