I have a popup in ionic and have one textfield and one button in it. I want to press enter and want button to work and close the popup. Im wondering how to perform this action within this popup below.
var myPopup = $ionicPopup.show({
template: '<input type = "text" ng-model = "data.model"><br> '
, title: 'Name'
, scope: $scope
, buttons: [
{
text: 'Cancel'
}, {
text: '<b>Search</b>'
, type: 'button-positive'
, onTap: function (e) {
$ionicLoading.show();
$http.get(HTTPService.getHttpText() + 'Persons/' + $scope.data.model).then(function (resp) {
console.log('Success', resp);
$ionicLoading.hide();
}, function (err) {
$ionicLoading.hide();
console.error('ERR', err);
// err.status will contain the status code
})
}
}
]
});
I would suggest you to use a <form> and to set your button type="submit":
<form ng-submit="submitPopup()">
<button type="submit">Close</button>
</form>
In the submitPopup function, do whatever you want and close the modal:
$scope.submitPopup = function() {
$http.get( ... );
myPopup.close();
}
Probably you have filter the button event.
if(e.name="") -->
is $http.get working?
Related
I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}
You should be able to close it like this
swal.close()
I am using Sweet-alert in my angular app.
function GetDataFromServer(url) {
SweetAlert.swal(
{
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
//SweetAlert.swal(
// {
// title: "",
// text: "data loaded",
// });
return response.data;
}
function exception(ex) {
return (ex);
}
}
Req #1 (Main Objective of my this post)
What I am looking for is when the ajax request completes i.e.,
controls enters in the then(), Sweet alert should automatically hide.
Req #2
Also while request processing, I don't want to have the Close pop-up button (Ok button) in the sweet alert.
As per the documentation,showConfirmButton: false should hide it but it's not.
Any help/suggestion highly appreciated.
Thanks.
For automatically hiding the pop-over when it's done, you should set your initial pop-over to a variable so you can access it later. Maybe:
function GetDataFromServer(url) {
SweetAlert.swal({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swal.close()
return response.data;
}
function exception(ex) {
return (ex);
}
}
It's right on: https://t4t5.github.io/sweetalert/ in the methods section near the bottom.
Since you don't have a specific 'way' you want to do hide the ok button and you're just looking for suggestions, you could always just use a little CSS to target it and give it the ol display: none; setup.
You can close current showing sweetalert by using below line of code anywhere you want.
swal.close();
That's it!
You can use the close method over the sweet object see the documentation in down part
https://t4t5.github.io/sweetalert/
swal.close(); --> Close the currently open SweetAlert programmatically.
self.showProgress = function(message) {
swal({ title: message });
swal.showLoading();
};
self.hideProgress = function() {
swal.close();
};
SweetAlert has close method if you check the docs at http://t4t5.github.io/sweetalert/
You can use SweetAlert.close() to close the sweetalert in angular.
If you use swal2 you can close it using Swal.close() from anywhere inside your code for closing it when ajax is complete I think the code below is an easy way:
$(document).ajaxComplete(function () {
Swal.close();
});
swal does not work with sync function (ex. get), you need make call get async
swal({
type: 'warning',
text: 'Please wait.',
showCancelButton: false,
confirmButtonText: "ok",
allowOutsideClick: false,
allowEscapeKey: false
}).then(function (result) {
if (result) {
setTimeout(function () {
$http.get(url)
}, 500);
}
});
if you are using the AngularJS library known as angular-sweetalert then use swal.close(); to close the alert window.
angular-sweetalert is a wrapper on the core sweetalert library package.
Cache the swal() to trigger it later.
function GetDataFromServer(url) {
let swalAlert = SweetAlert.swal; // cache your swal
swalAlert({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swalAlert.close(); // this is what actually allows the close() to work
return response.data;
}
function exception(ex) {
return (ex);
}
}
I am currently using Django 1.9 and Braintree payments JS v3. What I want to be able to do is when the user submits the form successfully, have a Javascript alert() pop up. But the pop-up message will be contingent on what the back end Python returns...
So like this:
Submit the form
Run the backend stuff
Pop up the alert with a message dependent on what is returned by the Python backend
When the alert is closed, refresh or redirect
var client_token = "{{ request.session.braintree_client_token }}"
var form = document.querySelector('#checkout-form');
var submit = document.querySelector('input[type="submit"]');
braintree.client.create({
authorization: client_token
}, function (clientErr, clientInstance) {
if (clientErr) { // for error loading client authorization
if(alert('There was a form verification issue, reloading page on close.')){}
else window.location.reload();
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: 'Credit Card Number'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2019'
},
postalCode: {
selector: '#postal-code',
placeholder: '10014'
}
}
}, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) { // for errors creating form
if(alert('There was a form creation issue, reloading page on close.')){}
else window.location.reload();
return;
}
submit.removeAttribute('disabled');
form.addEventListener('submit', function (event) {
event.preventDefault();
document.querySelector('input[id="pay-button"]').value = "Please wait...";
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
if (tokenizeErr) {
if (tokenizeErr.code === 'HOSTED_FIELDS_FIELDS_EMPTY') {
alert('Please fill in card info');
document.querySelector('input[id="pay-button"]').value = "Complete Booking";
}
return;
}
// Put `payload.nonce` into the `payment_method_nonce`
document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;
form.submit();
$('input[type="submit"]').prop('disabled',true);
});
}, false);
});
});
I'm thinking that this functionality would need to be right after form.submit() is run on the bottom...
Edit:
I added the vars up top in my code
I'm using the following code for some validation stuff using both $ionicPopup and Firebase:
onTap: function(e) {
firebase.auth().applyActionCode($scope.data.emailcnfrm)
.then(function() {
return $scope.data.emailcnfrm;
},
function(error) {
alert("wrong code");
e.preventDefault();
});
}
But In the case of error, and after I get the "wrong code" alert, the popup gets closed, as e.preventDefault(); has been ignored.
So what's exactly wrong in my code? and how can I fix this problem?
Your call to firebase.auth().applyActionCode is asynchronous, and e.preventDefault will be called asynchronously in the error callback. This happens after the user has already invoked onTap, thus e.preventDefault won't have any effect.
Edit (a proposed fix)
To fix it, you could separate the async logic from the onTap method:
var myPopup = $ionicPopup.show({
onTap: function(e) {
// always keep the popup open, because we'll decide when to close it later
e.preventDefault();
}
});
myPopup.then(function(res) {
firebase.auth().applyActionCode($scope.data.emailcnfrm)
.then(function() {
// if successful, imperatively close the popup
myPopup.close();
}, function(err) {
// log the error, or something
});
});
Finally I solved the problem by using my own trick:
-outside Async:
$scope.myPopup = $ionicPopup.show({
scope: $scope, buttons: [
{ text: 'Cancel' },
{
text: '<b>Done</b>',
type: 'button-positive',
onTap: function(e)
{
// always keep the popup open, because we'll decide when to close it later
e.preventDefault();
$AsyncCallback();
}
}
]
});
$scope.myPopup.then(function(){},
function(error)
{
$ionicPopup.alert({
title: 'Internal error!',
template: error
});
});
-inside async:
$scope.myPopup.close();
I'm trying to do a sencha touch app where the user first needs to register. After that, a pop up alert will say that you have registered and when the user presses the 'ok' button, the register form (register.js) will go to login form (login.js).
This is my register.js:
Ext.define('demo.view.Register',{
extend:'Ext.form.Panel',
xtype:'register',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'demo.view.Login'
],
config:{
title:'Register',
iconCls:'user',
url:'doRegister.php',
items:[
{
xtype:'fieldset',
title:'Registration!!!',
items:[
{
xtype:'textfield',
name:'username',
label:'Name'
},
{
xtype:'passwordfield',
name:'password',
label:'Password'
},
{
xtype:'emailfield',
name:'email',
label:'Email'
},
{
xtype:'textfield',
name:'first_name',
label:'First Name'
},
{
xtype:'textfield',
name:'last_name',
label:'Last Name'
}
]
},
{
xtype:'button',
text:'Share',
ui:'confirm',
handler: function() {
// This looks up the items stack above, getting a reference to the first form it see
var form = this.up('register');
// Sends an AJAX request with the form data to the url specified above (contact.php).
// The success callback is called if we get a non-error response from the server
form.submit({
success: function() {
Ext.Msg.alert('Status', 'Resgistered Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'login.js';
window.location = redirect;
}
});
}
});
}
}
]
}
});
This is my login.js:
Ext.define('demo.view.Login',{
extend:'Ext.form.Panel',
xtype:'login',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email'
],
config:{
title:'Login',
iconCls:'user',
url:'doLogin.php',
items:[
{
xtype:'fieldset',
title:'Please Login',
items:[
{
xtype:'textfield',
name:'username',
label:'username'
},
{
xtype:'passwordfield',
name:'password',
label:'password'
}
]
},
{
xtype:'button',
text:'Login',
ui:'confirm',
handler: function() {
// This looks up the items stack above, getting a reference to the first form it see
var form = this.up('share');
// Sends an AJAX request with the form data to the url specified above (contact.php).
// The success callback is called if we get a non-error response from the server
form.submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success: function() {
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'Share.js';
window.location = redirect;
}
});
}
});
}
}
]
}
});
You could put both of the forms inside one Container with a card layout (layout: 'card') and when you want to switch to the login form you can call setActiveItem(1) on the parent container.. It would be best to use a controller for this logic so you could have references to all of the containers/forms from that controller.
on alert ok button press you can create your login page to the viewport and then navigate to the login page.
here is the code :
Ext.Msg.alert('Demo', "Register successfully", function(){
Ext.Viewport.add(Ext.create('demo.view.Login'));
Ext.Viewport.animateActiveItem(this.getLogin(),{
type: 'slide',
direction: 'right'
});
});