0

I have a script that loads XML data, and depending on a select statement, it loads certain records. I found that issuing a location.reload() at the onchange, actually refreshes everything, and the data is loaded correctly. Although, it doesn't work that way in Chrome. It simply return the selected item to its default state.

I've read about async update, and I wonder if this can be used here.

This is my select, in JS, since is the way I found to load the XML items as options:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","line-perf.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<form name='lineForm'><div class='line-sel'>Line: ");
var x=xmlDoc.getElementsByTagName("SVC");
document.write("<select name = 'linesel' id='select1' onChange='line=this.value;location.reload();'>");
for (i=0;i<x.length;i++)
    {
    document.write("<option>");
    document.write(x[i].getElementsByTagName("LINE")[0].childNodes[0].nodeValue);
    document.write("</option>");
    }
document.write("</select></div></form>");

If it cannot be accomplished, then how can I avoid Chrome to default the select statement after reload?

Thanks for your help.

UPDATE

This is the rest of the script that uses the select value to load the XML:

line = document.lineForm.linesel.value;
    document.write("<img class='linelogo' src='images/lines/"+line.toLowerCase()+".png'>");
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","Services.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    document.write("<table align='left' border='0' cellpadding='0' cellspacing='0' width='340' height='300' class='svc-mat'><tr>");
    var x=xmlDoc.getElementsByTagName("SVC");
    var col=0;
    for (i=0;i<x.length;i++)
        {
        if (line != "ALL") {
            if (x[i].getElementsByTagName("LINES")[0].childNodes[0].nodeValue.search(line) != -1) 
                {
                document.write("<td><ul><li><a href='svc-det.html?name=");
                document.write(x[i].getElementsByTagName("CODE")[0].childNodes[0].nodeValue.replace(/\s+/g, '_'));
                document.write("'>");
                document.write(x[i].getElementsByTagName("CODE")[0].childNodes[0].nodeValue);
                    if (col==4 || col==9 || col==14 || col==19 || col==24 || col==29 || col==34 || col==39 || col==44 || col==49 || col==54 || col==59) {
                    document.write("</a></li></td></tr><tr>");}
                    else {
                    document.write("</a></li></td>");
                    }
                col++;
                }
            } else {
                    document.write("<td><ul><li><a href='svc-det.html?name=");
                    document.write(x[i].getElementsByTagName("CODE")[0].childNodes[0].nodeValue.replace(/\s+/g, '_'));
                    document.write("'>");
                    document.write(x[i].getElementsByTagName("CODE")[0].childNodes[0].nodeValue);
                        if (i==4 || i==9 || i==14 || i==19 || i==24 || i==29 || i==34 || i==39 || i==44 || i==49 || i==54 || i==59) {
                        document.write("</a></li></td></tr><tr>");}
                        else {
                        document.write("</a></li></td>");
            }
        }
    }
    document.write("</ul></tr></tbody></table>");
Martin Ocando
  • 914
  • 2
  • 8
  • 18
  • 1
    Why are you triggering `location.reload()` ?? – T J Aug 31 '14 at 08:26
  • Because if I don't, it won't reload the XML, taking into account what the user selected. – Martin Ocando Aug 31 '14 at 16:48
  • How does the (reloaded) page know which option the user had selected? – Bergi Aug 31 '14 at 16:54
  • 2
    Just don't reload the page. Don't use SJAX, but AJAX. Don't use `document.write`, but DOM manipulation. – Bergi Aug 31 '14 at 16:55
  • This might also help: http://stackoverflow.com/q/25398005/2333214 – T J Aug 31 '14 at 17:09
  • Very helpful. Thank you. I ended up using a var to build the html, then assigning it to `document.getElementById('div-id').innerHTML` I have another problem now. The rendering in Chrome is simply horrible. Nothing gets rendered, divs are not updated, and simply does not work. Any ideas to look for to make it compatible with Chrome? – Martin Ocando Aug 31 '14 at 21:30

0 Answers0