Im running into a really weird error in 3.4 Phonegap/Cordova.
I have tested the service call through fiddler on the web as well as used WEINRE.
Over the browser it runs without any errors, when compiled to run on build.phonegap.com it hangs up on the first service.
The html
<!-- Page 1 -->
<div data-role="page" id="keyword" class="page">
<div class="bg"></div>
<div class="page-wrapper">
<div class="logo"><img src="images/logo.png" alt="" width="325" height="105"/></div>
<div class="text1">Enter Code</div>
<div class="input">
<input type="text" name="keyword" placeholder="code" id="keyword-value" />
</div>
<div class="button" id="keyword-submit" >Submit</div>
<div class="text2">
If you do not have a<br>
code, click continue
</div>
<div class="button" id="keyword-continue">Continue</div>
</div>
Im running into issues when running the keyword-submit function, it doesn't navigate through it though it does in the browser.
app.js
$("#keyword").live("pageinit",
function()
{
$("#keyword-continue").click(
function()
{
$.mobile.changePage("#zip-code");
});
$("#keyword-submit").click(
function()
{
alert("Entered Keyword Submit");
var keyword = $("#keyword-value").val();
if($.trim(keyword) == '')
{
navigator.notification.alert('Please Enter code');
return false;
}
service.getListByKeyword(keyword,
function(response)
{
$.mobile.showPageLoadingMsg("loading");
var check = JSON.parse(response).responsecollection.Response.rss.rs;
if(check.isvalid == 0)
{
if (check.msg!=null)
{
navigator.notification.alert(check.msg);
$.mobile.hidePageLoadingMsg();
}
}
else
{
window.localStorage.setItem("email",check.email);
alert("storing email");
service.resellerId = check.rsid;
localStorage.resellerId = service.resellerId;
alert("set reseller Id");
service.getResellerSetting(
function(response)
{
alert("entered merchant");
service.resellerEmail = JSON.parse(response).responsecollection.Response.rts.rt.mlid;
localStorage.resellerEmail = service.resellerEmail;
var telefloraStatus = JSON.parse(response).responsecollection.Response.rts.rt.UseTeleflora;
window.localStorage.setItem("floraStatus",floraStatus);
});
alert("Navigating to new page");
$.mobile.changePage("#keyword-list?keyword="+keyword);
//window.open("#keyword-list?keyword="+keyword,keywordPage);
}
});
alert();
$.mobile.hidePageLoadingMsg();
});
});
I have set up alerts to see where its navigating in the browser and getting caught in the mobile side.
Last set of code is the index.js
getListByKeyword: function (keyword, result) {
service.sendRequest("Reseller", "IsValid", function(args) {
args.rscode = keyword;
}, result);
alert("Inside the service call *END*");
}
I really cant seem to wrap my head around why it would work in the broswer and not on the android build.
//please follow these steps to check your phonegap project is ready to perform action or not.
//1)include cordova js or phonegap file reference
<script type="text/javascript" src="cordova.js"></script>
//2)check phonegap is ready or not
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert('ready');
}
</script>
after that perform any action
Related
I saw the code snippets at Google reCaptcha within SweetAlert modal window , particularly the one without the jquery (the 1st answer)
But that solution makes the captcha box visible.
How do i make it invisible within Sweetalert? I will do a server backend validation
I looked at https://github.com/prathameshsawant7/multiple-invisible-recaptcha and included the entire code from init_recaptcha.js along with the "onOpen" feature of SWAL... but no luck. The captcha is not set in the form.
Any help will be appreciated> I need the invisible captcha as I will triggering several SWAL forms within the HTML tag of the sweetalert (needed for multiple inputs at time)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cover.css">
<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>
<script src="js/sweetalert2#10.js"></script>
<script>
$(document).ready(function() {
$(document).on('click', '#comment_button', function(e) {
e.preventDefault();
//var M_user = "";
Swal.fire({
title: 'Add a comment to the page',
titleText: 'Add a comment to the page',
//included dynamically... :-)
width: '75%',
position: 'center',
showCancelButton: true,
showConfirmButton: false,
showCloseButton: true;
allowOutsideClick: false,
focusConfirm: false,
//grow: 'fullscreen',
allowEscapeKey: true,
html: '<div class="card"><form name="form2" id="form2" method="post" action="process3.php"><div class="form-group"><label for="InputText2">Enter Text (Recaptcha 2)</label><input type="text" class="form-control" id="text2" name="textmsg" placeholder="Enter random text" value="this_is_textmsg"></div><div class="form-group"><label for="InputText3">Enter Text :</label><input type="text" class="form-control" id="textv3" name="textmsg3" placeholder="Enter random text" value="this_is_textmsg3"></div><div id="recaptcha-form-2" style="display:none;"></div><input type="button" class="btn btn-primary" onclick="formSubmit(\'2\')" value="Submit" /></form></div>',
footer: 'We reserve the right to moderate your comments if we feel the need.',
onOpen: function() {
console.log('setting initial values, if any on onOpen');
/***
* #Created by: Prathamesh Sawant (prathameshsandeepsawant#gmail.com)
* #Date : 24/07/2017
* #description To handle Multiple Google Invisible reCaptcha Implementation
*/
/**************************************************************************\
* Step 1 - Initialize reCaptcha Site Key and Widget eg: widget_1 for Form 1
* Step 2 - In init function add code to create form submit callback action.
* Step 3 - Call renderInvisibleReCaptcha function by passing reCaptcha ID
* and createCallbackFn Response.
***************************************************************************/
"use strict";
var PS = PS || {};
var widget_1;
var widget_2;
var widget_3;
var recaptcha_site_key = 'my Real Site Key Goes here....removed for stackoverflow';
if (typeof PS.RECAPTCHA === 'undefined') {
(function(a, $) {
var retryTime = 300;
var x = {
init: function() {
if (typeof grecaptcha != 'undefined') {
//For Form 1 Initialization
if ($('#form1 #recaptcha-form-1').length > 0) {
var callbackFn = {
action: function() {
saveData('1'); //Here Callback Function
}
}
/*--- 'recaptcha-form-1' - reCaptcha div ID | 'form1' - Form ID ---*/
widget_1 = x.renderInvisibleReCaptcha('recaptcha-form-1', x.createCallbackFn(widget_1, 'form1', callbackFn));
}
//For Form 2 Initialization
if ($('#form2 #recaptcha-form-2').length > 0) {
var callbackFn = {
action: function() {
saveData('2'); //Here Callback Function
}
}
/*--- 'recaptcha-form-2' - reCaptcha div ID | 'form2' - Form ID ---*/
console.log('defining widget 2');
widget_2 = x.renderInvisibleReCaptcha('recaptcha-form-2', x.createCallbackFn(widget_2, 'form2', callbackFn));
}
//For Form 3 Initialization
if ($('#form3 #recaptcha-form-3').length > 0) {
var callbackFn = {
action: function() {
saveData('3'); //Here Callback Function
}
}
/*--- 'recaptcha-form-3' - reCaptcha div ID | 'form3' - Form ID ---*/
widget_3 = x.renderInvisibleReCaptcha('recaptcha-form-3', x.createCallbackFn(widget_3, 'form3', callbackFn));
}
} else {
setTimeout(function() {
x.init();
}, retryTime);
}
},
renderInvisibleReCaptcha: function(recaptchaID, callbackFunction) {
return grecaptcha.render(recaptchaID, {
'sitekey': recaptcha_site_key,
"theme": "light",
'size': 'invisible',
'badge': 'inline',
'callback': callbackFunction
});
},
createCallbackFn: function(widget, formID, callbackFn) {
return function(token) {
$('#' + formID + ' .g-recaptcha-response').val(token);
if ($.trim(token) == '') {
grecaptcha.reset(widget);
} else {
callbackFn.action();
}
}
}
}
a.RECAPTCHA = x;
})(PS, $);
}
$(window).load(function() {
PS.RECAPTCHA.init();
});
},
preConfirm: function(login) {
//run any stuff to do before login here
console.log('doing before preConfirm stuff....');
//let s_user_name = Swal.getPopup().querySelector('#s_user_name').value;
//M_user= s_user_name;
},
}).then(function(result) {
console.log('then function result initial');
if (result.value) {
console.log('Doing if result.value here...');
}
}) //swal.fire end
}); //function(e) ends
}); //doc ready ends
</script>
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<center>
<h3 class="">Handle Multiple Invisible Recaptcha</h3>
</center>
</div>
</div>
<div class="inner cover">
<hr>
<form id="comment_form" name="comment_form_name"><button id="comment_button" class="coach_button">Leave a Comment...</button></form>
</hr>
<div class="mastfoot">
<div class="inner">
<p>Sample template by #Prathamesh-Sawant to implement multiple invisible recaptcha on single page dynamically.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<script src="js/form.js" async defer></script>
</body>
</html>
I figured it out
Basically, inside sweetalert2, captcha doesn't render...
I was anyway using multiple fields in SWAL... so I had to use fields inside the HTML parameter.
To address the invisible captcha, I took an idea from Invisible reCaptcha AJAX Call . From within sweetalert, using Swal.getPopup().querySelector('#field').value, in pre-confirm, I will populate hidden fields in the form that is outside of sweetalert and submit it via Ajax
Not a brilliantly clean solution but, hey, it works!
design
<div class="align_center">
<div class="btn EmployeeloginBtn" **onclick="new Employee().register()**">REGISTER</div>
</div>
Employee.js:
var Employee = function() {
var self = this;
self.register = function ()
{
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/
var regEight = /^8[0-9].*$/
if($("#empId").val() =='')
{
alert("invalid emp id");
return false;
}
if(mobile =='')
{
alert("invalid mob no");
return false;
}
}
};
When I click the button onclick is not working its not triggering to Employee.js
I'm not completely sure, but it seems to me that in such an application it does not run the JavaScript code placed in the HTML file.
Here the new Employee statement().Register() is ignored.
Try to manage the button click directly in your JS file.
document.getElementById("Button1").onclick = function() {new Employee().register();};
and
<div id="Button1" class="btn EmployeeloginBtn">REGISTER</div>
Have you tried to change the onclick attribute?
Test different ways...
<div class="btn EmployeeloginBtn" onclick="new Employee().register()">REGISTER</div>
Im not sure if there is a framework or something else that you need the '*'
I'm trying to get my facebook posts using the facebook graph api.But due to variation of likes,comment,share key in json data I had to make a function that could handle the cases.But when I'm trying to call the function in the html code below it shows function undefined errror.Can anyone please help me!!
function getPostsFacebookInfo(){
$.ajax('https://graph.facebook.com/me/posts?access_token='+myFacebookToken,{
success : function(response){
$.each(response.data,function(index,response){
console.log(response);
var react=function (){
if(response.hasOwnProperty('likes'))
{
$('#reactions').append(`<li class="list-group-item">Likes:${response.likes.data.length}</li>`);
}
else
{
$(' #reactions').append(`<li class="list-group-item">Likes:0</li>`);
}
if(response.hasOwnProperty('comments'))
{
$('#reactions').append(`<li class="list-group-item">Comments:${response.comments.data.length}</li>`);
}else
{
$('#reactions').append(`<li class="list-group-item">Comments:0</li>`);
}
if(response.hasOwnProperty('shares'))
{
$('#reactions').append(`<li class="list-group-item">Shares:${response.shares.data.length}</li>`);
}else
{
$('#reactions').append(`<li class="list-group-item">Shares:0</li>`);
}
};
$('#panelbody').append(`
<div class="well">
<div class="row">
<div class="col-md-9">
<p>${response.message}</p>
<img src="${response.picture}" class="img-thumbnail">
</div>
<div class="col-md-3" id="reactions">
<script>react();</script>//function call here..
</div>
</div>
</div>`);
//end argument list
});
}
});// end ajax call
}// end get facebook info
getBasicFacebookInfo();
getPostsFacebookInfo();
I am trying to my migrate my website to angular but slowly. Current scenario is i am having a plain HTML login page in which there is a link to open a forget password popup. I have migrated the Forget password page to Angular. So what i am doing is when the user clicks on the link, i load the angular library, controller and application through $.getscript and then do a AJAX call to load the ForgetPassword page content in the popup. I can see in console evrything has loaded prioperly but error comes when i try to bootstrap. Please find below my JS code.The error i am getting in console is "ReferenceError: angular is not defined angular.bootstrap(document, ['myApp']);"
$(document).ready(function () {
$("#complementary-nav ul li a#popup").bind("click", function () {
loadfiles(function () {
OpenPopup();
angular.bootstrap(document, ['myApp']);
});
});
});
// Code to open in pop up
function loadfiles(callback) {
var scripts = ['/js/angular.min.1.2.9.js', '/js/Controller.js', '/js/application.js'];
for (var i = 0; i < scripts.length; i++) {
$.getScript(scripts[i], function () {});
}
if (typeof callback === "function") {
callback();
}
}
function OpenPopup() {
var url = "/dev/Forgot-Password.aspx";
$.ajax({
type: "GET",
async: false,
contentType: "charset=UTF-8",
url: url,
success: function (data) {
$("#common-popup").html("").append($(data));
$("#common-popup_overlay").fadeIn(500);
},
error: function () {
console.log("error")
}
});
}
The Forgot Password HTML looks like this
<div ng-controller="ForgotPasswordController" id="lostPasswwordOverlayContent" class="overlayContent">
<p>
<label>E-Mail<span class="mandatory">*</span></label>
<input type="email" ng-class="{'input-error':(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (blankSubmit && _ServerForm.email.$invalid)}" ng-model="user.email" email-validate required name="email" placeholder="" maxlength="100" id="EmailAddress" />
<span class="ui-state-error h5-message" ng-show="(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (blankSubmit && _ServerForm.email.$invalid)">
<span class="h5-arrow"></span>
<span class="h5-content">Invalid Email</span>
</span>
</p>
<div class="button buttonSimple buttonRight greenbutton forgotpassword">
<a name="fgtpassword" id="fgtpassword" href="#" class="" ng-click="submitform($event)"><span>Submit<span class="visual"></span></span></a>
</div>
I have tested the functionality seperately for this page and it works fine if opened an independent HTML page whereas when i try to make changes and open it as a popup, i am getting error
I never used $.getScript() but according to the documentation you can provide a callback when the scripts have arrived and have been executed. Why don't you call your own callback then?
function loadfiles(callback) {
var scripts = ['/js/angular.min.1.2.9.js', '/js/Controller.js', '/js/application.js'];
var scriptsAlreadyFetched = scripts.length;
for (var i = 0; i < scripts.length; i++) {
$.getScript(scripts[i], function () {
scriptsAlreadyFetched--;
if (typeof callback === "function" && scriptsAlreadyFetched== 0) {
callback();
}
});
}
}
#meilke Yes the solution worked for me. But i found an alternative for doing it .
I am using the modernizr approach for the loading the JS files. With this approach i am also able to load CSS files together with the JS files
$("#complementary-nav ul li a#popup").bind("click", function () {
loadfiles(function () {
angular.bootstrap(document, ['myApp']);
});
});
function loadfiles(callback) {
var modernizrLoad = [{ load: ['//code.angularjs.org/1.2.8/angular.min.js', '/js/application.js', '/js/Controller.js', '/css/Styles_v2.css', '/css/tyles.css'], complete: function () { OpenPopup(callback); } }];
Modernizr.load(modernizrLoad);
}
I find lot of posts here like same,sorry for asking again but no post is solved my issue. In my phonegap application when load the index page my init function will be called after depend upon the init my action are performed. After submitting the form i want to go index page but it is not possible.
function init() {
document.addEventListener("deviceready", phoneReady, false);
$(document).on("submit", '#addEditForm', function(e) {
var data = {
firstname: $("#mFirstname").val(),
lastname: $("#mLastname").val(),
id: $("#mId").val()
};
saveDatas(data, "#homePage", function() {
**$.mobile.changePage("index.html");** //here i need to go index page
});
e.preventDefault();
});
$(document).on("pageshow", function() {
getDatas();
});
$(document).on("pageshow", "#editPage", function() {
var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?") + 1, loc.length);
var detailId = qs.split("=")[1];
$("#editFormSubmitButton").attr("disabled", "disabled");
dbShell.transaction(function(tx) {
tx.executeSql("select id,firstname,lastname,gender,dob,email from nameDetail where id=?", [detailId], function(tx, results) {
$("#mId").val(results.rows.item(0).id);
$("#mFirstname").val(results.rows.item(0).firstname);
$("#editFormSubmitButton").removeAttr("disabled");
});
}, dbErrHandler);
} else {
$("#editFormSubmitButton").removeAttr("disabled");
}
});
}
and index.html like:
<body onload="init();">
<div data-role="page" id="homePage">
and addEdit.html like:
<div data-role="page" id="editPage">
<form id="addEditForm" method="post">
<div data-role="fieldcontain">
<input type="submit" id="editFormSubmitButton" value="Save">
</div>
</form>
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="home" >Return Home</a>
</div>
</div>
tied this also
//$.mobile.path.parseUrl("index.html");
// $.mobile.changePage($('#homePage'), 'pop', false, true);
Please suggest some idea to do this...
window.location.href won't grant you the page transitions from jQuery mobile. Try these instead:
$.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
$.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})
Also, $.mobile.changePage() is now deprecated and should no longer be used. http://api.jquerymobile.com/jQuery.mobile.changePage/