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/
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!
I have multiple google captchas on page. Code:
<script>
var qqqq =function(captcha_response){
console.log('?')
}
var CaptchaCallback = function(){
$('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': 'qqqq', 'theme': 'dark'});
});
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
On the page there are several blocks for reCAPTCHA:
<div class="g-recaptcha"></div>
All reCAPTCHA's render well, all with dark theme, all do verifying work, but the callback function does not get called.
When I tried single reCAPTCHA with data-callback attribute, it worked well.
I was facing the same issue. After checking the documentation again I found my problem. Try to remove the single quotation marks around your function name.
Like this:
<script>
var qqqq =function(captcha_response){
console.log('?')
}
var CaptchaCallback = function(){
$('.g-recaptcha').each(function(index, el) {
grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': qqqq });
});
};
</script>
Maybe this helps someone else as well :)
Steps to implement multimple recaptcha with a callback method for disable the submit button
1) Add the reference
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2) Add the Code that will render the captcha widget
<script>
var CaptchaCallback = function () {
grecaptcha.render('RecaptchaField1', { 'sitekey': 'xxx', callback: 'recaptchaCallback1'});
grecaptcha.render('RecaptchaField2', { 'sitekey': 'xxx', callback: 'recaptchaCallback2' });
grecaptcha.render('RecaptchaField3', { 'sitekey': 'xxx', callback: 'recaptchaCallback3' });
};
</script>
3) Add the method to remove the disable property on the submit button
$('#GetHelpButton').prop('disabled', true);
function recaptchaCallback1()
{
$('#GetHelpButton').prop('disabled', false);
}
4) Add the widget inside a form
<form id="formContact" method="post" class="login-form margin-clear" action="Landing/SendContactForm">
<div class="form-group has-feedback">
<label class="control-label">Correo electronico</label>
<input name="EmailContact" value="" id="EmailContact" type="text" class="form-control" placeholder="">
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<div id="RecaptchaField1"></div>
<button id="GetHelpButton" type="submit" data-sitekey="xxxx" class="btn btn-info col-md-12 g-recaptcha">Send</button>
Try setting a unique ID for each div and then use a for loop to iterate through them. Something like this:
window.onloadCallback = function() {
var captcha = ['recaptcha1' ,'recaptcha2', 'recaptcha3']; //put your IDs here
for(var x = 0; x < captcha.length; x++){
if($('#'+captcha[x]).length){
grecaptcha.render(captcha[x], {
'sitekey' : '{{ recaptcha_key}}',
'theme' : 'dark',
'callback': function() {
console.log("Woof");
}
});
}
}
};
I hava a login popup,when there is no session popup appears and then when i click submit link after write my user_id and password, nothing happened. but when i click second time everything works .i think it is about page loading but i have no idea to fix it. anyone any idea ? thanks
EDIT: i realized something when i enter the wrong values (data.tip==='hata') it works in first time, but when i enter the right values i have to double click to work but i still cant handle it .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
///////////////////////////////////General Popup
function launch()
{
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
$('table tr:nth-child(even)').addClass('stripe');
/////////////////////////////////////////// PopUp End
$("#log_in").click(function(e) // This is not working in first time
{
var kullanici_adi=$("#kullanici_adi").val();
var sifre=$("#sifre").val();
$.ajax
({
type: "POST",
url: "girisislemi.php",
data: {kullanici_adi : kullanici_adi,sifre:sifre},
dataType:"json",
success: function(data)
{
if(data.tip==='yonetici'||data.tip==='kullanici')
{
$("#log_in").addClass("close");
$ele.lightbox_me();
$ele.trigger('close');
}
if(data.tip==='hata')
{
$('input[type=text]').css( "border", "3px solid red" );
$('input[type=password]').css( "border", "3px solid red" );
}
}
});
e.preventDefault();
});
});
</script>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="sign_up">
<h3 id="see_id" class="" >Can I see some ID?</h3>
<span>Please sign in using the form below</span>
<div id="sign_up_form">
<label><strong>Username:</strong> <input type="text" id="kullanici_adi" class=""/></label>
<label><strong>Password:</strong> <input type="password" id="sifre" class="" /></label>
<div id="actions">
<a class="form_button " id="log_in" href="#">Sign in</a>
</div>
</div>
</div>
</body>
</html>
I try your code in JSFiddle and I have an error: $ele variable is not defined so I add the definition in the success callback and if your returned json has the good tip property, it's working the first time on my side.
$(document).ready(function() {
///////////////////////////////////General Popup
function launch() {
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
$('table tr:nth-child(even)').addClass('stripe');
/////////////////////////////////////////// PopUp End
$("#log_in").click(function(e) { // This is not working in first time
var kullanici_adi=$("#kullanici_adi").val();
var sifre=$("#sifre").val();
$.ajax({
type: "POST",
url: "girisislemi.php",
data: {kullanici_adi: kullanici_adi, sifre: sifre},
dataType:"json",
success: function(data) {
// --- Some log to verify the content of data.tip
console.log(data.tip);
if(data.tip==='yonetici'||data.tip==='kullanici') {
$("#log_in").addClass("close");
// --- Here I define the $ele variable to use it after.
$ele = $('#sign_up');
$ele.lightbox_me();
$ele.trigger('close');
}
if(data.tip==='hata') {
$('input[type=text]').css( "border", "3px solid red" );
$('input[type=password]').css( "border", "3px solid red" );
}
}
});
e.preventDefault();
});
});
I want to reload the page and navigate to the user's previously active tab after the user has clicked the submit button on a jquery-jtable form. What I have now reloads the page but doesn't navigate to the user's last active tab before the reload. The tabs are created using jquery ui. Here's the shortened html:
<div id="tabs">
<ul>
<li><a href='#tabs-TasksWithRisks'>Tasks With Risks</a></li>
<li><a href='#tabs-Lessons-Learned'>Lessons Learned</a></li>
</ul>
<div id='tabs-TasksWithRisks' class='tab'>
<div id="TasksWithRisksTableContainer" class="jTableContainer" style="width:100%;"></div>
</div>
<div id='tabs-Lessons-Learned' class='tab'>
<div id="LessonsLearnedTableContainer" class="jTableContainer" style="width:100%;"></div>
</div>
</div>
<script type="text/javascript">
var project_id = <?php echo $project_data['project_id']; ?>;
var modify = <?php echo $modify ? 'true' : 'false'; ?>;
$(document).ready(function() {
loadViewProjectTasksWithRisksTable('TasksWithRisksTableContainer', project_id, modify);
loadViewLessonsLearnedTable('LessonsLearnedTableContainer', project_id, modify);
</script>
function loadViewLessonsLearnedTable(ContainerID, project_id, modify, no_toolbar) {
var fields = $.extend(true, fields, LessonsLearnedFields); //copy, don't reference
fields.Responses = getLessonsLearnedResponseChildTable(ContainerID);
$('#' + ContainerID).jtable({
title: 'Lessons Learned',
paging: true,
pageSize: 100,
sorting: true,
defaultSorting: 'WBS ASC',
actions: {
listAction: config.base_url + 'data_fetch/risks_cause_by_project/' + project_id,
deleteAction: config.base_url + 'data_fetch/delete_risk/',
updateAction: config.base_url + 'data_fetch/update_lessons_learned_risk/' + project_id
},
messages: defaultRiskMessages,
fields: fields, ,
formSubmitting: function(event,data){
$('select[name=cause]', data.form).attr('name','cause[]');
location.reload(true);
return data;
}
});
$('#' + ContainerID).jtable('load');
}
I tired location.href = config.base_url + '#tabs-Lessons-Learned'; but that didn't work. Most working solutions that I found online were for bootstrap so they weren't of much help.
I found this question on stackoveflow but I wasn't able to tailor the answer to my needs.
All help is greatly appreciated.
Instead of location.reload(true); I used loaction.assign('address_I_wanted_to_go_to')
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