HTML select not working after AJAX call

Question

This is straight HTML/javascript. The page works fine when executed on its own, but through an AJAX call it does not work on IE11. After clicking the 'show' button on the main page, it opens a list with options, read from an XML file; it accepts a double click to select an item and shows the selected number in an alert box. (it also writes this value to a java properties file). On Chrome and FF it works as expected, but not in IE11. On IE it refuses to select any item. AJAX's return-page opens a div with absolute positioning, and dragging possibilities. After I drag the box with the list to another place, it suddenly does work in IE as well (but only after dragging more than just a few pixels). I can only assume it's a type of bug in IE11, but is there a work around? Why would dragging the box make it work?

Here's the significant code:

in main.jsp:

<span id='showcurevent' onclick='showevent(<%=EVENTID%>, 0)'>Show </span>

<div id='Qevents' class='drag' ></div>

  <script>
function showevent(nr, curevent) {
    var eventdiv=document.getElementById('Qevents');
   var url="AJAX1.jsp?xml=<%=XMLfile%>&index="+nr+"&curevent="+curevent;
    sendAjaxRequest(url, callback1);
}

function callback1(pushtext) {
    var eventdiv=document.getElementById('Qevents');
    eventdiv.innerHTML=pushtext;
    eventdiv.style.visibility='visible';
}

in AJAX1.jsp file:

<table><tr>
  <td><select id='sel' size=10 ondblclick='SetSelectedEvent(this.value)'>
    <option value='1'>1 text1</option>
    <option value='2'>2 text2</option>
        etc, several more ...
  </select></td></tr>
</table>

in main.jsp file:

function SetSelectedEvent(nr) {
    var url="AJAX2.jsp?props=<%=propsFile%>&event="+nr;
    sendAjaxRequest(url, callback2);
}
function callback2(pushtext) {
    var number = pushtext.substring(pushtext.indexOf("Value selected=")+15,pushtext.indexOf("</body"));
    alert('value Selected: '+number);
}

in AJAX2.jsp:

<%
String eventnr=request.getParameter("event");
%> Event selected=<%=eventnr%>
</body>

AJAX1 and AJAX2 is in fact the same file, but different parts of the code, selected by the value of request.parameter() values.

The AJAX code itself is in a separate .js file:

function sendAjaxRequest(url, callback) {
  var xmlHttp=new XMLHttpRequest();
   if (xmlHttp==null) { // browser does not support AJAX
      return;
   }
   xmlHttp.onreadystatechange=function() {
      if (xmlHttp.readyState==4 && xmlHttp.status == 200)  {
         callback( xmlHttp.responseText);
        }
    }
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}

onclick='showevent(<%=EVENTID%>, 0)'> probably should be onclick='showevent("<%=EVENTID%>", 0)'> if it is a string and not a variable — Bindrid, Dec 25 '16 at 01:50
sendAjaxRequest is in a separate .js file and is standard Ajax handling.I updated the main code part to include it. — mljm, Dec 25 '16 at 19:43
I know IE likes to cache Ajax get requests. Could the issue have something to do with that? http://stackoverflow.com/questions/4303829/how-to-prevent-a-jquery-ajax-request-from-caching-in-internet-explorer — Pennywise, Dec 25 '16 at 20:10

score 0 · Answer 1 · answered Dec 30 '16 at 22:45

Ok, I found the problem, it was the drag routine hijacking the functionality. When I disabled drag, it worked. I now changed the drag function to check if the cursor is over an input or select tag and disallow dragging at that point. Thanks to all who looked into this.

HTML select not working after AJAX call

1 Answers1