Programmatically setting a value

Is this a bug?
#1

Hi.

This is my code:

 $('#holidaySummary_clientID').val(response[0].name).trigger('change');
$('#holidaySummary_clientID').prop("readonly", true);

under ‘success’ Ajax callback function.

When these statements are executed, the following occurs:
1 the mentioned select set a blank value.
2 the response[0].name isn’t being setted as a value for this select.
3 the mentioned select DOESN’T set to readonly.

The view:

    <div class="col-md-4" style="padding-left: 15px;padding-right: 15px">
                                    <div class="form-group form-group-material">
                                        <label class="control-label is-visible">
                                            {{ form_label(form.clientID, 'Proposal Client', {'label_attr': {'class': 'control-label is-visible'}}) }} *
                                        </label>
                                        {{ form_widget(form.clientID, { 'attr' : {'class' : 'select2 form-control', 'placeholder' : 'Proposal Client'} }) }}
                                    </div>
                                </div>

What’s wrong?

#2

Can you provide the rendered HTML and also the complete JavaScript code where you initialize the Select2, including your AJAX success handler? I can’t tell from the code you’ve provided what is actually happening.

#3 
$(document).ready(function() {

        $('#holidaySummary_proposalID').select2();
        $('#holidaySummary_assignedAgentsID').select2();
        $('#holidaySummary_clientID').select2();


        $('#holidaySummary_proposalID').on('change', function (e) {
                var data = $(this).select2('data')[0].text;
                console.log(data); // 1005) 5280 MKMEDIA_250PAX_MARZO_151392
                var title = getDataFromProposal(
                    data,
                    1 // 0 = id; 1 = title
                );
               //
                $('#holidaySummary_title').val(title);
                    var proposalID = getDataFromProposal(
                    data,
                    0 // 0 = id; 1 = title
                );
                //
                $.ajax({
                    url: "/events/getClientByProposalID",
                    type: "POST",
                    dataType: 'json',
                    data: {
                        "proposalID": proposalID
                    },
                    success: function (response) {
                        var clientName = response[0].name;
                        var clientID = response[0].id;

                        console.log(clientID); // 170
                        console.log(clientName); // MK MEDIA
               1:         $('#holidaySummary_clientID').val(clientID).text(clientName).trigger('change');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        console.log(errorThrown);
                    }
                });
        })

                $('#holidaySummary_clientID').on('change', function (e) {
    console.log("hola"); // It prints
    // The assigned values (line :1) aren't showed. Blank item
                  //  var theID = $('#holidaySummary_clientID').select2('data').id;
                  //  var theSelection = $('#holidaySummary_clientID').select2('data').text;
                    // $('#holidaySummary_clientID').text(theID);
                   // $('#holidaySummary_clientID').text(theSelection);
                })

            });

            function getDataFromProposal(proposalValue, pos) {
                return proposalValue.split(') ')[pos];
            }
#4

<select id=“holidaySummary_proposalID” name=“holidaySummary[proposalID]” required=“required” class=“form-control” placeholder=“Nombre interno”><option value="" selected=“selected”>Selecciona un Proposal</option><option value=“1001”>1001) CONVENCIÓN SHACKLETON // MARRAKECH // 120 PAX // 12.01.2018 - 13.01.2018 // 147945</option><option value=“1002”>1002) CENA NAVIDAD 2017 // 80PAX // 15.12.2017 // 136395</option><option value=“1003”>1003) EVENTO SAN VALENTÍN 2018 - 14.02.2018 - 300PAX</option><option value=“1004”>1004) Covance Immunomedics IMMU 132-05 EU IM 0144867</option><option value=“1005”>1005) 5280 MKMEDIA_250PAX_MARZO_151392</option><option value=“1006”>1006) 4 PAX SPAIN + ITALY + SWISS + FRANCE + TURKEY 20 DAYS JUNE</option><option value=“1007”>1007) TEAMBUILDING 120pax // 25.01.2018 // 148011</option><option value=“1008”>1008) EVENTO DARWING LAS GACELAS</option><option value=“1009”>1009) CENA + MINUBUS // 25.10.2017 // 0141561</option><option value=“1010”>1010) EMEA HR 0148097</option><option value=“1011”>1011) SEMINARIO BNP PARIBAS - 100PAX // 22.02.2018 // 153912</option><option value=“1012”>1012) INCENTIVO LAPONIA // 4pax// 11.01.2018 - 15.01.2018 // 146356</option><option value=“1013”>1013) INCENTIVO PUERTO RICO #0148761</option><option value=“1015”>1015) REUNIÓN LR- TARRAGONA - 151923</option><option value=“1016”>1016) INCENTIVO ROMA - 10PAX - ABRIL 2018</option><option value=“1017”>1017) Ug

