How to load external page into "container" div using jQuery Mobile?

1
votes

I am building up a PhoneGap app using jQuery Mobile. I want the app to load a html-page from external source and put it to the "content" div of same html-page where the user clicked the link (but to another "page" div of JQM).

  • "#booking-content" is the content div where I want the external page to load to.
  • "#bookings" is the page div what I want to load and show after the
    external page has been loaded.
  • "#bookings_link" is the ID of the link what the user clicks and where the function call originates from.

Here's click-event -function for the link:

$('#bookings_link').click(function(){'
    $("#booking_content").load("http://www.pagetoload.com",function(){
        $('#booking_content').trigger("pagecreate").trigger("refresh");
        $.mobile.changePage( $("#bookings"), { transition: "slideup"} );
})

I have tried that using jQueryMobile's $.mobile.loadPage -function as well:

$.mobile.loadPage("http://www.pagetoload.com",{pageContainer: $('#booking_content')});
$.mobile.changePage( $("#bookings"), { transition: "slideup"} );

With jQuery's load method, I got the following error message: Uncaught TypeError: Object [object DOMWindow] has no method 'addEvent' at file: and "Unknown chromium eroor: -6"

I have also tried to include the logic into the pagebeforechange-loop (http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html) but without results. From that, the app is saying: *Uncaught TypeError: Cannot read property 'options' of undefined at file:///android_asset/www/jquery.mobile-1.1.1.min.js:81*

I have set true the $.support.cors and $.mobile.allowCrossDomainPages settings for cross-domain linking.

I am using jquerymobile 1.1.1 and jquery's core 1.7.1. I am testing it with Android SKD api level 16 AVD.

One weird thing is that I got the pageloading functionality working earlier with the same logic, but since I haven't used SVN I have no possibility to check where's the error in this.

I am completely stuck with this and I would be very grateful if someone could show me the right direction.

2
jquerycordovajquery-mobile
Ok, I guess I can get the contents of the external page by using jQuery's .get function, format the fetched data appropriately and put it to the div... But because I'm quite lazy, I would prefer that the functions which are meant to do the stuff i said above.. so if anyone has some clue why these error messages are shown, please answer :) Thanks!! – BigGiantHead

2 Answers

0
votes

I think you are describing the functionality of Phonegap childbrowser plugin , check it out :-) .

0
votes

Here is my solution. I calll the function app_getPage(filePath) to load a text string with the contents of a page. Then I use JQUERY to update the HTML in that <div> as follows:

// Fetch a page into a var
var pageText = app_getPage('pages/test.html');
// Did it work?
if(pageText) 
{
    // Yes it did, stick it out there
    $('#appTestDiv').html(pageText);
    $('#appMainDiv').trigger('create');  // Probably not necessary
}
else
{
    // No good so handle the failure here
    app_doEndOfWorldPanicRebootAndMeltDown();
}

Note that in my example the below function references appData.PageTopTag and appData.PageBottomTag, I use those just inside my <body> tags so that I can strip out the enclosing document elements. In this instance they contain <!--FooTop--> and <!--FooBottom--> respectively. This way I can use my favorite HTML editor to create the content I want to load and not worry about all the junkage it adds to my pages. I also use appData.Debug to decide if I am in Debug mode for sending junk to the console.

function app_getPage(filePath)
{
    // Get the file name to load
    if(appData.Debug) console.log(arguments.callee.name + ":LoadFile:" + filePath);        
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",filePath,false);
    xmlhttp.send(null);
    // Did we get the file?
    if(xmlhttp.status != 0)
    {
        // Yes, remember it
        var fileContent = xmlhttp.responseText;
        if(appData.Debug) console.log("LoadFile-Success");
    }
    else
    {
        // No, return false
        if(appData.Debug) console.log("LoadFile-Failure");
        return false;
    }
    if(appData.Debug) console.log("FileContent-Original:" + fileContent);
    // Get the indexes of the head and tails
    var indexHead = fileContent.indexOf(appData.PageTopTag);
    indexHead = indexHead >= 0 ? indexHead : 0;
    var indexTail = fileContent.indexOf(appData.PageBottomTag);
    indexTail = indexTail >= 0 ? indexTail : fileContent.length();
    // Now strip it
    fileContent = fileContent.substr(indexHead,indexTail);
    if(appData.Debug) console.log("FileContent-Stripped:" + fileContent);
    // Return the data
    return fileContent;
}

So if 'page/test.html' contained the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Title Foo</title>
  </head>
  <body>
    <!--FooTop-->
      <div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true">
        <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a>
        <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a>
        <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a>
      </div>
    <!--FooBottom-->
  </body>
</html>

You would get <div id="appTestDiv" data-role="content"></div> loaded with:

<div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true">
  <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a>
  <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a>
  <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a>
</div>

I know there are more compact ways of doing this and most of you will hate my formatting but this works for me, is clean and easy to read.