Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Unable to load HTML file form local file system inside div

Hello guys, I am working on mobile application where I need to load a HTML file which is stored locally into div,

i am able to see all the html text into div but not the images, i am using fallowing code to load html into div

 

 $.ajax({

      url : currentBroadcast.broadcast,

      data : {},

      success : function(data) {

        console.log("data is :" + data);

        $("#text_content").html("<strong>" + data + "</strong>");

      }

    });

 

    log("DEBUG: richTextPageUpdate ended");

  }

 

 

where currentBroadcast.broadcast is the URL of locale stored HTML file. the images codes as fallow into html file

<p><img alt="" src="20132002093756.png" /></p>

 

 

the data contant all the element of local html file, the console log for data come as

 

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable = no"/>

<link rel="stylesheet" type="text/css" href="/downloadable/B52/phone.css"/>

</head>

<html>

            <body>

 

<p>here is picture one</p>

<p><img alt="" src="20132002093722.png" /></p>

<p>and here's picture two</p>

<p><img alt="" src="20132002093756.png" /></p>

 

<p>This is the text broadcast for text page This is the text broadcast for text page This is

 

            </body>

</html>

 

 

can anyone help me please i am new with jquery

![Screen Shot 2013-02-20 at 11 34 26](https://f.cloud.github.com/assets/2725651/175617/a46030ec-7b51-11e2-8e1b-fd71b52b9541.png)

 

Thank you

 

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Unable to load HTML file form local file system inside div

You're sure your pictures are in the same folder as the HTML?
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Developer
Posts: 1,230
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unable to load HTML file form local file system inside div

[ Edited ]

Have you downloaded the images from a remote server and saved them to [home]?

If so you need to use a workaround

What I did was download via JSON from server then save as an image to home (canvas.toBlob does the same kinda thing)

I've now got an image in home...

<image> = /accounts/1000/appdata/com.peardox.FSTestImg.gYABgCkpAbOqC3A_P3BE_1Q8GXw/data/flags-united_kingdom.png

What you can't do is something like...

<img src="file:///<image>" />

WebWorks only lets you load files in it's own directory - these are local:///<filename.ext>

You can get around this by using a little JS and the filesysystem functions

This is hacked together from a test project - should work (sorry, threw it together for illustration)...
 

 

var fsys = false;

window.webkitRequestFileSystem( window.PERSISTENT, 10 * 1024 * 1024,  onInitFs, errorHandler);

function errorHandler()
	{	
	// It's quite long so I'm missing it out
	}


function onInitFs(fs) 
	{	
	fsys = fs; // Save this for later use
	}

function showImage(divid, path)
	{
	var reader = new FileReader();
	var home = blackberry.io.home;

	// Inject Image
	fsys.root.getFile(home + '/' + path, {},
	 function (fileEntry) {
		 fileEntry.file(function (file) {
			var reader = new FileReader();

			reader.onloadend = function (e) {
			var b64 = '';
			b64 = 'data&colon;image/png;base64,' + btoa(this.result);
			$(divid).attr('src',b64);
			};

			reader.readAsText(file);
		}, errorHandler);
	 }, errorHandler);
				 
	}
	

 The &colon; in the code is supposed to be a colon (dumb forum system...)

With that lot you can call showImage passing it a DIV ID and the path to an image in [home] and it'll load a Base64 data-URL.

Obviously you can only do it this way after the DIV has been created in the DOM




Click the like button if you find my posts useful!
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: Unable to load HTML file form local file system inside div

Thank you very much for reply, all the pictures and HTML file are in the same folder,

 

all the pictures and HTML file come as a zip file from server and get unzip into one folder, if I open the HTML file into web browser it show all the pictures but when I am loading it into div it come as unknown

 

 

regards

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 1,230
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unable to load HTML file form local file system inside div

How are you unzipping?

 

Using the community extension?




Click the like button if you find my posts useful!
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: Unable to load HTML file form local file system inside div

thank you very much peardox, the process is like that , the admin send the broadcast from server with attached pictures, when the application start it pull down all the all the broadcasts and unzip them into one folder, what i want is to load the html file from unzipped folder to div

 

sorry i am a new mobile application developer,

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: Unable to load HTML file form local file system inside div

to unzip file i am using fallowing code

 

  /**
   * Unzip the supplied file
   * @param filename
   * @param broadcastId
   */
  function unzipBroadcastContent(downloadState, file) {
    log("DEBUG: unzipBroadcastContent called");

    var cacheLocally = downloadState.cacheLocally;
    var path = file.fullPath;
    var destination = path.substring(0, path.length - file.name.length);

    // var destination = window.rootFS.fullPath + "/downloadable/" + broadcastId;

    log("DEBUG: destination directory for unzipping: " + destination);

    downloadState.progressCallback(new ProgressEvent(cacheLocally, "Unpacking", -1));
    var extractZipFile = window.plugins.extractZipFile;

    function unzipSuccess(status) {
      log("DEBUG: Unizpped broadcast: " + cacheLocally.ownerId + "/" + cacheLocally.key + " successfully.");
      cacheLocally.unpacked = UNPACKED;
      cacheLocally.unpackDestination = destination;
      cacheLocally.persist();
      downloadState.progressCallback(new ProgressEvent(cacheLocally, "Unpacking", 1.0));

      fileProcessingComplete(downloadState, file);
    }

    function unzipFailed(error) {
      log("DEBUG: Failure to unpack zip", error);
      downloadState.progressCallback(new ProgressEvent(cacheLocally, "Unpacking failed", 1.0));
      incrementFailures(downloadState);
      downloadState.errorCallback(cacheLocally, error);
      jobComplete();
    }

    extractZipFile.extractFile(path, destination, unzipSuccess, unzipFailed);
  }

 

 

 and the i have a plugin name zip.js

 

/**
 * ZipPlugin.js
 *
 * Phonegap Extract Zip File plugin
 *
 * Created by Shaun Rowe on 10/05/2012.
 * Copyright (c) Pobl Creative Cyf. 2012
 *
 */
var ExtractZipFilePlugin = function() {};

cordova.addConstructor(function(){
    if(!window.plugins) window.plugins = {};
    console.log("Loading ZIP plugin");
    window.plugins.extractZipFile = new ExtractZipFilePlugin();
    console.log("Loaded ZIP plugin");
});

ExtractZipFilePlugin.prototype.extractFile = function(file, destination, successCallback, errorCallback) {
    return cordova.exec(successCallback, errorCallback, "ExtractZipFilePlugin", "extract", [file, destination]);
};

 

 

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 1,230
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unable to load HTML file form local file system inside div

What value does this give you?

 

var path = file.fullPath;

 

What are you developing for? 7, PB, BB10?




Click the like button if you find my posts useful!
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: Unable to load HTML file form local file system inside div

i am developing for 7, after unzip completed , the url i am getting is 

file:///var/mobile/Applications/7B932E33-190F-4A84-A92D-FB3713376DD3/Documents/downloadable/B55/index.html

 

where downloadable is the folder where all the files get unzipped and B55 is the folder of broadcast 55 and index.html is the html file i am loading into div

 

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 1,230
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unable to load HTML file form local file system inside div

Ahh

 

Most Qs around here are BB10 and the APIs completely different

 

Soz - dunno in that case




Click the like button if you find my posts useful!