Stuck with the SMSComposer plugin. I have followed all the steps with adding keys to the plugin list and downloading the files. It is the most recent version from github and it has me confused. I understood the old one better. How do I specify toRecipients and body?
function SMSComposer()
{
this.resultCallback = null;
}
SMSComposer.ComposeResultType =
{
Cancelled:0,
Sent:1,
Failed:2,
NotSent:3
}
SMSComposer.prototype.showSMSComposer = function(toRecipients, body)
{
var args = {};
if(toRecipients)
args.toRecipients = toRecipients;
if(body)
args.body = body;
Cordova.exec("SMSComposer.showSMSComposer",args);
}
SMSComposer.prototype.showSMSComposerWithCB = function(cbFunction,toRecipients,body)
{
this.resultCallback = cbFunction;
this.showSMSComposer.apply(this,[toRecipients,body]);
}
SMSComposer.prototype._didFinishWithResult = function(res)
{
this.resultCallback(res);
}
Cordova.addConstructor(function() {
if(!window.plugins) {
window.plugins = {};
}
window.plugins.smsComposer = new SMSComposer();
});
.
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div <center><button onclick="cordova.exec(null,null, 'SMSComposer','showSMSComposer',[args])">Compose SMS</button></center>
>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" charset="utf-8" src="SMSComposer.js"></script>
<script type="text/javascript">
app.initialize();
var args;
// cordova.exec(null,null, 'SMSComposer','showSMSComposer',[args]);
</script>
</body>
</html>
EDIT:
There is no reaction when I press the button. No error message in the console.
try this:
https://github.com/wesson818/SMSPluginForCordova2.3.0
you are able to pass message body and select recipients in Android native message app.
# P A Hemingstam
If you replace "Cordova" with "cordova" in SMSComposer.js file then it will work. :)
Related
my popover doesn't work and I don't know why. It doesn't work when I get the working codes and when I write them. Please help.
Here is the code part that I want to show popover
<p
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
data-bs-trigger="hover"
class="d-inline-block"
>
Service Ports
</p>
Here is my imports.
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
And this is the javascript part.
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
I am not sure whether you have added the full code here or not but as far as what I am seeing, I can say that you are missing the popoverTriggerList declaration var popoverTriggerList = [].slice.call() which might be causing the issue for you or you are not calling the js code from different file the right way. I have tried your code with the declaration and it works. Check the below code for your output:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<p data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" data-bs-trigger="hover" class="d-inline-block">
Service Ports
</p>
I must use localstorage in my phonegap (3.0) app so that I can call the specific number want by the user in each page. In order to do that I use a form and a script like that below. This script work in browser but not with phonegap build. I should have miss something but can't find what!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>local storage</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<style>
#message {
display: none;
border-radius: 10px;
padding: 10px;
background-color: #ff0000;
color: #fff;
}
#storageDemoPage h2 {
white-space: normal;
}
</style>
<script type="text/javascript">
var localStorageKey = "allo";
$('#storageDemoPage').live('pagecreate', function() {
showStoreValue();
$('#addToStorage').click(function(e) {
localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
});
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
<section data-role="header">
<h2>My app</h2>
</section>
<section data-role="content">
<p id="message"/>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Enter your number</li>
<li>
<input type="text" id="entry" name="entry" placeholder="Write digits"/>
<input type="button" id="addToStorage" value="Store value"/>
</li>
<li data-role="list-divider">Value record</li>
<li class="storeItem"/>
</ul>
<div data-role="content">
<p id="audio_position"></p>
<ul id="allRepos" data-role="listview"></ul>
</div>
</section>
</body>
</html>
Edit : add cordova script at the begining
Thanks to #QuickFix and #Chris here is the solution :
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var localStorageKey = "allo";
function onDeviceReady() {
showStoreValue();
$('#addToStorage').click(function(e) {
window.localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
}
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
Here are the possible things you would have missed
a)Cordova script file inclusion in your head tag.
b)Use and listen device ready before using local storage.
Implementing this should solve your issue.
I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.
I am using jquery mobile and html5.
when i redirect from one page to another page , getting a white screen (flickering).
So how to get out of this problem.
Here is my code..
--Page1--
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<link href="css/Global.css" rel="stylesheet" />
<script>
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
$("#login").unbind("click").click(function () {
Login();
});
});
/*********Page bind evnet --Ends--********/
var Type;
var Data;
var Url;
var DataType;
var ContentType;
var ProcessData;
var Method;
jQuery.support.cors = true
function Login() {
Type = "POST";
Url = "/login";
Data = '{}';
DataType = "JSON";
ContentType = "application/json; charset=UTF-8";
ProcessData = true;
CallLoginService();
}
function CallLoginService() {
$.ajax({
type: Type,
data: Data,
dataType: DataType,
processData: ProcessData,
url: Url,
contentType: ContentType,
crossDomain: true,
success: function (jsonObj) {
if (jsonObj.GetLoginResult[0].Status == "true") {
$(location).attr('href', 'City.html');
}
else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
else {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
},
error: function (response) {
CheckNetwork();
}
});
</script>
</head>
<body>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<p style="color:#13a5db;"> Login</p>
</div>
<div data-role="content">
<div id="alertcontainer1" >
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" id="login" data-theme="b">Login</a>
<a data-role="button" href="Registration.html" data-transition="slide" data-theme="b">Register</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> CopyRight ® 2013</p>
</div>
</div>
</body>
</html>
page2--(city.html) second page
<html>
<head>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
//code
});
/*********Page bind evnet --Ends--********/
</head>
<body>
//code
</body>
</html>
I am tryign to implement a random answer on a page loaded via an ajax call. I am using jquery mobile inclusive layout. Therefore I added a simple java script in the div data-roll container and initialized it via $(document).live or $(document).on or $(document).bind, like it should be according to many answers or suggestions here. Everything works fine, when I use a normal alert function. Like this
<script>
$(document).live('pageinit', "#answerPage", function (event) {
alert("Page Initialized");
});
</script>
Also my script works fine, when I add it to a normal html page.
So when I instead using an alert I use function getanswer() it doesn`t work. What do I do wrong here? Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<script>
$(document).on("pageinit", "#answerPage", function(event) {
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"> </div>
</div>
</div>
</body>
</html>
you forgot to call your function getanswer()...
see working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"></div>
</div>
</div>
<script>
$(document).on("pageinit", "#answerPage", function(event) {
getanswer();
});
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
</script>
</body>
</html>