Get dynamically generated element id (Begincollectionitem)

Asked

Viewed 579 times

0

I own a View, where I take the selected value in a DropDownList, I use this value in a query ajax and people another DropDownList with the return of the consultation. Until that part, all right. However, these DropDownList's will be generated dynamically, using the Begincollectionitem, with this, generating a id different for each generated item. With this, I need to get this value, to send as parameter in my queries.

In My view, I’m using the following code:

@using (Html.BeginCollectionItem("ClientesPrestacoes"))
{
    @Html.HiddenFor(model => model.Cliente.CidadeId)
     <div class="form-group col-md-9 col-lg-offset-1">
        @Html.LabelFor(model => model.Conjunto, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-2 editor-field">
            @Html.CheckBoxFor(model => model.Conjunto,  new { @class = "clickConjunto" })
            @Html.ValidationMessageFor(model => model.Conjunto, "", new { @class = "text-danger" })
        </div>
        <div id="divClienteConjuntoAdd">
            @Html.LabelFor(model => model.ClienteConjuntoId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4 editor-field">
                @Html.DropDownListFor(model => model.ClienteConjuntoId, new SelectList(""), new { @class = "form-control", @id = "ClienteConjuntoP" })
                @Html.ValidationMessageFor(model => model.ClienteConjuntoId, "", new { @class = "text-danger", @id = "ClienteConjuntoId" })
            </div>
        </div>
    </div>
        <input type="button" class="removebtn btn btn-danger col-md-1" value="X" id="removebtn" title="Excluir Pretação" style="width: 30px" />
    </div>
}

What is generated me in html that’s the one:

<div class="form-group col-md-9 col-lg-offset-1">
    <label class="control-label col-md-2" for="ClientesPrestacoes_ca186a13-315c-46e4-b7b3-b2dd3063ddb4__Conjunto">Cliente Conjunto?</label>
    <div class="col-md-2 editor-field">
        <input class="clickConjunto" data-val="true" data-val-required="O campo Cliente Conjunto? é obrigatório." id="ClientesPrestacoes_ca186a13-315c-46e4-b7b3-b2dd3063ddb4__Conjunto" name="ClientesPrestacoes[ca186a13-315c-46e4-b7b3-b2dd3063ddb4].Conjunto" type="checkbox" value="true"><input name="ClientesPrestacoes[ca186a13-315c-46e4-b7b3-b2dd3063ddb4].Conjunto" type="hidden" value="false">
        <span class="field-validation-valid text-danger" data-valmsg-for="ClientesPrestacoes[ca186a13-315c-46e4-b7b3-b2dd3063ddb4].Conjunto" data-valmsg-replace="true"></span>
    </div>
    <div id="divClienteConjuntoAdd">
        <label class="control-label col-md-2" for="ClientesPrestacoes_ca186a13-315c-46e4-b7b3-b2dd3063ddb4__ClienteConjuntoId">Nome Cliente</label>
        <div class="col-md-4 editor-field">
            <select class="form-control" data-val="true" data-val-number="The field Nome Cliente must be a number." id="ClienteConjuntoP" name="ClientesPrestacoes[ca186a13-315c-46e4-b7b3-b2dd3063ddb4].ClienteConjuntoId"></select>
            <span class="field-validation-valid text-danger" data-valmsg-for="ClientesPrestacoes[ca186a13-315c-46e4-b7b3-b2dd3063ddb4].ClienteConjuntoId" data-valmsg-replace="true" id="ClienteConjuntoId"></span>
        </div>
    </div>
</div>

Each new item, generates me one id different.

I need to retrieve the id to use as a parameter in my query ajax.

<script type="text/javascript">
$('.clickConjunto').change(function () {
    var checkId = $(this).attr('id');
    console.log(@cidadeId);
    if (document.getElementById(checkId).checked == true) {
        document.getElementById('divClienteConjuntoAdd').style.display = 'block';
        $.getJSON(BASE_URL + 'Cliente/ObterClientePorCidade', { cidadeId: @cidadeId }, function (data) {

            $('#ClienteConjuntoIdP option').remove();
            console.log('teste');
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    $('#ClienteConjuntoIdP').append('<option value="' +
                        data[i].ClienteId + '"> ' +
                        data[i].NomeEntidade + '</option>');
                }
            } else {
                $('#ClienteConjuntoIdP option').remove();
                $('#ClienteConjuntoIdP').append('<option> Essa cidade não possui Prefeituras</option>');
            }

        });
    } else {
        document.getElementById('divClienteConjuntoAdd').style.display = 'none';
    }
});

The value of checkBox i recover by clicking on it. I do this in this part:

$('.clickConjunto').change(function () {
        var checkId = $(this).attr('id');

The problem is getting the id of DorpDownList generated. I cannot use the event click() or change() to recover the value.

I tried to use something like:

 var id = $(@Html.DropDownListFor(model => model.ClienteConjuntoId, new SelectList(""))).attr('id');

But I get error.

  • You have redundant and unnecessary parts of the code, but I think the main problem is delegation. It works if you use the .change() in this way? -> $(document).on('change', '.clickConjunto', function () {

  • @Sergio So, this code is "dirty", because it is my attempts. The way you said it works too, but it only recovers the value of checkBox, and that was already done. I need to recover the value of DropDownList, to use within the for() and people the same.

  • What do you mean, "populate Dropdownlist"? Will you do it on JS or server? and "Need to recover Dropdownlist value"? when there is a change or when it is added to the document?

  • If the BeginCollectionItem is ClientesPrestacoes, It doesn’t make sense that you’re looking for a random ID, because if you do a search, the idea is that the search brings an ID that doesn’t exist. How is your code Controller?

  • @Sergio By clicking on checkbox he makes an appointment ajax and returns the list as option of DropDownList. "Povoar": Fill, load, popular with data returned from query ajax.

  • @Gypsy omorrisonmendez I’m sorry, I expressed myself very badly. The id I mean, is not the ClientePrestacoes, but the id of the Html Elemento. That is, the id of the DropDownList (id=" ")

  • This question in Soen, the user has the same problem. If I have not expressed myself well, this question may help to "clear". Note: It also has no answer.

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.