Auto refresh select box when new option added to it

Question

I am facing a problem when I add data to my select box at run time the page never auto refreshes. I have to manually refresh the page in order to get select picker populated with newly added option value.

Now when I click ... dotted button in select picker it opens a popup

If i add value on this popup it does not gets reflected in my selectpicker. Please help me. I want to auto refresh select box

EDIT: MY JSP CODE:

<TD ALIGN="LEFT">
    <fdms:speedselect name="firstCallInformation" property="placeDeath" category="LOCDEATH" column="1"
            combo="true" maxlength="50" size="1" textsize="30">
    <fdms:linkoption text="Edit list..." script="tableWindow2('LOCDEATH',1,'firstCallInformation.placeDeath')" />
    <fdms:targetfield column="2" property="locationDeceased" />
    <fdms:targetfield column="3" property="placeDeathCity" />
    <fdms:targetfield column="6" property="placeDeathState" />
    <fdms:targetfield column="7" property="placeDeathZip" />
    <fdms:targetfield column="8" property="locDeathLicenseNumber" />
    </fdms:speedselect>
</TD>

I am using sort of ajax call but not sure is it correct or not

function loadFacility(callback)
            {
                alert('In loadFacility');
                var xmlhttp;
                var keys=document.firstCallInformation.facilityselect.value;
                var urls="localhost:8080/webfdms/showFirstCallInformation.do?vitalsId=366";
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status == 200)
                    {
                         //var some=xmlhttp.responseXML.documentElement;
                        var resposne = xmlhttp.responseText;
                        alert(resposne);
                        callback(xmlhttp.responseText);
                    }
                }
                xmlhttp.open("GET",urls,true);
                xmlhttp.send(null);
            }
            function loadFacilityCallback(resposne){
                if(resposne != null){
                    alert(resposne);
                }
            }

And calling it like :

<fdms:speedselect property="facility" category="FacilityPlace" maxlength="50" column="1" combo="true" size="1" textsize="60" onchange="loadFacility(callback)">

Answer 1

I'm guessing the update is done on the server? The jsp will be compiled into a servlet that will render a HTML page, which in turn will live on the browser. HTTP is a stateless protocol, so without a further request the jsp page will not know that the change has been made.

If this is the case your options are:

• Use HTTP/2
• Use WebSockets
• Poll the server using Ajax request for changes