Hi i got some problem with my sweet alert where i have redirected the user when click okay it be sent to the new page but if cancel they remain at the same page and close the alert boxhow can i do it ?
Here my code for the sweet alert
Swal.fire({
icon: 'success',
title: 'Insert Successfully!',
html: 'The information have inserted successfully!<br>By pressing <b>okay</b> this page will go to <b>manage user</b> page',
showCancelButton: true,
cancelButtonText: "Cancel",
confirmButtonText: 'Okay',
cancelButtonColor: '#d33',
confirmButtonColor: 'btn-success',
heightAuto: false,
})
// footer: '<label class="fixissue">How to fix this issue?</label><br>Try to change the username input and press add button again'
.then(Okay => {
window.location.href = 'manageUsers_api.html';
})
Hi i have fix it by creating a if and else if with a value confirm
.then(function(inputvalue){
if(inputvalue.isConfirmed){
window.location.href = 'manageUsers_api.html';
} else if(inputvalue.isCancel){
Swal.fire('')
}
})
When the user clicks the confirm button in SweetAlert2 I'd like to redirect the user to another page and keep the modal open to show that the redirect is in progress.
I've managed to achieve using by re-initialising the modal after it closes and toggling the loading state. Is there a nicer built-in way? It was possible in the old v1.
var redirect = function () {
return Swal.fire({
type: 'warning',
title: 'Are you sure?',
confirmButtonText: 'Yes',
showLoaderOnConfirm: true,
allowOutsideClick: false,
preConfirm: function () {
window.location.href = 'https://dapurlindawaty.com';
}
});
};
redirect().then(function (result) {
if (result.value) {
redirect();
Swal.showLoading();
}
});
https://jsfiddle.net/bytestream/vfzgx10L/2/
I have select box with menu(id,name) and I have another select box category(cid, cname) and it must show only category based on the menu selected by setting the menuid to "url".
Here is my code:
http://jsfiddle.net/L8su2/738/
echo $this->Form->create('Subcategorynew');
echo $this->Form->input('menu_id', array('empty'=>'--Select--','label'=>'Menu','type'=>'select','options'=>$menunew, 'div' => false, 'id' => 'prodid', 'onchange' => 'test()', 'class' => 'form-control'));
echo "</br>";
echo $this->Form->input('category_id', array('type'=>'select','label'=>'Category', 'div' => false, 'id' => 'total','options'=>$catnew, 'class' => 'form-control'));
echo "</br>";
First, you should add an error trigger to see what happens. AJAX is based on JSON and you are sending HTML code. Then you HAVE to change the data type. Finally, to do it easier, you can use $.get() and $.post() to be sure the way data is coming.
error: console.log,
dataType : 'html',
It should be something like this to test. Results are in your developpement console like in Chrome or Firefox
$.post({
url: "<?=$this->webroot?>admin/subcategorynew/add/"+prodid,
data: data,
error: console.log,
success: console.log,
dataType: 'html'
});
or
$.get({
url: "<?=$this->webroot?>admin/subcategorynew/add/"+prodid,
data: data,
error: console.log,
success: console.log,
dataType: 'html'
});
To display data where we want, via JQuery
Set the callback
success: dataToProcess,
Create the callback
function dataToProcess(data, status){
// select your submenu via the ID
// $.html() will replace the current HTML data INTO the actual tag to the data you sended
$("#idSubMenu").html(data);
}
I'm using the jQuery plugin jeditable in my template: http://www.appelsiini.net/projects/jeditable
So, if I click on an editable element, the text changes to a form with a textfield and a submit button.
<script type="text/javascript">
$(document).ready(function() {
$('.edit').editable('{{ path('group_update', { id: group.id }) }}', {
type : 'textarea',
submit : 'OK'
});
});
</script>
And in the body I have something like that:
<div class="edit">{{ group.name }}</div>
But there is a problem. When I click on the submit-button, nothing happens. No forwarding to my action (in fact there is no reaction).
What can I do?
In case if you need to handle data received from your action, you should submit the data to function instead of URL.
Example below is taken from the documentation
$('.editable').editable(function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
You can pass data to your function, which will make an AJAX call to your action and process all received data in a way you need
All I want to do is handle a click on an extJS panel.
I've tried all the of suggestions on this question plus all I could find elsewhere but each of them fail in the ways described below.
What is the correct syntax to add a click event handler to a extJS panel?
[Edit: For the sake of others who may find this question later, I'll add some comments inline to make this easier to decipher --#bmoeskau]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
click: function() {
alert('ok');
}
}
});
[Ed: click is not a Panel event]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
render: function(c) {
c.body.on('click', function() {
alert('ok');
});
}
}
});
[Ed: The Panel is never being rendered -- add renderTo config. Next, you'll hit a null error telling you that c is not a valid variable. Do you mean menuItem1 instead?]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.getCmp('panelStart').on('click', function() {
alert('ok');
});
[Ed: click is not a Panel event. Also, the Panel is not yet rendered, so if you switched the callback to be on the element rather than the Component you'd get a null error.]
gets error: Ext.get('panelStart') is null:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.get('panelStart').on('click', function() {
alert('ok');
});
[Ed: It's not rendered, see above. Switching from getCmp to get means you are switching from referencing the Component (which does exist, but does not have a click event) to referencing the Element (which does have a click event, but is not yet rendered/valid).]
makes the panel disappear:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
'render': {
fn: function() {
this.body.on('click', this.handleClick, this);
},
scope: content,
single: true
}
},
handleClick: function(e, t){
alert('ok');
}
});
[Ed: The scope being passed into the callback (content) is not a valid ref in this code (this was copy-pasted incorrectly from another sample). Since the Panel var is created as menuItem1 and the callback is intended to run in the panel's scope, scope var should be menuItem1. Also, this Panel is never rendered, see prev comments.]
gives the error "Ext.fly(menuItem1.id) is null":
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this);
[Ed: Panel is not rendered, see above]
...put outside Ext.onReady()...
gets error: Ext.getCmp('panelStart') is null
Ext.getCmp('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: Panel is likely not rendered at the time this code is run. Also, click is not a Panel event.]
...put outside Ext.onReady()...
gets error: Ext.get('panelStart') is null
Ext.get('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: See above]
...put outside Ext.onReady()...
gets error: Ext.fly('panelStart') is null
Ext.fly('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: See above]
For the last three, I checked in Firebug and <div id="startPanel"> exists:
It works with JQuery:
So with JQuery I simply have to do this and it works:
$('body').delegate(('#panelStart'), 'click', function(){
alert('ok with jquery');
});
[Ed: This is not a good approach. It's simply delaying attaching of the handler until later, when the element actually shows up in the DOM (which could also be done via Ext btw, but would still not be the proper approach). I spelled out the correct approach, as linked in my answer below. The OP's attempts are all very close, but each is missing one or two key pieces.]
How can I attach a click handler like this with extJS?
try this:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
afterrender: function (comp) {
var element = comp.getEl();
element.on('click', function() {
alert('ok')
});
}
}
});
[For anyone else reading this, I went through a fairly thorough explanation of this already here.]
You are missing a few key concepts:
click is not a valid Panel event, so adding a click handler on a Panel will do nothing (this is the issue in most of the code you posted above).
In this code:
var menuItem1 = new Ext.Panel({
...
});
content.body
You copy-pasted from another answer, but incorrectly. content in the other code referenced the Panel that was created -- it is a variable. In this code you created the Panel as menuItem1 but then are trying to reference it as content?
Please re-read my previous explanation about how rendering works in the other answer I gave you. You must either add a Panel to a container that renders it, or render it directly (via the renderTo config). If you do neither, the Panel will not show up.
Using jQuery's delegate function is not the proper approach with Ext JS components.
If you want to listen to events on Ext.Elements inside of a panel, you use the element property when calling addListener or passing in listeners config, instead of waiting for the afterrender event just to set the listeners
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
click: {
element: 'el', // could be 'body', or any other Ext.Elements
// that are available from the component
fn: function() {}
}
}
});
Or a more simple approach:
listeners: { 'expand': {fn: adminSelected }}