I have created a sample ionic project in order to experiment the sqlite database connection with ionic project. But the problem is the search results can be only see via console view. i tried to search through web, a method to display the output within the body of html page between h1 tags
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 = $cordovaSQLite.openDB("my.db");
$cordovaSQLite.excecute(db,"CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
});
})
example.controller("ExampleController", function($scope, $cordovaSQLite) {
$scope.insert = function(firstname, lastname) {
var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
$cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(res) {
console.log("INSERT ID -> " + res.insertId);
}, function (err) {
console.error(err);
});
}
$scope.select = function(lastname) {
var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
$cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
if(res.rows.length > 0) {
console.log("SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
} else {
console.log("No results found");
}
}, function (err) {
console.error(err);
});
}
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<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="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController">
<button class="button" ng-click="insert('NIC','Dgboy')">Insert</button>
<button class="button" ng-click="select('Dgboy')">Select</button>
//i want to dislplay firstname and last name when Select button is clicked
</ion-content>
</ion-pane>
</body>
</html>
Related
Twilio Room was created using the below code, but not able to produce any output, it is showing everything is working fine, but not able to know how can i proceed forward so I can add multiple participants and can make a video call for each other. it asks for the camera and mike permission but not able to see the video. thanks in advance if you see any mistake please ignore it
require_once ./vendor/autoload.php;
use Twilio\Rest\Client;
// use Twilio\TwiML\VoiceResponse;
// Find your Account SID and Auth Token at twilio.com/console
// and set the environment variables. See http://twil.io/secure
$sid = "AC3c0f477f066042308c088574dae7bf9a";
$token = "8c7e575ac24e6e6f924bbaa22c42bbb4";
$twilio = new Client($sid, $token);
$room = $twilio->video->v1->rooms
->create([
"statusCallback" => "http://example.org",
"type" => "peer-to-peer",
"uniqueName" => "DailyStandup227"
]
);
print_r($room);
*After this I generated the access token
<?php
// Get the PHP helper library from https://twilio.com/docs/libraries/php
require_once './vendor/autoload.php';// Loads the library
use Twilio\Jwt\AccessToken;
use Twilio\Jwt\Grants\ChatGrant;
use Twilio\Jwt\Grants\VideoGrant;
// Required for all Twilio access tokens
$twilioAccountSid = 'AC3c0f477f066042308c088574dae7bf9a';
$twilioApiKey = 'SKb30ca8d445b8bd68479c54c2544fa1b4';
$twilioApiSecret = 'ixmFdysnjHRuXgXCTOQwl4I4OIsPa27l';
// Required for Chat grant
$roomName = 'DailyStandup221';
// choose a random username for the connecting user
$identity = "amirIshaque";
// Create an access token, which we will serialize and send to the client
$token = new AccessToken(
$twilioAccountSid,
$twilioApiKey,
$twilioApiSecret,
3600,
$identity
);
// Create Voice grant
$videoGrant = new VideoGrant();
$videoGrant->setRoom($roomName);
// Add grant to token
$token->addGrant($videoGrant);
// render token to string
echo $token->toJWT();
** then by using the above access token and room **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<!-- <link rel="stylesheet" href="./style.css"> -->
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon"> -->
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
<div id="container"></div>
<Response>
<Dial><Conference>DailyStandup18</Conference></Dial>
<Response>
</main>
<!-- <script src="./twilio-video.min.js"></script> -->
<script src="./twilio-video.min.js"></script>
<script>
const Video = Twilio.Video;
console.log('$TOKEN',Video);
Video.connect('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTS2IzMGNhOGQ0NDViOGJkNjg0NzljNTRjMjU0NGZhMWI0LTE2NjY0NDcyMDMiLCJpc3MiOiJTS2IzMGNhOGQ0NDViOGJkNjg0NzljNTRjMjU0NGZhMWI0Iiwic3ViIjoiQUMzYzBmNDc3ZjA2NjA0MjMwOGMwODg1NzRkYWU3YmY5YSIsImV4cCI6MTY2NjQ1MDgwMywiZ3JhbnRzIjp7ImlkZW50aXR5IjoiYW1pcklzaGFxdWUiLCJ2aWRlbyI6eyJyb29tIjoiRGFpbHlTdGFuZHVwMjIxIn19fQ.f-yld_8HU_HX6f1NVuwxSOIq3KEcuh6sWWhms6bar14', { name: 'DailyStandup227' }).then(room => {
console.log(room);
console.log('Connected to Room "%s"', room.name);
console.log(room.participants);
room.participants.forEach(participantConnected);
room.on('participantConnected', participantConnected);
room.on('participantDisconnected', participantDisconnected);
room.once('disconnected', error => room.participants.forEach(participantDisconnected));
alert('5');
});
// Twilio.Video
// .createLocalVideoTrack()
// .then(track => {
// const container = document.getElementById('container');
// container.appendChild(track.attach());
// });
function participantConnected(participant) {
console.log('Participant "%s" connected', participant.identity);
alert('1');
const div = document.createElement('div');
div.id = participant.sid;
div.innerText = participant.identity;
participant.on('trackSubscribed', track => trackSubscribed(div, track));
participant.on('trackUnsubscribed', trackUnsubscribed);
participant.tracks.forEach(publication => {
if (publication.isSubscribed) {
trackSubscribed(div, publication.track);
}
});
document.body.appendChild(div);
}
function participantDisconnected(participant) {
alert('2');
console.log('Participant "%s" disconnected', participant.identity);
document.getElementById(participant.sid).remove();
}
function trackSubscribed(div, track) {
alert('3');
div.appendChild(track.attach());
}
function trackUnsubscribed(track) {
alert('4');
track.detach().forEach(element => element.remove());
}
</script>
<!-- <script src="index.js"></script> -->
</body>
</html>
I am trying to output all the data from my Firebase Database to a blank webpage. I currently have it printing out in the chrome console using the code below.
ref.on("value", function(snapshot) {
console.log(snapshot.val());
}, function (error) {
console.log("Error: " + error.code);
});
Instead of it printing to the console I want it to print to the actual webpage itself. Struggling since there is not much documentation around Firebase itself.
Here is my entire code for the near blank html page im trying to output the Firebase database data to. I have also included a picture of the structure of my Firebase database.Here
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src = "https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js">
</script>
<script src = "https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js">
</script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-database.js">
</script>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/membrain.ico">
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
const config = {
.........
};
firebase.initializeApp(config);
</script>
</head>
<body>
<h1>Firebase Database</h1>
<script>
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
console.log(snapshot.val());
}, function (error) {
console.log("Error: " + error.code);
});
</script>
</body>
</html>
I have a requirement that i need to send form data with window.open(). am going to integrate PayU money to Ionic and AngularJS application at that scenario i need to send some form data from window.ope() using InAppBrowser Cordova plugin but am not able to send form data.
following code written in my app.js
var example = angular.module('starter', ['ionic', 'ngSanitize']);
example.run(function($ionicPlatform, $timeout) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
example.controller("ExampleController", ['$scope', '$interval', function($scope, $interval) {
$scope.myHTML = 'Check out my programming blog while you are here';
$scope.testmethod = function() {
onDeviceReadyEWEWE();
}
}]);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
var winName = 'MyWindow';
//var winURL='https://test.payu.in/_payment.php';
var winURL = 'https://test.payu.in/_payment';
// var winURL='https://test.payu.in/merchant/postservice.php?form=2';
var windowoption = 'resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
//var params = { 'param1' : '1','param2' :'2'};
var params = {
'key': 'gtKFFx',
'txnid': 'mdd0sss9023',
'amount': '100',
'productinfo': 'oxygenconcentrator',
'firstname': 'test',
'email': 'test#gmail.com',
'phone': '9000024100',
'surl': 'https://payu.herokuapp.com/success',
/* 'Furl' :'https://www.payumoney.com/mobileapp/payumoney/failure.php', */
'Furl': 'https://payu.herokuapp.com/failure',
'Hash': '9feaefa45b5b68c7091f7f1ff513183f3fca5b23b47d47d760c285c8ad2d5f9fd1ec9514f2bad5d3672b6cb9138af5dd5350a5cf1e87c6f20ca26817ee02ae77'
};
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", winURL);
form.setAttribute("target", winName);
for (var i in params) {
if (params.hasOwnProperty(i)) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = i;
input.value = params[i];
form.appendChild(input);
}
}
document.body.appendChild(form);
// window.open('', winName,windowoption);
form.target = winName;
console.log(form.action);
form.submit();
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadError(event) {
alert(event.type + ' - ' + event.message);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
function onDeviceReadyEWEWE() {
//form.submit();
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes',
closebuttoncaption: 'DONE?'
};
iabRef = window.open('https://test.payu.in/_payment', '_blank', options);
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.addEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
}
and in my 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>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController">
Testing
<p ng-bind-html="myHTML"></p>
<button ng-click="testmethod()">button</button>
</ion-content>
</ion-pane>
</body>
</html>
so please help me out how to send form data with URL in window.open();
After Edit:
finally Integrated Inappbrowser to My Ionic app and cracked a solution.please find the URL for PayU Money Integration for Hybrid appsPayUmoneyIntegartion
I have project write with Ionic Framework and AngularJS.
His task is to download files from the URL, type as http://www.uzhnu.edu.ua/uk/infocentre/get/6500
The problem is that the examples of "how to download the file and give it a name" is only if the path to URL line have his name .
The name of my file does not have this name in url. It is in the headers of http request, here is screen made with POSTMAN, but how to get it and put in a variable TargetPath, I do not know. Can anyone suggest something?
Here is code of
FileTransferController.js:
app.controller('MyCtrl', function($scope, $cordovaFile, $cordovaDialogs, $window, $ionicLoading,$ionicPopup, $timeout, $cordovaFileTransfer) {
$scope.id = '6500';
$scope.downloadFile = function() {
$ionicLoading.show({template: 'Download file...'});
var url = "http://www.uzhnu.edu.ua/uk/infocentre/get/"+$scope.id;
var filename = $scope.id+".doc";
alert(filename);
var targetPath = "/storage/sdcard0/documents/" + filename;
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(entry) {
// Success!
$ionicLoading.hide();
console.log('download complete: ' + entry.toURL());
alert('File download: ' + targetPath);
}, function(error) {
$ionicLoading.hide();
// An error occured. Show a message to the user
alert('Sorry');
alert(JSON.stringify(error));
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
false,
{
headers: {
"Content-Disposition": ""
},
});
};
});
app.js:
var app = angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
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">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- ng-cordova -->
<script src="js/ng-cordova.js"></script>
<script src="js/ng-cordova.js"></script>
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/FileTransferController.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MyCtrl">
<button class="button-positive" ng-click="downloadFile()">Download File</button>
</ion-content>
</ion-pane>
</body>
</html>
P.S. Code work only on real device. And must download all plugins:
ionic plugin add cordova-plugin-file
ionic plugin add cordova-plugin-file-transfer
and in folder "js" add file "ng-cordova.js" and "ng-cordova.min.js". DOwnload they can with:
bower install ngCordova
YES! Finally I did it!If someone will need a code, her ir is:
$scope.downloadFile = function() {
var url = "http://example.com/page";
$ionicLoading.show({template: 'Download file...'});
$http.get(url).
success(function (data, status, headers) {
var head = headers('Content-Disposition');
var filename = head.substr(head.lastIndexOf('=')+1);
alert(filename);
var targetPath = "/storage/sdcard0/documents/" + filename;
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(entry) {
$ionicLoading.hide();
console.log('download complete: ' + entry.toURL());
alert('File download: ' + targetPath);
}, function(error) {
$ionicLoading.hide();
console.log('headers: ' + headers('Cache-Control'));
// An error occured. Show a message to the user
alert('Sorry');
alert(JSON.stringify(error));
})
alert(head1);
$ionicLoading.hide();
$scope.$broadcast('scroll.refreshComplete');
return(JSON.stringify(head1))
})
.error(function (status) {
alert(status);
$ionicLoading.hide();
$scope.$broadcast('scroll.refreshComplete');
});
};
i recently found a script that uses cleverbot's api. i'm able to get a response when i enter a variable in the ask() function, but how can i make it so that a user can communicate with cleverbot by entering a value in an input box?
also, cleverbot's api only prints responses into the console.log() so i had to use the code at the bottom to transcribe the entries into the .console div:
$(document).ready(function() {
var bot = new cleverbot("BIsKhtIhZdmgbOPp", "DwikyXztHk6GEG7LcvHCKfObCxYduTMP");
bot.setNick("sessionname")
bot.create(function (err, session) {
// session is your session name, it will either be as you set it previously, or cleverbot.io will generate one for you
// Woo, you initialized cleverbot.io. Insert further code here
});
$('#clever').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
var input = value;
if (value == input) {
document.getElementById("input").innerHTML =
'<p>> ' + bot.ask(input, function (err, response) {
console.log(input);
console.log(response);
}); + '</p>';
}
}
});
if (typeof console != "undefined")
if (typeof console.log != 'undefined')
console.olog = console.log;
else
console.olog = function() {};
console.log = function(message) {
console.olog(message);
$('.console').append('<br>' + '<p>> ' + message + '</p>');
};
console.error = console.debug = console.info = console.log
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://unilogue.github.io/css/style.css">
<script type="text/javascript" src="https://unilogue.github.io/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://unilogue.github.io/js/cleverbot/cleverbot.io.js"></script>
</head>
<body>
<div class="console" style="width:75%;"></div>
<div id="input"></div>
<p>> </p><input id="clever" type="text" placeholder="say something clever." />
</body>
</html>
i updated the snippet and added an if... statement to enable dialogue.
$(document).ready(function() {
var bot = new cleverbot("BIsKhtIhZdmgbOPp", "DwikyXztHk6GEG7LcvHCKfObCxYduTMP");
bot.setNick("sessionname")
bot.create(function (err, session) {
// session is your session name, it will either be as you set it previously, or cleverbot.io will generate one for you
// Woo, you initialized cleverbot.io. Insert further code here
});
$('#clever').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
var input = value;
if (value == input) {
document.getElementById("input").innerHTML =
bot.ask(input, function (err, response) {
console.log('me > ' + input);
console.log('cb > ' + response); // Will likely be: "Living in a lonely world"
});
$(this).val('');
}
}
});
$('html').keydown(function(e) {
if (e.which == 118) {
window.open('/', '_self');
}
});
if (typeof console != "undefined")
if (typeof console.log != 'undefined')
console.olog = console.log;
else
console.olog = function() {};
console.log = function(message) {
console.olog(message);
$('.console').append('<br>' + '<p>' + message + '</p>');
};
console.error = console.debug = console.info = console.log
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://unilogue.github.io/css/style.css">
<script type="text/javascript" src="https://unilogue.github.io/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://unilogue.github.io/js/cleverbot/cleverbot.io.js"></script>
</head>
<body>
<div class="console"><div id="input" style="display:none;"></div></div>
<p>me > </p><input id="clever" type="text" placeholder="say something clever." spellcheck="false" />
</body>
</html>