whitelist phonegap android is not work for next page

Question

I am using

 $('#result').load('http://.... #div');

to get the content of external website. I edited the domain whitelist for PhoneGap. It is working, if I set this page as the index page. However, it can't function well when it is set as the next page by submitting a form. Content from external website is not shown. How can I solve it? Thank you

Answer 1

It's better to use a javascript framework for this and still use a single index.html file. Best practice i have come across is to make an application not multiple html files. There are many frameworks to accomplish this the best documented is jquerymobile.

Using JQueryMobile in your javascript file you would check when page1 div loads using jquerymobile then run your .load code.

JQueryMobile has differen't events it looks out for..in this case before page initiates (pageinit) you want to run the load thing to grab content from the other website.

$( "#page1" ).live( "pageinit",function(){ 

    $('#result').load('http://.... #div'); //place your load here..you can even $.post(function(){..}); to a php script to get exactly what you want.


});

Your html file inside the body tag will have this and of course you need to include jquery and jquerymobile js and css files in between your head tags.

<div data-role="page" id="home" data-theme="a">
            <div data-role="header">
                <h1>Welcome</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li class="btn_a"><a href="#page1">Page1</a></li>
                    <li class="btn_s"><a href="#page2">Page2</a></li>
                    <li class="btn_l"><a href="#page3">Page3</a></li>

                </ul>
            </div>

            <div  data-role="footer">
                <h4>Your Brand</h4>
            </div>
        </div>


<div data-role="page" id="page1" data-theme="a">
            <div data-role="header">
                <h1>Page1 Heading</h1>
            </div>
            <div data-role="content">
                <h1>This is Page1</h1>
                           <div id="#result"></div>
            </div>

            <div  data-role="footer">
                <h4>Your Brand</h4>
            </div>
        </div>