New to Phonegap and having a hard time understanding the FileWriter function. I am trying to get this example to work on iOS6 but I'm stuck with the error message
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
var fileWriter;
function onNotesLoad() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSComplete, fail);
}
function onFSComplete(fileSystem) {
// Load the notes.txt file, create it if it doesn't exist
fileSystem.root.getFile("notes.txt", {create: true}, onFileEntryComplete, fail);
}
function onFileEntryComplete(fileEntry) {
// set up the fileWriter
fileEntry.createWriter(onFileWriterComplete, fail);
}
function onFileWriterComplete(fileWriter) {
// store the fileWriter in a
// global variable so we have it
// when the user presses save
fileWriter = fileWriter;
}
function saveNotes() {
// make sure the fileWriter is set
if (fileWriter != null) {
// create an oncomplete write function
// that will redirect the user
fileWriter.onwrite = function(evt) {
alert("Saved successfully");
$.mobile.changePage("index.html");
};
var form = document.getElementsByTagName('form')[0].elements;
var notes = form.notes.value;
// save the notes
fileWriter.write(notes);
} else {
alert("There was an error trying to save the file");
}
return false;
}
function fail(error) {
alert(error.code);
}
</script>
HTML:
<body>
<div data-role="page" id="notes-page">
<div data-role="header" data-position="inline">
Cancel
<h1>Your Thoughts?</h1>
<a onClick="return saveNotes()" href="#"
data-icon="check" data-theme="b">Save</a>
</div>
<form action="index.html" method="post">
<textarea name="notes" rows="30" cols="10"></textarea>
</form>
</div>
</body>
The onwrite handler is called as a progress event. I believe you will want to hook to the onwriteend handler.
Related
I have a page called PayOut.cshtml. On this page, I have a button called Pay, which opens a new small window called Authenticate.cshtml for a user to authenticate himself by specifying his email and password.
Once a user has been authenticated, the the Authenticate.cshtml should be dismissed, and showing a button called Confirm in the PayOut.cshtml page.
I have tried the following:
public AuthenticateController(Authenticate obj)
{
var success = false;
if (auth) {
success = true;
}
return View("close");
}
View for close:
<body>
<script type="text/javascript">
window.close();
</script>
</body>
How can I dismiss the the authenticate view and show a button in the PayOut view by using session ? Please help.
You can use "postMessage", in the main window use something like this:
<!DOCTYPE html>
<html>
<header>
<title>PostMessage Demo</title>
</header>
<body>
<button id="btn" onclick="openPopup();">Open Popup</button>
<script>
window.addEventListener("message", onMessage, false);
function onMessage(event){
document.getElementById("btn").innerText = "you typed " + event.data;
document.getElementById("btn").disabled = false;
};
function openPopup(){
document.getElementById("btn").textContent = "popup active";
document.getElementById("btn").disabled = true;
window.open("/popup", "popup window");
}
</script>
</body>
</html>
Then in the popup window this:
<!DOCTYPE html>
<html>
<header>
<title>Popup</title>
</header>
<body>
<input id="textEdit" type="text" value=""></input>
<button onclick="_close();">Close popup</button>
<script>
function _close(){
let pUri = window.location.protocol + "//" + window.location.host + "/";
window.opener.postMessage(document.getElementById("textEdit").value, pUri);
window.close();
}
</script>
</body>
</html>
When you click the "Close popup" button in the popup window it will close and trigger the onMessage event in the main window with the text you typed in the "textEdit" input.
For security reasons, the specs actually don't allow this. Although, I just tested this with Edge, Chrome, Firefox, and IE and it worked. Could you clarify how it didn't work?
Anyway, I decided to try another method that doesn't involve a window trying to close itself and it worked in the same four browsers.
In Payout.cshtml
var newWindow;
function authenticate() {
newWindow = window.open("#Url.Action("Authenticate")");
window.setTimeout(tryCloseWindow, 5000);
}
function tryCloseWindow() {
try {
if (newWindow.closeMe == undefined) {
window.setTimeout(tryCloseWindow, 1000);
return;
}
} catch(ex) {
// window was closed by user
return;
}
newWindow.close();
}
Authenticate.cshtml
<button onclick="pay();">pay</button>
#section Scripts
{
<script>
function pay() {
window.location = "#Url.Action("Close")";
}
</script>
}
Close.cshtml
#section Scripts
{
<script>
window.closeMe = true;
</script>
}
In TFS it is possible to get build historical data on start screen. So when you log into TFS you immediately see the status of your builds. Can the same be achieved for displaying Code Coverage? This is something that SonarCube definitely does nicely.
There isn’t the feature of include Code Coverage result in start screen. But you can custom dashboard widget with test REST API to achieve that.
A simple sample to custom dashboard:
<!DOCTYPE html>
<html>
<head>
<title>Custom widget</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles:true
});
VSS.require(["TFS/Dashboards/WidgetHelpers","TFS/TestManagement/RestClient"], function (WidgetHelpers,TFS_Test_WebApi) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("WidgetStarain", function () {
var projectId = VSS.getWebContext().project.id;
var getCodeCoverage = function (widgetSettings) {
return TFS_Test_WebApi.getClient().getBuildCodeCoverage(projectId, 252)
.then(function (buildCoverage) {
var $codeCoverageResult = $('div.codeCoverage');
var $codeCoverageObject = buildCoverage.coverageData[0].coverageStats;
var $detailResult = $codeCoverageObject[0].label + ": Total:" + $codeCoverageObject[0].total + ";covered:" + $codeCoverageObject[0].covered;
$codeCoverageResult.text($detailResult);
//$codeCoverageResult.text(JSON.stringify(buildCoverage))
return WidgetHelpers.WidgetStatusHelper.Success();
}, function (error) {
return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
});
}
return {
load: function (widgetSettings) {
var $title = $('h2.title');
$title.text('starain widget custom');
return getCodeCoverage(widgetSettings);
}
}
//return {
// load: function (widgetSettings) {
// var $title = $('h2.title');
// $title.text('starain widget custom');
// return WidgetHelpers.WidgetStatusHelper.Success();
// }
//}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title">widgets starain</h2>
<div class="codeCoverage">non code coverage</div>
</div>
</body>
</html>
After that, you can add that widget to the dashboard and check code coverage.
I am developing an Phonegap (3.3.0) + Jquery Mobile (1.4) app.
I get an infinite loading page (white page with ui-loader icon). This is erratic and sometimes the app starts well.
I see a very strange bug: none of the first "console.logs" I use in my js file are displayed in the Phonegap Build Weinre debug console.
Only after a certain line (which contain by the way the first asynchronous function) the console.log are displayed in the Weinre console.
So I guess I have a binding order problem related to Jquery Mobile and Phonegap, but I can't find what's wrong in my initialization.
Can I be also due to the order in which I call js files in my index.html ?
I followed this post to register Phonegap and JQM : Correct way of using JQuery-Mobile/Phonegap together?
recommended here : jQuery Mobile : What is the order of page events triggering?
by #Gajotres.
Can you help ?
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- SPLASH PAGE -->
<div id="splash-page" data-role="page">
<div class='toastenjs' style='display:none'></div>
<center id="splashLogoCenter">
<img src="images/splash.png" width="200" />
</center>
</div>
<!-- WELCOME PAGE -->
<div id="welcome-page" data-role="page">
...
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.jsonp-2.4.0.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/functionCUgly.js"></script>
<script src="js/boardDims.js"></script>
<script src="phonegap.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<!--POUCHDB -->
<script src="js/pouchdb-2.2.3.min.js"></script>
<!-- Flexslider-->
<!-- <script src="js/flexslider-v2.js"></script>--> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm -->
<script src="js/flexsliderV2.3.js"></script>
<!-- iScroll-->
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="application/javascript" src="js/jquery.mobile.iscrollview.js"></script>
<!-- Add2home : create a shortcut icon of the wep app on the phone homescreen -->
<script type="application/javascript" src="js/add2home.js"></script>
<script src="js/GoogleLogin.js"></script> <!--Phonegap module by eric valenzia https://github.com/valenzia10/PhonegapGoogleLogin-->
<script src="js/jquery.ddslick.min.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/html2canvas.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
if (typeof(google) != 'undefined'){
google.load('visualization', '1.0', {'packages':['corechart']});
}
</script>
JS file:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
$(document).one("mobileinit", function () {
console.log('mobileinit just fired'); //this one is not displayed in the weinre console
jqmReadyDeferred.resolve();
});
if ( isPhoneGap() ) {
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
deviceReadyDeferred.resolve();
}
$.when(deviceReadyDeferred, jqmReadyDeferred).then( EVERYTHING() ); // !!!!! normalement il faut virer ces parenthèses pour respecter le $.when....mais ça fait tout bugger !!!!!!!!!
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).then( EVERYTHING );
}
function EVERYTHING() {
console.log("on est entré dans EVERYTHING()"); //not displayed in the weinre console
insideEVERYTHING = 1;
console.log("jqmReadyDeferred is "+jqmReadyDeferred.state()); //not displayed in the weinre console
console.log("deviceReadyDeferred is "+deviceReadyDeferred.state()); //not displayed in the weinre console
//FOR EVERY PAGE
$(document).on('pagecontainershow', function (e, ui) {
//...
});
$(document).on('pagecontainershow', function (e, ui) {
//...
});
// --------------- SPLASH PAGE ---------------------
//$(document).on('pagecreate','#splash-page', function(){
$(document).on('pagecontainershow', function (e, ui) {
var activePageId = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
if (activePageId === 'splash-page') {
console.log("we are in splash-page");
if (typeof debugOptionUseLocalDB != 'undefined' && debugOptionUseLocalDB) {
fallbackToLocalDBfile();
console.log('on yess');
}else{
if(connectionStatus == 'online'){
console.log("launching getJsonpFile...");
//DEBUG TIMER
var time=[];
var dummy;
dummy = new Date().getTime();
time.push(dummy);
getJsonpFile(dbUrl())
.done(function(data) {
console.log("...getJsonpFile done.");
if(localStorage) {
if ( isPhoneGap() || !isIOS() ) { //BUG iOS safari doesn't work with this (Cf. Philippe's ipad), si on est sur phonegap ok, si on n'est pas sur phonegap et pas sur iOS ok
localStorage.setItem("proDB", JSON.stringify(data)); //write to localStorage
}
}
//...JQM bindings are continued below
The best registration is the following :
var isPhoneGap;
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
isPhoneGap = checkIfPhoneGap();
if ( isPhoneGap ) {
$.when(deviceReadyDeferred, jqmReadyDeferred).done( Everything );
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).done( Everything );
}
$(document).on("mobileinit", function () {
//alert('mobileinit just fired');
//popShortToast("mobileinit just fired");
jqmReadyDeferred.resolve();
});
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
//popShortToast("deviceReady just fired");
deviceReadyDeferred.resolve();
}
function checkIfPhoneGap() {
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
if ( app ) {
return true;
} else {
return false;
}
}
function Everything() {
//enter your JQM bindings here, and use Phonegap's features
}
I'm implementing LinkedIn Login into my web app..
I'm using following script as :
<script type="in/Login"> </script>
to load the LinkedIn Sign In button. This script automatically loads a LinkedIn Sign in button with fix design or image..
but I want to Customize a button with my custom Image of LinkedIn and this button should generate the LinkedIn login event after clicking on it.. that is it should serve above script's purpose
Plz Help
Other way to do this:
Place an image that you like:
<img onclick="liAuth()" src="./img/widget_signin.png">
Create JS function like this:
function liAuth(){
IN.User.authorize(function(){
callback();
});
}
Use LinkedIn user data:
IN.API.Profile("me")
.fields("firstName", "lastName", "headline")
.result(resultFunction);
Yes, it's possible. We're using jQuery, so here is our solution:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: apikey
onLoad: onLinkedInLoad authorize: true
</script>
<script type="text/javascript">
function onLinkedInLoad() { // Use a larger login icon.
$('a[id*=li_ui_li_gen_]').css({marginBottom:'20px'})
.html('<img src="/images/shared/linkedin-register-large.png" height="31" width="200" border="0" />');
}
</script>
Under the head tag
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: xxxxxxxxx
authorize: true
// onLoad: onLinkedInLoad
//scope: r_basicprofile r_emailaddress
</script>
<a href="javascript:void(0)" class="btn btn-default btn-linkedin" onclick='call_linkedin()'>
<i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Sign In With LinkedIn</span> </a>
<script type="text/javascript">
function call_linkedin() {
if(IN.User.authorize()){
getProfileData();
}else{ IN.Event.on(IN, "auth", function() {getProfileData();});}
}
// Use the API call wrapper to request the member's profile data
function getProfileData() {
IN.API.Profile( "me" ).fields( "id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address" ).result( displayProfileData ).error( onError );
}
// Handle the successful return from the API call
function displayProfileData( data ) {
console.log(data)
}
</script>
Please try this and let me know
You can use your own custom html code like this:
<html>
<head>
<title>LinkedIn JavaScript API</title>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: put_your_api_key_here
</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.UI.Authorize().place();
IN.Event.on(IN, "auth", function () { onLogin(); });
IN.Event.on(IN, "logout", function () { onLogout(); });
}
function onLogin() {
IN.API.Profile("me").result(displayResult);
}
function displayResult(profiles) {
member = profiles.values[0];
alert(member.id + " Hello " + member.firstName + " " + member.lastName);
}
</script>
</head>
<body>
<input type="button" onclick="onLinkedInLoad()" value="Sign in using LinkedIn account" />
</body>
</html>
method for custom linkedin button
<div onclick="liAuth()">sign in with linkedin</div>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: YOUR_API_KEY_HERE
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
function liAuth(){
IN.User.authorize(function(){
});
}
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
**LinkedIn Customize button onclick function you can call linked in login function**
<!-- language: lang-html -->
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: Your App Key //add your linkedIn aap key here
authorize: true
</script>
//create your customized linkedIn button with css
<div id="wLinkedIn">
// use onLinkedInLoad onclick function in customized button
<a href="#" onclick="onLinkedInLoad();">
<span id="icon-bg"><i class="fa fa-linkedin"></i></span>
<span id="icon-label-bg">Login with LinkedIn</span>
</a>
</div>
<!-- language: lang-js -->
// ----------------------------LinkedIn Sdk---------------------
function onLinkedInLoad() {
IN.UI.Authorize().place();
// call onLinkedInLogin on click of button
IN.Event.on(IN, "auth", function () { onLinkedInLogin(); });
//IN.Event.on(IN, "logout", function () { onLinkedInLogout(); });
}
function onLinkedInLogin() {
//alert('logged in');
//get all user data from linked in plugin
IN.API.Raw("/people/~:(id,firstName,lastName,emailAddress)format=json").result(function (data)
{
console.log(data);
var profileData = data;
LinkedInFName = profileData.firstName;
LinkedInLName = profileData.lastName;
LinkedInEmail = profileData.emailAddress;
LinkedInId = profileData.id;
//alert("LinkedInFName : " + LinkedInFName);
GetLinkedinLoginDetails(LinkedInEmail, LinkedInId)
}).error(function (error) {
console.log('Error : ' + error);
});
}
function onSuccess(data) {
}
While their are plenty of posts regarding reloading a jQueryUI tab via the load method, I can't seem to make it work in 1.9+. I wish I could see a way to show this in a fiddle, but as I don't... note that the refresh button/function works every time in the following nested tabs set-up under 1.8+ but works only once under 1.9+, and fails after that. In context, (loading dynamic content via php under wordpress) it doesn't work at all. According to the ajaxStart()ajaxStop() function calls, an ajax call is made every time the refresh button is clicked, however the content (watch the date/time under tab E or tab A/sub parent E) is only reloaded on the first click of the #refresh button, which fails to re-load the tab content on subsequent clicks.
stye.css
div.clear { clear:both; }
#refresh { position: relative; top:-40px; left:300px; }
#loading
{ display:none;
position: absolute;
top:100px;
left:300px;
font-size: 200%;
z-index:1001;
border:3px solid green;
background:#ffffff;
}
tabs.js
jQuery(function()
{ set_tabs();
jQuery('body').on("click", "#refresh", function()
{ jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs({ cache:true }); }
index.html
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="tabs.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
<div id="parentTabSet" class="tabset">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<input type='button' id='refresh' value='refresh' />
<div id='loading'>Loading...</div>
<div id="A" class="tabset">
<ul>
<li>A_1</li>
<li>A_2</li>
<li>parent E</li>
</ul>
<div id="A_1"><p>A_1 - FOO</p></div>
<div id="A_2"><p>A_2 - BAR</p></div>
</div>
<div id="B"><p>Div B</p></div>
<div id="C"><p>Div C</p></div>
<div id="D"><p>Div D</p></div>
</div>
tabs_e.html
<script>
jQuery( function()
{ set_tabs();
var d = new Date();
jQuery('#E_1 p').text(d);
jQuery('#E_2 p').text(d);
});
</script>
<div class="tabset">
<ul>
<li>E_1</li>
<li>E_2</li>
</ul>
<div id="E_1"><p>E_1 - BAR</p></div>
<div id="E_2" class='clear'><p>E_2 - BAZ</p></div>
</div>
The .live() function has been deprecated for a while now, and support is completely gone in jQuery 1.9+. Use this:
$(document).on("click", "#refresh", function() {
// your current "live" code
});
So it turns out that not only has the cache option been deprecated in 1.9+ it's legacy behavior has been altered such that (if used) the load method will not reload the tab content.
The approach I've come up with is -- I think -- an abomination which I'm hoping some one might provide a cleaner alternative to. (oh pleeeaazzz!) Anyway, FWIW... here's what I came up with.
tabs.js (revisited)
jQuery(function()
{ set_tabs();
jQuery(document).on("click", "#refresh", function()
{ refresh = {};
refresh.tab = true;
jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs(
{ beforeLoad: function( event, ui)
{ if(typeof refresh.tab =='undefined')
{ if ( ui.tab.data( "loaded" ))
{ event.preventDefault();
return;
}
ui.jqXHR.success(function() { ui.tab.data( "loaded", true );});
} else refresh={};
}
});
}