Set focus dopo change di una dropdownlisti

di
eternityck
il
2 risposte
E
eternityck
Utente Attivo
Iscritto da
mag, 2018
Messaggi:
171

Set focus dopo change di una dropdownlisti

Salve ho un problema che credo sia veramente di facile soluzioni, ma mi sto scervellando da un paio di giorni.
ho una view modal divisa per schede dove nella seconda scheda ho 2 dropdwonlist, dove all' aggiornamento di una delle due l' altra si deve aggiornare.
view 

<form asp-action="DipendentiModifica" id="FormAggDip" asp-route-id="@Model.Id" method="post" onsubmit="return jQueryAjaxAggDip(this);">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />

    @*Titoli Schede*@
    <div class="modal-header">
        <div class="tabbable">
            <ul class="nav nav-tabs" role="tablist" style="background: #93BA09 ">
                <li class="nav-item"><a class="nav-link text-body" href="#tab1" data-toggle="tab">Dati Anagrafici</a></li>
                <li class="nav-item"><a class="nav-link text-body" href="#tab2" data-toggle="tab">Dati Contrattuali</a></li>
                <li class="nav-item"><a class="nav-link text-body" href="#tab3" data-toggle="tab">Assunzioni</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            @*Scheda Generale*@
            <div class="tab-pane active" id="tab1">
	...........


        </div>
        @*Dati Contrattuali*@
        <div class="tab-pane" id="tab2">
            @*Riga 1*@
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="control-label">Cantire di Lavoro</label>
                        <select class="form-control" id="Cantiere" name="Idcantiere" asp-for="Idcantiere" asp-items="ViewBag.DropCantieri">
                        </select>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="form-group">
                        <label class="control-label">Comune del Cantiere</label>
                        <select class="form-control" id="ComuniCantiere" name="Idcomune" asp-for="Idcomune" asp-items="ViewBag.DropComuniCantiere"></select>
                    </div>
                </div>
            </div>
        </div>

        @*Assunzioni*@
        <div class="tab-pane" id="tab3">
 ......
            </div>
        </div>
    </div>

    <div class="modal-footer">
        @*Pulsante Modifica*@
        <div>
            <input type="submit" value="Conferma Modifica" form="FormAggDip" class="btn btn-primary" ; return true;" />
        </div>
    </div>
</form>
quando aggiorno l id "Cantiere"
con questo script aggiorna la modal view e funziona tutto. 

    $("#Cantiere").on("change", function () {
        var SelectedCantiere = $("#Cantiere").val();
        var dID = $('#Id').val();
        $.ajax
        ({
            type: 'GET',
            url: "DipendentiModifica?id=" + dID,
            data: {SelectedCantiere: SelectedCantiere},
            success: function (res) {
                $('#form-modalDip .modal-body').html(res);
             },
            error: function (err) { console.log(err) }
        }),
       function (err) { console.log(err) }
    });
il mio unico problema è che torna alla prima scheda, io invece vorrei che tornasse alla scheda 2 che ha come id"tab2"

ho provato, dopo aver guardato in giro a ad aggiungere il codice 

                $('#form-modalDip', '#tab2').focus(res);
su success così 

    $("#Cantiere").on("change", function () {
        var SelectedCantiere = $("#Cantiere").val();
        var dID = $('#Id').val();
        $.ajax
        ({
            type: 'GET',
            url: "DipendentiModifica?id=" + dID,
            data: {SelectedCantiere: SelectedCantiere},
            success: function (res) {
                $('#form-modalDip .modal-body').html(res);
                $('#form-modalDip', '#tab2').focus(res);
            },
            error: function (err) { console.log(err) }
        }),
       function (err) { console.log(err) }
    });
ma niente dopo aver cambiato il valore del cantiere rimane sempre nella prima pagina.

Qualche dritta?? Grazie mille

2 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3072

    Re: Set focus dopo change di una dropdownlisti

    eternityck ha scritto:

    ho provato, dopo aver guardato in giro a ad aggiungere il codice 
    
                $('#form-modalDip', '#tab2').focus(res);
    [...]
    Qualche dritta?? Grazie mille
    Mi risulta si faccia così: 
    $('#tab2').tab('show');
    Fai una prova.
  • E
    eternityck
    Utente Attivo
    Iscritto da
    mag, 2018
    Messaggi:
    171

    Re: Set focus dopo change di una dropdownlisti

    Grazie Alka, ma non funziona torna sempre al primo tab.
    pensavo, non è che ho sbagliato approccio e non devo ricaricare tutto il modal ma solo la dropdown che deve essere aggiornata?

    per completezza il mio controller è: 
    
        public async Task<IActionResult> DipendentiModifica(Guid? Id, Guid SelectedCantiere)
        {
            if (Id == null || Id == Guid.Empty)
            {
                return View(new Dipendente());
            }

            var DipendentiModifica = await context.Dipendenti.FromSqlRaw("SELECT * FROM Dipendenti").FirstOrDefaultAsync(m => m.Id == Id);

            if (DipendentiModifica == null)
            {
                return NotFound();
            }

            if (SelectedCantiere == Guid.Empty)
            {
                SelCantiere = DipendentiModifica.Idcantiere.ToString();
            }
            else
            {
                DipendentiModifica.Idcantiere = SelectedCantiere;
                SelCantiere = SelectedCantiere.ToString();
            }

            ViewBag.DropCantieri = new SelectList(GetDropCantieri(), "ID", "Denominazione"); // Viewbag
            ViewBag.DropComuniCantiere = new SelectList(GetDropComuniCantiere(), "ID", "Denominazione"); // Viewbag

            return View(DipendentiModifica);
        }

//POPOLO la DropDownList Cantieri
        public IEnumerable<DropCantiere> GetDropCantieri()
        {
            var ListResult = context.DropCantieri.FromSqlRaw("SELECT ID, Denominazione FROM Cantieri").ToList();
            return ListResult;
        }
//POPOLO la DropDownList Cantieri
        public IEnumerable<DropComuneCantiere> GetDropComuniCantiere()
        {
            var ListResult = context.DropComuniCantiere.FromSqlRaw("SELECT dbo.Comuni.ID, dbo.Comuni.Denominazione FROM Cantieri INNER JOIN Comuni ON Cantieri.IDComune = Comuni.ID " +
                "WHERE (Cantieri.ID= '"+ SelCantiere +"')").ToList();
            return ListResult;
        }
    Se si, come faccio ad aggiornare solo dropdown tramite ajax?
Devi accedere o registrarti per scrivere nel forum
2 risposte