Am trying to create a CRUD operation using phonegap/cordova, and I keep receiving "Uncaught DOMException: An attempt was made to break through the security policy of the user agent. at window.onload - Line 17" pointing to =>"db = window.openDatabase("employee", "1.1", "LearnToProgram", 200000);". This further affects db.transaction Line 25 “Uncaught TypeError: Cannot read property 'transaction' of undefined”, because Database was not created. Do I need any SQLLite plugin on maybe there is something else missing?
<!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>SQLLite DB App</title>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var db;
window.onload=function()
{
document.getElementById('btnSave').addEventListener('click', saveData);
db = window.openDatabase("employees", "1.0", "LearnToProgram", 200000);
}
function saveData(e)
{
db.transaction(saveRecord, onSuccess, onError);
}
function saveRecord(transaction)
{
var name= document.getElementById('name').value;
var email = document.getElementById('email').value;
transaction.executeSql('CREATE TABLE IF NOT EXISTS employeesList (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Email TEXT NOT NULL) ');
var sql= "INSERT INTO employeesList (Name,Email) VALUES ('" + name +"', '" + email + "')";
console.log(sql);
transaction.executeSql(sql);
}
function onSuccess()
{
console.log("Record Saved");
}
function onError(error)
{
console.log("SQL error: " + error.code);
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Database Storage</h1></div>
<div data-role="main" class="ui-content">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="text" id="email" />
<button id="btnSave" type="submit">Save</button>
<button id="showList">Show Employees</button>
</div><!-- main-->
</div><!-- page -->
</body>
</html>
maybe I help you.
To open a database:
var db = null;
document.addEventListener('deviceready', function() {
db = window.sqlitePlugin.openDatabase({
name: 'my.db',
location: 'default',
});
});
IMPORTANT: Like with the other Cordova/phonegap plugins your application must wait for the deviceready event. This is especially tricky in Angular/ngCordova/Ionic controller/factory/service callbacks which may be triggered before the deviceready event is fired.
Related
I want to make an client Windows Application using java script by make my Windows Application as webBrowser1 (same idea of PhoneGap). I write html page that contains SignalR javascript code with necessary src.
This is the code in Windows Application:
webBrowser1.Url = new Uri(#"D:\Signal.html");
This is the src in Signal.html:
<script src="json2.js"></script>
<script src="jquery-1.6.4.js"></script>
<script src="jquery.signalR-2.2.0.js"></script>
<script src="http://localhost:5539/signalr/hubs" type="text/javascript"></script>
Unfortunately it doesn't work!! What is the wrong??
The hole Code of SignalR.html is here
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" placeholder="Message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<div style="background-color:GrayText; height:30%; text-align:center; ">
<h1>Groups</h1>
<input type="text" id="name" placeholder="User Name" />
<input type="text" id="groupName" placeholder="Group Name"/>
<input type="button" id="broadcast" value="Broadcast" />
<input type="button" id="join" value="Join" />
<input type="button" id="leave" value="Leave" />
<input type="button" id="refresh" value="Leave" />
</div>
<script src="json2.js"></script>
<script src="jquery-1.6.4.js"></script>
<script src="jquery.signalR-2.2.0.js"></script>
<script src="http://localhost:5539/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//Set the hubs URL for the connection
$.connection.hub.url = "http://localhost:5539/signalr";
// Declare a proxy to reference the hub.
var chat = $.connection.chatingHub;
var counterh = $.connection.ConnectionCounter;
//counterh.client.NumberOfConnter = function (count) { $("div").append(count); }
chat.client.displayText = function (name, message) {
$('#messages').append('<li>' + name + ' said: ' + message + '</li>');
};
chat.client.le = function (id) { alert(id); }
chat.client.alertJoin = function (namePersonJoined) { $('#messages').append('<li>' + namePersonJoined + " Join to the Group" + '</li>').css("background-color", "white"); }
chat.client.alertLeave = function (namePersonLeaved) { $('#messages').append('<li>' + namePersonLeaved + " Leave from the Group" + '</li>'); }
// Create a function that the hub can call to broadcast messages.
chat.client.addMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
$("#broadcast").click(function () {
chat.server.broadcastMessage({
Name: $('#name').val(),
Message: $('#message').val(), Group: $('#groupName').val()
});
});
$("#join").click(function () {
chat.server.join($('#groupName').val(), $('#name').val());
});
$("#leave").click(function () {
chat.server.leave($('#groupName').val(), $('#name').val());
});
$("#refresh").click(function () {
chat.server.nowID();
});
});
});
</script>
</body>
</html>
I think it's a CORS problem.
Your signalR client is in D:\SignalR.html
Your signalR server is in http://localhost:5539/signalr/hubs
meaning that it is a Cross Origin signalR calls. You need to enable CORS in order to let it works.
Upon submission of a form, I want to push that data to my Firebase db and so I'm creating a function to do so (addMeeting). However, upon pressing the button to submit I get the error:
TypeError: undefined is not a function
at l.$scope.addMeeting (http://localhost:8000/js/controllers/meetings.js:10:12)
meetings.js:10:12 is right where my $push is if you'll look at my code below.
My HTML:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<meta name="viewport" content="width=device-width, userscalable=no">
<link rel="stylesheet" href="css/style.css">
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
<script src="js/controllers/meetings.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
My apps.js:
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
controller: 'RegistrationController',
templateUrl: 'views/login.html'
}).
when('/register', {
controller: 'RegistrationController',
templateUrl: 'views/register.html'
}).
when('/meetings', {
controller: 'MeetingsController',
templateUrl: 'views/meetings.html'
}).
otherwise({
redirectTo: '/login'
});
}])
meetings.js -the Controller containing the addMeeting function that is failing:
myApp.controller('MeetingsController',
function($scope, $firebaseObject) {
var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
var meetings = $firebaseObject(ref);
$scope.meetings = meetings;
$scope.addMeeting = function() {
meetings.$push({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
}); //MeetingsController
The view that is calling that function upon submission of a form:
<section class="meetings cf">
<h1>Add Meetings</h1>
<form class="formgroup addmeeting cf"
name="myform"
ng-submit="addMeeting()"
novalidate>
<div class="inputwrapper">
<input type="text" name="meetingname" placeholder="Meeting Name"
ng-model="meetingname" ng-required="true">
</div>
<button type="submit" class="btn"
ng-disabled="myform.$invalid">+</button>
</form>
<h2>Your Meetings</h2>
<div class="meeting" ng-repeat="meeting in meetings">
<p>{{meeting.name}}</p>
</div>
</section>
**Edit: ** It has something to do with the .push() method itself. I see that in the latest version of angularfire/firebase it should be .push, instead of .$push, ad have changed that but it does not solve my problem. I reverted AngularFire and Firebase to versions 0.8.2 and 1.0.21 respectively, re-introduced the .asObject() and $push, and everything works fine. I don't understand why .push() is failing with all the latest (Firebase 2.2.2, AngularFire 1.0).
Firebase's AngularFire library has two primary types: $firebaseObject and $firebaseArray (instantiated through $asObject and $asArray respectively in pre-1.0 versions of AngularFire).
You're using both the wrong type and the wrong method. To quote AngularFire's documentation on its array type:
Synchronized arrays should be used for any list of objects that will be sorted, iterated, and which have unique IDs. The synchronized array assumes that items are added using $add(), and that they will therefore be keyed using Firebase push IDs.
So:
var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
var meetings = $firebaseArray(ref);
$scope.meetings = meetings;
$scope.addMeeting = function() {
meetings.$add({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
You made a typo, it should be .push instead of $push
CODE
$scope.addMeeting = function() {
meetings.push({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
Reference
I'm self-learning how to create a form, pass the responses to a separate handler, and email them to my website account. I have the form, which works, and oddly enough, I have the mail portion working. However, this example is almost straight out of some ASP.NET help pages at Microsoft - yet it does not work, and I can't seem to find out why. What's wrong and how should it read instead?
Here's some form code:
{
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="Mailform.cshtml" enctype="text/plain"
method="post" name="formcontent">
<ul>
<li>
<label for="name" class="heavyred">Contact Name:  </label>
<input type="text" name="contact" autofocus="true" size="40"
required="" /><span class="tinyfont">  red denotes a
required field</span>
<span class="italicfont"style="margin-left: 22%"><br>Person
overseeing site development</span>
</li>
<li>
<label for="strngweak">List strengths:<br></label>
<textarea name="strngweak" placeholder="420 chars max"
cols="60" rows="7"></textarea>
</li>
</ul>
<div>
<input class="hyper buttn" style="margin-right:1%; font-size: 1em;
"type="submit" value="SUBMIT">
</div>
</form>
</body>
}
handler.cshtml code: (the first two requests end up NULL instead of getting data by name)
{
#{
var contact = Request ["contact"]; <----- NULL instead of name=contact data
var stweak = Request ["strngweak"]; <----- NULL instead of name=strngweak data
var from = "info#portalmagician.com";
var to = "sirrobcop#yahoo.com";
var subject = "I WANT A WEBSITE";
var msg = "From: ";
var errorMessage = "";
var debuggingFlag = true;
msg += contact + " Strengths: " + stweak;
}
{ try-catch block initializes webmail helper and sends email here }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
#if (IsPost) {
if (errorMessage == "") {<p>Your message has been sent!</p>;}
else {<p>Unable to send due server down or bad server info.</p>;}
}
</body>
}
Modify the enctype of your form to application/x-www-form-urlencoded (or delete it).
I have a simple form in meteor which would help configure the execution of my custom application.
This form receives two arguments, Username and Password.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Execute my custom app</title>
</head>
<body>
{{> configDetails}}
</body>
<template name="configDetails">
<div class="container">
<form class="form-signin" role="form" id="form-signin" >
<div class="row">
<div class="span3 offset"><input type="textBox" class="input-block-level" placeholder="User Name" ></div>
<div class="span3 offset1"><input type="textBox" class="input-block-level" placeholder="Password" ></div>
</div>
<input class="btn btn-lg btn-primary" type="submit" style="display: block; width: 100%;" id="submit"/>
</form>
</div>
</template>
Now I want these values to be received on the server side so that I can run my external app using child_process and pass these values as arguments to the external app. How can I receive these value in the meteor server section:
if (Meteor.isServer) {
//I intend to use child_process to run my external application here
}
If the values cannot directly be received in the server section, how can I receive them in client section and pass them onto server. I am having difficulties receiving them in client section as well:
if (Meteor.isClient) {
Template.configDetails.events({
'click input': function () {
console.log( 'Submitting form!' );
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
Template.configDetails.events({
'submit form': function( event ){
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
None of the above functions execute the console.log method. Any ideas what I am doing wrong. Let me know if you need further info.
In my projets I'm using smth like this:
Template.configDetails.events({
"click #submit": function(e, t) {
e.preventDefault();
Meteor.call('someMethod', attributes, function(error, id) {
if (error) {
return console.log("Error..........");
} else {
//Do smth
}
});
});
}
});
I am using MVC 4 Hot towel template, i have solved it MVC way right now, where i have _viewStart.cshtml:
#{
if (User.Identity.IsAuthenticated)
{
Layout = "~/Views/Shared/_Layout.cshtml";
Page.Title = "Home1";
}
else
{
Layout = "~/Views/Shared/_loginLayout.cshtml";
Page.Title = "Home2";
}}
and in the index.cshtml:
#using System.Web
#using System.Web.Optimization
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
var mq = "##-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
#if (#User.Identity.IsAuthenticated)
{
<div id="applicationHost">
#Html.Partial("_splash")
</div>
#Scripts.Render("~/scripts/vendor");
if(HttpContext.Current.IsDebuggingEnabled) {
#Html.AntiForgeryToken()
<script>
window.userId = "#User.Identity.Name";
console.log(window.userId);
</script>
<script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="#Url.Content("~/App/main")"></script>
} else {
<!-- Remember to run the Durandal optimizer.exe to create the main-built.js -->
<script type="text/javascript" src="~/App/main-built.js"></script>
}
}
else
{
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<div id="login">
<p>hello world</p>
</div>
}
Ive created a separate viewmodel user for login:
define(['services/logger'], function (logger) {
var vm = {
activate: activate(),
userName: ko.observable(),
password: ko.observable()
};
return vm;
//#region Internal Methods
function activate() {
logger.log('login View Activated', null, 'login', true);
return true;
}
//#endregion
});
and created login view:
<section>
<h2>My login model without content yet</h2>
</section>
(i know i am not using viewmodel in this view, but its only for test)
How do i do same functionality in Durandal? and is it even possible?
No hate, i am new to Single page application and durandal + breeze.js + knockout.
I would suggest using the built in ASP.net authentication / login mechanisms - ie <authentication> in web.config.
I found https://github.com/jamesc88/Durandal_Serverside_Authentication useful.