#5 
   <select id="holidaySummary_clientID" name="holidaySummary[clientID]" required="required" class="select2 form-control" placeholder="Cliente del Proposal"><option value="" selected="selected">Seleccione un Proposal primero ...</option><option value="1">GESTAIR</option><option value="2">ICADE - UNIVERSIDAD DE COMILLAS</option><option value="3">ONTIER ABOGADOS</option><option value="4">LOCCITANE</option><option value="5">HIGH LINE DIVISION SL</option><option value="6">AVANZA GRUPO</option><option value="7">DOLORES PROMESAS</option><option value="8">FUNDACION ECOLEC</option><option value="9">COLEGIO OFICIAL DE PILOTOS DE AVIACIÓN COMERCIAL</option><option value="10">AUDEMARS PIGUET</option><option value="11">ALLEN &amp; OVERY</option><option value="12">COMICS GENERACION X, S.L.</option><option value="13">SUMMERWIND S.L.</option><option value="14">GRUPO AUDITORIUM</option><option value="15">GRUPO ENEAS</option><option value="16">AVANTTIC</option><option value="17">INVERSORA AGROINDUSTRIAL GLOBAL SL</option><option value="18">ENFEMENINO</option><option value="19">TRABIS</option><option value="20">NEXT LIMIT</option><option value="21">SERVICIOS DE CONTROL E INSPECCIÓN S.A</option><option value="22">ARAOZ Y RUEDA</option><option value="23">ALTAVIA</option><option value="24">GLENCORE</option><option value="25">CHAPMAN TAYLOR</option><option value="26">GRUPO SELECTA</option><option value="27">SANTIAGO MEDIANO</option><option value="28">STEF IBERIA SA</option><option value="29">GRUPO SOIL</option><option value="30">GRUPO PRAXIS</option><option value="31">GOAL SYSTEMS</option><option value="32">AGUIRRE Y COMPAÑIA SA</option><option value="33">GEICAM</option><option value="34">CLEAR CHANNEL</option><option value="35">KNAUF</option><option value="36">ORDAX</option><option value="37">ALSA GRUPO SAU</option><option value="38">PUBLIBUREAU SL</option><option value="39">TOURLINE</option><option value="40">PANORAMA</option><option value="41">PCI</option><option value="42">YOKOGAWA IBERIA SA</option><option value="43">SAFETY KLEEN ESPAÑA SA</option><option value="44">Tratamiento Superficial Robotizado S.L</option><option value="45">ASM</option><option value="46">TIPSA</option><option value="47">Vsd 4 Motorsport SL</option><option value="48">CABIFY</option><option value="49">MERIDA BIKES SWE SA</option><option value="50">FUNESPAÑA</option><option value="51">FUNDACION FAES</option><option value="52">SCANIA</option><option value="53">GRUPO OVELAR</option><option value="54">VIDACORD, S.L.</option><option value="55">SVENSON, S.L</option><option value="56">La Fábrica Gestión Más Cultura</option><option value="57">Talleres de Arte Granda, S.A</option><option value="58">TNT EXPRESS WORLDWIDE SPAIN SL</option><option value="59">BEDSON</option><
#6

I am using Symfony to populate the first select: #holidaySummary_proposalID and the second one, #holidaySummary_clientID, but I don’t think it is relevant for this issue.

Thanks for your priceless time.

Kindest regards.

#7

I have recorded a video with OBS Studio. It weights only 7mb. I could transfer it by using WeTransfer to your email if you would like :slight_smile:

Kindest regards.

#8

I am still a little unclear about whether your AJAX success handler is trying to programmatically select an existing value in the holidaySummary_clientID Select2, or trying to create a new <option> in that Select2. Assuming you’re trying to select an existing value, you should not call the text() method in this line:

$('#holidaySummary_clientID').val(clientID).text(clientName).trigger('change');

Instead, you should do this:

$('#holidaySummary_clientID').val(clientID).trigger('change');

I’ve tested this (simulating the AJAX response since I don’t have access to your URL) and it works for me. When I select the item in the first Select2, the third Select2 gets its value set.

1 Like
#11

I was wrong: I had passed clientNAME instead of clientID.

Thanks for your priceless time and support.

Kindest regards.