I use PhoneGap to create mobile app which can select image from album, and then I want to pass that image and show in another html page. Anybody have any idea how to do that? Here is my code
selectImage.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoURISuccess(imageURI){
window.location.href = "review.html";
var image = document.getElementById('image');
image.style.display = 'block';
image.src = imageURI;
}
function getPhoto(source){
navigator.camera.getPicture(onPhotoURISuccess, onFail, {quality: 50,
destinationType: destinationType.FILE_URI, sourceType: source});
}
function onFail(msg){
alert('Failed because: ' + msg);
}
</script>
</head>
<body>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button>
<!--<img style="display:none;width:60px;height:60px;" id="image" src="" />-->
</body>
</html>
review.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Review</title>
</head>
<body>
<br>
<img style="display:none;width:60px;height:60px;" id="image" src="" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
</body>
</html>
You can use html5 localstorage.
localStorage.seItem('url','your image path');
On the next page access it in
var myUrl = localStorage.url
Since Cordova runs on a WebView you should be able to send it through the URL as a parameter and then fetch it on the next page.
Redirect and attach photoId as URL parameter
window.location.href= "review.html?photoId=1354123";
Grab it on the other side using JS
//Generic function to fetch URL query strings
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var photoId = getParameterByName('photoId'); //grab it
Related
The thing i wanna do is when user writes something to input and sumbits it, the page will change to the input.
Example:
If user writes "Web" to the input, the page title should change to "Web"
Here's the code:
JS:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").textContent;
document.getElementById("title").innerHTML = newTitle;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Web Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center><label id="originLabel">Welcome to Web Editor!</label><br></center>
<br><label id="changeTitleLabel">Change the title of Web: </label><br>
<input type="text" id="newTitle"><br>
<button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>
You can assign new title to the document like this:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
This is actual implementation but keep in mind that it must run after the DOM element with id newTitle.
If you put your <script> tag inside <head>, you'll need DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
})
try this:
document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;
})
I stored images in sqlite database by converting it in base64 format and inserted into DB.It was inserted succssfuly as i got insert id after inserting records but when i opened my db the database's table wasnt having any column .Is that correct ??.
And my second problem is i want to fetch image and display it in the particular area i.e pictureUrl (here) but unable to do so. Below is my code. Suggest the changes required. Thanks in advance :)
app.js
var db=null;
var example=angular.module('starter', ['ionic', 'ngCordova']).run(function($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
db = window.openDatabase("my.db","1.0","my.db",100000);
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS imagewala (img blob)");
window.alert("Database Created .. !")
});
example.controller('CameraCtrl',function($scope, $cordovaCamera,$cordovaSQLite){
function dataURItoBlob(dataURI, callback) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
$scope.pictureUrl="http://placehold.it/50x50";
$scope.takePicture=function(img){
var options = {
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.pictureUrl = "data:image/jpeg;base64," + imageData;
var query = "INSERT INTO imagewala (img) VALUES (?)";
$cordovaSQLite.execute(db, query, [img]).then(function(res) {
window.alert("INSERT ID -> " + res.insertId);
}, function (err) {
window.alert(err);
});
window.alert("Picture Captured .. !!");
}, function(err) {
window.alert("Error hai baaaa..!!"+err);
});
}
$scope.takePhoto=function(){
var options = {
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
encodingType: Camera.EncodingType.JPEG
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.pictureUrl = "data:image/jpeg;base64," + imageData;
window.alert("Picture Captured .. !!");
}, function(err) {
window.alert("Error hai baaaa..!!"+err.message);
});
}
$scopr.selectPhoto= function () {
var query = "select img from imagewala";
$cordovaSQLite.execute(db, query, []).then(function(res) {
window.alert("SELECT ID -> " + res.insertId);
$scope.pictureUrl=res.readAsArrayBuffer();
window.alert("ahahaha");
}, function (err) {
window.alert(err);
});
window.alert("Photo Captured .. !!");
}
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script>
window.location='./main.html';
</script>
</head>
<body>
</body>
</html>
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ng-cordova.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="CameraCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Camera</h1>
</ion-header-bar>
<ion-content >
<div class="list card">
<div class="item item-image">
<img src="{{pictureUrl}}">
</div>
</div>
<div class="padding">
<button ng-click="takePicture(pictureUrl)" class="button button-block button-calm">Take Picture</button>
<button ng-click="takePhoto()" class="button button-block button-positive">Choose Picture</button>
<button ng-click="selectPhoto()" class="button button-block button-assertive">Choose Picture</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
As per my knowledge cordova sqlite plugin doesn't support blob data type, Try to change data type img to TEXT data type and check.
I hope this solves your problem
I want to pass the value which i get from a text box to the src of my iframe. I am using the following code to get the value from textbox, on the button click it should be passed to the iframe src and replace the query:'*' with the variable passed, i.e. the * should be replaced.
How to proceed with this?
Foloowing is the iframe with html code
<iframe src="http://localhost:5601/#/dashboard/New-Dashboard?embed&_a
=(filters:!(),panels:!((col:1,id:env,row:1,size_x:4,size_y:3,type:visualization)
,(col:5,id:env-2,row:1,size_x:4,size_y:3,type:visualization),(col:9,id:env-3,
row:1,size_x:4,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard:
!t,query:'*')),title:'New%20Dashboard')&_g=(refreshInterval:(display:Off,pause
:!f,section:0,value:0),time:(from:now%2Fy,mode:quick,to:now%2Fy))" height="600"
width="800" id="myframe"></iframe>
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
});
});
</script>
</head>
<body>
<div>
<input type="text" class="txtName" value="hello" id="querypass"/><br />
<button class="btnGetName">Get Name</button>
</div>
</body>
</html>
Try this
var src = $('#myframe').attr('src');
var newSrc = src.replace("query:'*'", "query:'" + name + "'");
$('#myframe').attr('src', newSrc);
You can try following code:
Note: Assuming that your <iframe> is within same HTML document:
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
var iframeObj = $("#myframe");
var srcString = iframeObj.attr("src");
srcString = srcString.replace("query:'*'","query:'"+name+"'");
iframeObj.attr("src",srcString );
});
Please make sure that you don't put single quote in your text field.
my question is I need to create a string from the result of event.content. Event.content returns me an entry including html tags. I can use it like container.innerHTML = event.content. I need the event.content as a string. I tried to do something like this:
var a = '' + event.content;
But it doesn't work. Here the result of event.content:
<img src="http://image.weather.com/web/common/wxicons/31/30.gif?12122006" alt="" />Partly Cloudy, and 84 ° F. For more details?
I can't convert this into string in javascript. Is it possible? I also tried String(event.content). Ok I put my whole code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Hava Durumu</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function havabas(){
var feed = new google.feeds.Feed("http://rss.weather.com/weather/rss/local/TUXX0014? cm_ven=LWO&cm_cat=rss&par=LWO_rss");
feed.load(function(result) {
if (!result.error) {
var entry = result.feed.entries[0];
var container = document.getElementById("weather");
var c = entry.content;
var regex = /<img.*?src="(.*?)".*?>.*?([0-9]+\s*°)/;
var results = regex.exec(entry.content);
var html = '<img src= ' + results[1] + ' alt="" /> ' + results[2];
container.innerHTML = html;
}
});
}
function initialize() {
havabas();
setInterval(function(){havabas()},2000);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="weather"></div>
</body>
</html>
Your regex is invalid. It does not match the string from entry.content. The reason for this is °. Change your code to this:
var regex = /<img.*?src="(.*?)".*?>.*?([0-9]+)/;
var results = regex.exec(entry.content);
var html = '<img src= ' + results[1] + ' alt="" /> ' + results[2] + ' °';
DEMO
Probably you forgot to escape either the sigle quotes or double quotes with a backlash? This is a valid string -
var string="<img src=\"http://image.weather.com/web/common/wxicons/31/30.gif?12122006\" alt=\"\" />Partly Cloudy, and 84 ° F. For more details?";
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function get1()
{
var i='<img src="http://image.weather.com/web/common/wxicons/31/30.gif?12122006" alt="" />Partly Cloudy, and 84 ° F. For more details?';
var j='\'' +i+ '\'';
alert(j);
}
</script>
<BODY onload='get1();'>
</BODY>
</HTML>
Please try this
I'm getting an error of "buildXML is not defined" when I run this code:
var c = {
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = buildSurveyXML(survey);
},
buildSurveyXML: function(survey) {
var surveyResults = survey.split("|");
var surveyXML = '';
for (var i=0;i<surveyResults.length;i++){
...
}
return surveyXML;
}
}
And the html that includes this JS and calls the updateConsumer function:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Web Service Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../shared/js/consumerSoap.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
c.insertConsumer("First","Last","55555","name#url.com","76:1139");
});
</script>
</body>
</html>
The problem is that updateConsumer doesn't know anything about buildSurveyXML; that function isn't in the global scope. However, since your function is part of the same object, you can call it using the this keyword.
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = this.buildSurveyXML(survey);
}
Use
var surveyXML = c.buildSurveyXML(survey);