Replacing default jqgrid dialog with sweetAlert - dialog

I'm trying to replace the jqgrid default delete dialog popup with sweetalert jquery. When I use the code below for delete button, it works fine, but it still shows the default jqgrid delete confirmation method.
Any idea on how to correctly call sweetalert confirmation dialog?
Thanks
url: editUrl,
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
beforeShowForm: function ($form) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
},

You can't do it this way. The approach that you use is get from stackoverflow demo which replace the text in the existing dialog. It does not replace the dialog as itself.
To do what you want I recommend you to create a custom navigator button and define your own ajax function to delete the row again with your dialog. Do not forget to use in this case delRowData to delete the row locally too.

Related

Problems with v-select and data

Good afternoon friends, then I'm going to tell you my mistake. I am working for a users screen, where you have your registration and editing. When you enter the register section you don't have to show the role you already have in the database. But on the edit screen, it already has a role assigned, so I would have to bring it to it (as it does with the text-fields) But I can't get it to load them.
attached images of the screen:
When I do a debugger as soon as I enter the screen, I realize that it is returning the roles as an array. And it shows me the role well, but it doesn't place it in the select.
Attached image of the error, below the images is the code that I use.
<v-select
label="Rol"
v-model="form.rolId"
:items="roles"
item-value="value"
item-text="text"
:rules="[(v) => !!v || 'Este campo es requiredo']"
required
>
</v-select>
data() {
return {
form: {},
roles: [
{ value: "Agente", text: "Agente" },
{ value: "Administrador", text: "Administrador" },
],
};
},
You have to put a default value on your v-model for it to load the data in the select.
see codepen here

searching a word does not work in combobox in ext 7 version

i have a combobox in EXT version 7 code. I have the editable config as true. My code is as below. This code is similar to what is present in the sencha docs. I have just changed the editable config to true . When we type anything in textfield it appends random characters and the search does not work as expected. Is it a bug with Ext 7? I am not able to figure out. Is someone else also facing something similar?
Ext.create({
fullscreen: true,
xtype: 'container',
padding: 50,
layout: 'vbox',
items: [{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
// For the dropdown list
itemTpl: '<span role="option" class="x-boundlist-item">{abbr} - {name}</span>',
// For the content of the text field
displayTpl: '{abbr} - {name}',
editable: true,
store: [
{ abbr: 'AL', name: 'Alabama' },
{ abbr: 'AK', name: 'Alaska' },
{ abbr: 'AZ', name: 'Arizona' }
]
}]
});```
I have the same problem with the combobox component in the modern toolkit. I tried the same setup in the Ext JS Version 6.5 and the same error occured.
The only workaround I found for now was to not use the displayTpl config.
Then it worked as intended.
EDIT:
I debugged a little bit into the ext-modern-all and found a solution.
If you want to be able to edit the input field as well as to use the displayTpl you have to set forceSelection: true. Otherwise it will treat your entry as new record and this bug will occur. (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html)
I hope this helps.
IDK why the first answer was chosen as the correct answer, I hope my answer below can enlarge your knowledge minimally. When your problem was:
"When we type anything in textfield it appends random characters and the search does not work as expected."
I wanna try to understand that statement like this:
"You want to try to search the item on your store or options by typing random character at any position of any matched item"
At this case, you must add these properties to your combobox to achieve the goal:
anyMatch : true, // this is the key
caseSensitive : false, //by default this has been set automatically
minChars: 0,//by default this has been set automatically too
forceSelection: false // set to false to allow free input to textfield with no matched result and set to true to force the user to choose one of the last matched result rather than giving the opportunity to input free text
Before we conclude that the problem is a bug or not, we need to do the whole researches to get the exact conclusion. Don't forget to learn more on
https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html
Hope this help you.

Having trouble maintaning persistent column layout (v4.4.1)

I able to move columns as expect and resize them as expected, but on a data reload of the grid or when returning to the page, the Grid reset back to the original layout.
var table = new Tabulator("#gvRecords", {
ajaxURL: document.getElementById('urlAPI').value + "/Properties/Get/",
selectable: false,
ajaxParams: { "PropertyID": PropertyID, "Tab": Tab },
movableColumns: true,
persistenceMode: "cookie",
persistenceID: "Properties",
persistentLayout: true,
Any help is appreciated, not sure why I doing wrong, I was able to have this work a while back when testing out Tabulator, but now that I trying to implement, I can't see to get it going.

Using array destructuring as the value for multiple-choice questions with Inquirer?

I have a dilemma, my code is:
inquirer.prompt([
{
type: 'checkbox',
name: 'Keywords',
message: 'Please select the keywords you would like to use with a maximum of 5.',
choices: [
NewDescriptionKeys[0],
NewDescriptionKeys[1],
NewDescriptionKeys[2],
NewDescriptionKeys[3],
NewDescriptionKeys[4],
]
}
]).then(function (answers) {}//other non-related code is here
My problem is, I can sometimes have more then 5 results, and need to display all of them, so the user can select the ones they want to use, and deselect the ones they don't, I've tried just putting each array until I reach the possible maximum that could be returned, but that just puts undefined's everywhere, any suggestions?
Simplify it with
{
type: 'checkbox',
name: 'Keywords',
message: 'Please select the keywords you would like to use with a maximum of 5.',
choices: NewDescriptionKeys
}
and
Please use the Spacebar to select not enter(return)
(Press <space> to select, <a> to toggle all, <i> to inverse selection)
If you press the enter without selection(without pressing spacebar) then it submits the unselected result with is the empty array.
Enter work as submit
Why not this:
{
type: 'checkbox',
name: 'Keywords',
message: 'Please select the keywords you would like to use with a maximum of 5.',
choices: NewDescriptionKeys
}

Updating single items is list using SPservices

I've been struggling to learn how to use SPservices. What I am trying to accomplish is creating a simple input button that will update my item on my list automatically and refresh my page.
Now where I am getting confused here is that the field I am trying to update is an input box (plain text basically). Users would add their dates on that input box manually in this format 03/09/2015 20:48 (MM/DD/YYYY HH:MM). I want to add that button for each item on that row, so that when a user clicks on it, it calculates the current time and adds an extra hour.
I scavenged the web for similar situation as mine but cant seem to get any examples to work with. Just looking for some help, advice, pointers anything at this point.
$().SPServices({
operation: "UpdateListItems",
listName: "List Name",
ID: ID,
valuepairs: valuePairs,
completefunc: function(xData, Status) {
//Callback
}
});
Figured it out, i created a new column and added the item's ID to it and put the row's TD as display: none;. This would essentially hide but with javascript I can still get its information. I then created another column with my button and gave the class update_button and its working great now.
I know this isnt exactly what I said I wanted but this solves a big portion of this puzzle. Hope this helps someone.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".update_button").click(function() {
var id = $(this).closest("tr").find(".hidden_ID").text();
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "Update",
listName: "Severities",
ID: id,
valuepairs: [["Notes", "Updated"]],
completefunc: function (xData, Status) {
alert(id);
}
});
});
});
</script>

Resources