I want to use sweetalert on my page. The problem is that following the successful operation, the sweetalert appears which is below, and when the OK button is clicked, the page must to be reload (). However, with sweetalert disappears as it appears and the page is reload (). therefore, I don't want the page to be reload () before I click the OK button. What should I do?
Edit Note: I'm using ckeditor on my page. I think the problem stems from ckeditor's editing of textareas. but still i don't know how to solve it.
success: function (response) {
if (response.Result) {
Swal.fire({
title: 'Ok',
text: response.Mesage,
type: 'success',
showCancelButton: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ok'
}).then(
function () {
window.location.reload();
}
)
}
else {
Swal.fire(
'Error',
response.Message,
'error')
}
I think it's because your 'then' is firing regardless of the 'result' from the click.
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
window.location.reload(); //i.e. if 'confirm' is pressed
}
})
source: https://sweetalert2.github.io/
Related
I am using RN 0.63 and i am facing issue in React Native core alert.It popup and disappear automatically with second.I want alert should disappear when i click on OK button.
Alert.alert(
'Alert Title',
msg, // <- this part is optional, you can pass an empty string
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: false},
);
I ran into the same issue and was able to avoid the "automatically disappearing" Alert popup after finding a loading prop was being passed down into a child component and was being (unnecessarily, in my case) consumed.
So I resolved the issue by simply removing the prop and handling the "loading" logic in the parent component.
Please double check that there are no unintentional re-renders of your component that may cause the Alert to be dismissed.
Probably you are showing dialog right after setState. You need to show dialog once the state update is completed. If this is not doable, it's not a good idea but a workaround then simply wrap dialog within setTimeout.
setTimeout(() => {
Alert.alert(
"Title",
"Message",
[
{
text: "OK",
onPress: () => {},
},
],
{ cancelable: false }
);
}, 100);
I added a select2 and it always show first option as blank.
just below the blank option, it always shows what i type in select2 textfield. Any Idea, how i can fix it.
= hidden_field_tag :tags // present in HAML form
// javascript
$('#tags').select2
createSearchChoice: (term, data) ->
if $(data).filter((->
#text.localeCompare(term) == 0
)).length == 0
return {
id: term
text: term
}
return
multiple: false
data: [
{
id: 0
text: 'story'
}
{
id: 1
text: 'bug'
}
{
id: 2
text: 'task'
}`enter code here`
]
Try this .....
Your input field should be like this
%input#tags{:style => "width: 300px", :type => "hidden"}
Your js code should be like this
$("#tags").select2({
placeholder:"Select an option",
createSearchChoice: function(term, data) {
if ($(data).filter((function() {
return this.text.localeCompare(term) === 0;
})).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: false,
data: [
{
id: 0,
text: 'story'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'task'
}
]
});
You no longer need to use createSearchChoice if you want to do this with Select2, you can just use the tags option. Right now you shouldn't be seeing the blank option, as you aren't passing one to Select2 at all, so this is lacking a bit of information that would explain that issue.
Select2 will automatically hide blank options though if you have a placeholder set, which I would always recommend. So the hacky solution is to set the placeholder option to whatever you want ("Select a few tags..."), but that only works if this is actually a blank option and not just a CSS issue. You can tell if it's a blank option if Select2 highlights it whenever you start searching, as it will automatically highlight the first option.
It would make more sense for this to be a CSS issue, maybe a bit too much padding somewhere, as the tag (or choice from createSearchChoice) should be inserted automatically at the top of the search results. So even if there was a spare blank option sitting around, it would show under the newly created search choice.
I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/
I want to add a context menu on right click for various elements on my geojson layer (I'm doing a road map so on a right click on the road at any part I want to show the context menu).
I've managed to get the left click working fine by using the onEachFeature and doing the following
function onEachFeature(feature, layer) {
layer.on({
click: showAssetInfo,
contextmenu: contextreg
});
}
function showAssetInfo(e) {
AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
}
For the context menu I have followed the example here . The context menu library is found here
I have the following that gets called on the document ready (jquery)
$.contextMenu({
selector: 'path.leaflet-clickable',
zIndex: 99999,
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": { name: "Edit", icon: "edit" },
"cut": { name: "Cut", icon: "cut" },
"copy": { name: "Copy", icon: "copy" },
"paste": { name: "Paste", icon: "paste" },
"delete": { name: "Delete", icon: "delete" },
"sep1": "---------",
"quit": { name: "Quit", icon: "quit" }
}
});
I've tested it and the selector does return the GeoJson features, also if it attach the same menu to something else it works correctly.
Is there something I am missing here?
Also is there a good way to pass in the objectid to the menu when it starts up so I can use it when calling the different options of the menu
EDIT:
I have created this fiddle to demonstrate http://jsfiddle.net/Q3L4c/22/
There is a good leaflet plugin for context menu that was created in Aug 2013:
Leaflet.contextmenu
This context menu library has great documentation including step-by-step instructions for implementation in GeoJSON layers.
In the following code snippet, notice how we can easily pass through the full feature and layer objects to the function that is called when the edit menu item is selected. In this example the layer group is a GeoJSON layer group, the GeoJSON properties can be accessed via feature.properties
NOTE: In this solution content menu item definitions are generated during the onEachFeature processing, not dynamically when the context menu is invoked, just something to be aware of if your were planning on dynamic menu item generation which might be dependent on variables that could change at run time, you need to evaluate the visibility or enabled option for each item as a static value when you create the menu item.
function onEachFeature(feature, layer) {
layer.bindContextMenu({
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [
{ text: 'edit', icon: 'edit', callback: function () { editFeature(feature, layer); } },
{ text: 'cut', icon: cut', callback: function () { console.log('cut'); } },
{ text: 'copy', icon: 'copy', callback: function () { console.log('copy'); } },
{ text: 'paste', icon: 'paste', callback: function () { console.log('paste'); } },
{ text: 'delete', icon: 'delete', callback: function () { console.log('delete'); } },
{ separator: true },
{ text: 'quit', icon: 'quit', callback: function () { console.log('quit'); } },
]
});
layer.on({
click: showAssetInfo
});
}
/**
* Edit a feature on the map
* #param {GeoJSON} feature GeoJSON feature, access metadata through feature.properties
* #param {any} layer Leaflet layer represents this feature on the map (the shape)
*/
function editFeature(feature, layer) {
console.log(JSON.stringify(feature.properties));
}
function showAssetInfo(e) {
AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
}
MY sencha touch application is working fine in all browsers, however when I save the url to the iPad home screen. It will not load and only shows a blank screen. I get no JS errors and nothing comes through the log when debugging. Heres a sample of the app:
script type="text/javascript">
var rootPanel;
if (navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
Ext.application({
launch: function () {
var contactForm = Ext.create('Ext.form.FormPanel', {
standardSubmit: true,
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'My App',
docked: 'top'
}, {
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'LoginName',
label: 'Login Name:'
}, {
xtype: 'passwordfield',
name: 'Password',
label: 'Password:'
},
{
xtype: 'hiddenfield',
name: 'ReturnUrl',
value: '/returnUser.html'
}] // items
}, {
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Reset',
ui: 'decline',
handler: function (btn, evt) {
Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
if (btn === 'yes') {
contactForm.setValues({
LoginName: '',
Password: ''
}); // contactForm()
} // switch
}); // confirm()
}
}, {
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function (btn, evt) {
var values = contactForm.getValues();
contactForm.submit({
url: 'Login',
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function (form, result) {
Ext.Msg.alert('Login succeeded!', result.response.reason);
},
failure: function (form, result) {
Ext.Msg.alert('Login Failed!', result.response.reason);
}
});
} // handler
}] // items (toolbar)
}] // items (formpanel)
}); // create()
} // launch
}); // application()
$(document).ready(function () {
});
I put an alert in the launch method of Ext.Application but it does not show. When I put it an alert in the document.ready function it does show. I should also note it DOES work on the ipad browser, just not when launched from the icon on the homescreen.
i faced a similar issue in android actually in my case the problem was because of Ext.Loader not enabled I see you have not included it either. Include this script before Ext.application & see if it works
Ext.Loader.setConfig({
enabled:true
});
Ext.application({...});
It appears to be the version of sencha I was using which was 2.1.0 I believe, as soon as I updated to the latest(2.1.1 Build Date 2013-02-05 12:25:50 ) I works fine.