Question

I'm trying to launch an ajax request from javascript inside of a BrowserField.

Here is a demo application, it's just an html element which tries to make an ajax request on click.

public MyScreen() {
    // Set the displayed title of the screen
    setTitle("MyTitle");

    BrowserFieldConfig _myBrowserFieldConfig = new BrowserFieldConfig();

    _myBrowserFieldConfig.setProperty(
            BrowserFieldConfig.JAVASCRIPT_ENABLED, Boolean.TRUE);
    _myBrowserFieldConfig.setProperty(BrowserFieldConfig.ALLOW_CS_XHR,
            Boolean.TRUE);
    BrowserField browser = new BrowserField(_myBrowserFieldConfig);
    browser.displayContent(
            "<!DOCTYPE html><html><head>"
                    + "<script>function loadXMLDoc(){"
                        + "alert('t'); "
                        + "var xmlhttp;"
                        + "if (window.XMLHttpRequest) "
                        +"{ "
                            + "xmlhttp = new XMLHttpRequest();  "
                        + "} "
                        + "else { "
                            + "xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");  "
                        + "}"
                        + " xmlhttp.onreadystatechange=function()  "
                        +"{ "
                            + " if (xmlhttp.readyState==4 && xmlhttp.status==200) "
                            + "{"
//                                  + " document.getElementById(\"myDiv\").innerHTML=xmlhttp.responseText;"
                            + "}"
                            +"alert('State:'+xmlhttp.readyState+ 'status'+ xmlhttp.status)"
                        + "} "
                        + "xmlhttp.open(\"GET\",\"http://www.w3schools.com/ajax/demo_get.asp\",true);"
                        + "xmlhttp.send(); "
                        + "}"
                    + "</script>"
                    + "</head><body><h2>AJAX</h2><a onclick=\"javascript:loadXMLDoc();\">Request data</a><div id=\"myDiv\"></div></body></html>",
            "http://www.w3schools.com");
    add(browser);
}

The problem is that even the first alert is not working, so there should be a javascript syntax error, but well, everything looks good to me. I tried this code from Firefox on my computer and the alerts are shown (I know cross-domain isn't always possible). So, what is the error in my script ?

I have tested this on the simulator with BB 5.0.0 and 7.0.0.

Was it helpful?

Solution 2

What is wrong is to use an absolute url to open the XMLHttpRequest. It needs to use a relativie url (ie : demo_get.asp) and the browserfield needs to have the baseurl set correctly (http://www.w3schools.com/ajax/).

That's very inconvenient.

OTHER TIPS

I haven't checked out your javascript, but I have had problems before when I try to request content in a BrowserField before that field is actually added to its containing Manager or Screen.

So, just put this line:

add(browser);

before the call to

browser.displayContent(/* content here */);

Update: when I run your code in a 9550 5.0 simulator, I see the same problems. However, it's hard to debug a long string of html and script when it's broken into many lines, with quotes, plus signs, and escaped characters. In general, if HTML is static, I would recommend putting it into an .html file that you bundle with your app as a resource.

So, I tried putting the entire contents of your html string into a file in my project, under the /res folder, named content.html:

<!DOCTYPE html>
<html>
    <head>
         <script>
                function loadXMLDoc(){
                    alert('t');
                    var xmlhttp;
                    if (window.XMLHttpRequest)
                    {
                        xmlhttp = new XMLHttpRequest();
                    }
                    else {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function()
                    {
                        if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                               //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                        }
                        alert('State:'+xmlhttp.readyState+ 'status'+ xmlhttp.status)
                    }
                    xmlhttp.open("GET","http://www.w3schools.com/ajax/demo_get.asp",true);
                    xmlhttp.send();
                }
           </script>
      </head>
      <body><h2>AJAX</h2><a onclick="javascript:loadXMLDoc();">Request data</a><div id="myDiv"></div>
      </body>
</html>

and, then I successfully saw it load and execute the javascript onclick using this Java:

   public MyScreen() {
      super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);

      browser = new BrowserField();
      add(browser);

      InputStream content = getClass().getResourceAsStream("/content.html");     
      try {
         byte[] html = IOUtilities.streamToBytes(content);
         browser.displayContent(new String(html), "http://localhost");
      } catch (IOException e) {
         e.printStackTrace();
      }
   }

So, I'd recommend trying it that way. (Note: I don't think the localhost base URL that I use is important ... that only matters if your html contains relative links and paths)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top