Html5 app with web service calling works on emulator but not on device

Question

I have developed an app in HTML5 using javascript. I have called php web service using json. Now am trying to execute it for android.

The application works well with web services on emulator, but fails to load the text and images from server on device.

I tried many solutions which I found on stackoverflow and other links like using hostname, checking wifi of device, INTERNET permissions in manifest file, using WebView but it doesnt work.

Please help.

//This is what I have done in eclipse.

public class MainActivity extends DroidGap {

    WebView webview;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Log.d("hello","start");

        webview = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webview.setWebChromeClient(new WebChromeClient());

        webview.loadUrl("file:///android_asset/www/HTML/index.html");
        Log.d("After load", "url");

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

Fetching images and text is all done in javascript. It has no problem at all working in browser as well as on emulator. But it fails on device.

//This is my json call function.

<script>
    function jsondata(data)
    {
        setTimeout(function () {
         var parsedata = JSON.parse(JSON.stringify(data));
         var main_category = parsedata["mainCategory"];

            for (var i = 0; i < main_category.length; i++) 
            {
                var menu = main_category[i];
                menu_id=menu['mcatid'];         

                var id = document.createElement("table");   

                if((i%2)==0)
                {

                   id.innerHTML+='<br><br><br><td><a href="#" onclick="selected_index('+menu_id+')"><img src='+menu['mcatimage']+'><br><hr color=#000;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><font face="DEVROYE">'+menu['mcattitle']+'<hr color=#000;></a></td></strong>';
                  document.getElementById("id_left").appendChild(id);
                }
                else
                {

                   id.innerHTML+='<br><br><br><tr><td><a href="#" onclick="selected_index('+menu_id+')"><img src='+menu['mcatimage']+'><br><hr color=#000;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><font face="DEVROYE">'+menu['mcattitle']+'<hr color=#000;></a></td></strong>';
                   document.getElementById("id_right").appendChild(id);
                }   
            }
            }, 2000); 
     }

    /*-------------calling web service-----------*/
    jsonp("http://hostname/maincategory.php?callback=jsondata");
</script>

Here is how I fetched images and text from the web service and displayed on HTML page. What is the problem with this ?

Today I tried many things like changing <access origin="*"/> to <access origin=".*"/> and <access origin="http:hostname"/> But nothing worked.

Answer 1

My application works on device also now.

There was no problem from android side. I used ajax instead of json in javascript. And it started working efficiently on device also.