Capturing a part of web page for mobile devices

Question

I have an android app where I want to show a page to users inside the webview but the problem I am facing is that I can't use the web page as it is because the page is not responsive to mobile devices and user needs to scroll horizontally and vertically a lot. The web page is:

http://www.ielts.org/test_centre_search/search_results.aspx

I just need the drop down search functionality from that page. I tried copying the html source code on my local to replicate the page but the since the html form's action has to be http://www.ielts.org/test_centre_search/search_results.aspx for fetching the results, when I select an option on my local version, it goes to the http://www.ielts.org/test_centre_search/search_results.aspx url and displays their version of page next time.

I came across this page:

http://www.ieltsessentials.com/test_centre_search.aspx

which is implementing the same functionality. How can I replicate the same and add it inside local .html document

Answer 1

i think the easiest way to implement this will be to inject your own css style into their html, and hide/restyle the elements that are not responsive. that way you don't have to analyze any of the logic that they have, as it will be safely on css level. the only thing you have to figure out is how to re-inject your css into the web view after the page is reloaded. there's actually a way to do that by simply injecting a javascript call into their page like here https://stackoverflow.com/a/5010864/467198

to detect that page is reloaded i think you can use onPageFinished

Answer 2

you could use asp to proxy the page you want to canibalize and then in jQuery you could traverse that proxy'ed page and pull out the pieces you want to use and then create your new, responsive doc from items scraped from the original page.

i'm not an asp.net developer so i've used php in my example. here's a link to an example of how asp.net could be used to proxy a page

Simplest Possible ASP .NET AJAX Proxy Page

<?php echo file_get_contents( $_GET['u'] );

then in jQuery use $.ajax() to read the proxy'ed page as HTML and scrape the page as needed

<script>

$(function(){
    $.ajax({
            url:'proxy.php?u=http://www.ielts.org/test_centre_search/search_results.aspx',
            dataType:'html',
            success:function(data){
                console.log($('#header',data));
            }
    })
});

</script>

in this example i'm just reading the contents of the #head but you could scrape whatever you need from the original page and then inserting them into your target dom or pass them to a template. to get what you're looking for you'd use '#Template_TestCentreSearch1_SearchTable' where i use '#head' to retrieve your drop down markup