We Keep Coding

How to put initialized selectizejs input field in sweetalert

I have a page containing DataTables with actions buttons on each row. One of the buttons should open up a sweet alert containing my selectizejs input field. So the user can select or remove options from the list and then click "OK" in the sweet alert to save it.
I am stuck with the steps in between initializing the selectize element and placing it inside the sweet alert.
I do not see an option to initialize the selectizejs field inside the swal component, so I have tried numerous things initializing it before and placing it in the content field in sweetalert.
In my approach I have created my input element in my view :
<input type="text" id="adminvollabels" class="adminvollabels-select" value="test1,test2,test3" placeholder="<?=lang("flow_company_skills_placeholder")?>" name="adminvollabels">
The jQuery code is as this:
$('.vol-label-link').on('click', function(e) {
e.preventDefault();
var userId = $(this).data("user-id");
var ele = $('<div class="row"></div>');
ele.append('<div class="col-md-12"><label for="adminvollabels">testlabel</label></div>');
$('.adminvollabels-select').selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input.toLowerCase(),
text: input.toLowerCase()
}
}
});
ele.append('<div class="col-md-12"><div class="form-group">'+$('.adminvollabels-select')+'</div></div>');
swal({
title: res.VolLabelUpdateTitle,
content: selectizeElement,
icon: "info",
buttons: {
cancel: {
text: res.BtnCancelText,
visible: true,
className: "btn-secondary"
},
confirm: "ok"
}
}).then(function (isConfirm) {
if (isConfirm) {
$.ajax({
//Do AJAX stuff
});
}
})
});
In this approach my attempt was the following steps:
1) Create input element in HTML
2) when clicking on the vol-label-link element
3) (in JS) create a temporary DOM object with all the div's and col-md's
4) (in JS) Make the input field a selectize.js field
5) (in JS) Append this element in my temporary DOM object
6) place this temporary DOM object in the SWAL 'content' option.
Note on 6: Since I think that SWAL content option only allows raw HTML (I think it performs a parseHTML on it). Hence my attempt on building up the full HTML DOM temporary object before inserting it in the content field.
However with this code, my HTML looks like this:
<div class="col-md-12"><label for="adminvollabels">testlabel</label></div><div class="col-md-12"><div class="form-group">[object Object]</div></div>
I've been trying out with .clone() as well but I cannot get it working on the initialized selectizejs field.

Binding an event to an add dialog select input in jqgrid

I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.
For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.
Currently I am doing something like the following:
beforeProcessing: function () {
var allcountries = ajaxcall();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
},
loadComplete: function () {
$('#Countries').change(function () {
// States will be populated here
alert("changed");
});
}
The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.
Any ideas?

jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.

I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:
First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:
beforeProcessing: function () {
var allcountries = ajaxCallToFetchCounties();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
var states = ajaxCallToFetchStates();
$('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
}
Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:
beforeShowForm: function (form) {
$("#Countries").unbind("change").bind("change", function () {
var states = ajaxCallToFetchStates();
//Manually clear and re-populate the states select box here with the new list of states.
});
$('#tr_AccountCode', form).show();
}

How to destroy jQuery validation and any further attempts at submission?

I have the following code for the jQuery validation plugin.... basically on submit, I slide everything up & fade it out... the only problem is, if you're quick enough, you can submit the form multiple times. How can I make sure that any presses of the enter key on the input (or clicks on that submit button) will not submit further?
Basically what happens, is that the form will load up the url in the action attribute when no javascript is there, so purely unbinding doesn't work... (even if it did, I can always press enter / click fast enough to get it to do a couple more....)
jQuery('.desired').validate({
debug: true,
rules: {
email: {
required: true,
email: true
}
},
wrapper: "div",
messages: {
email: "Please enter a valid email address."
},
errorPlacement: function(error, element) {
error.hide().appendTo(element.parent()).hide().slideDown();
},
errorClass: 'help-text',
submitHandler: function(form) {
var $ = jQuery;
var url = $(form).attr('action');
var query = $(form).serialize();
$.ajax({
url: url,
type: "POST",
data: query,
success: function() {
$("<p class='help-jquery'><b>Thanks</b>")
.insertAfter(jQuery(form))
.css('height', function(i,h) {
$(this).hide()
return h;
});
// $(form).css('height', $(form).height());
$(form).slideUp('slow');
$(form).fadeOut({ queue: false, duration: 'slow' });
// $('.help-jquery').fadeIn('slow');
$('.help-jquery')
.css('opacity', 0)
.slideDown('fast')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
//$('.desired submit').click(function(){
//return false;
//});
},
error: function() {
console.log('Error: did not submit properly');
},
complete: function(e) {
//$('.desired').unbind('submit');
//e.preventDefault();
//return false;
}
});
},
success: function(error,element){
},
highlight: function(error){
// This empty function needs to be here for this to work
}
});

You're on the right track with unbind(), it solves half of your problem because it will effectively suppress validation on form submission.
To solve the second half, you only have to neuter the form's submit event after unbinding, by registering the appropriate handler:
$(form).unbind("submit").submit(function() {
return false;
});

Use a boolean variable, like this:
var didValidate = false;
if(!didValidate) {
jQuery('.desired').validate({
//... your code here
});
}
In your AJAX success function, set didValidate to true.

Have a variable that is 1 or 0. before you do any validation, check that the variable is equal to 0. If it isn't 0, do nothing. If it is, continue. Once the validation passes, set the variable to 1 so that the validation cannot occur again.

Use event namespaces:
The name following the '.' let's you target handlers more specifically.
This at the top of the submit handler:
$(form).bind('submit.temp_submit_hold', function(e){
e.preventDefault();
e.stopPropagation(); //added this in case the plugin's handler func uses bubbling
return false;
} );
This at the top of the complete callback for the ajax call:
$('.desired').unbind('submit.temp_submit_hold');
A little more explanation after seeing your comments in complete. The time to preventDefault is immediately after your onsubmit handler starts working. On complete is when you want to enable it again. So we bind a func that stops it with prevent default and then unbind it to toggle behavior. I also added stopPropagation in case the plugin uses delegation/bubbling.

Probably the simplest is to add something like this to your submithandler
submitHandler: function(form) {
var $ = jQuery;
if ( $.data(form, "submit") ) > "" return false;
$.data(form, "submit", "in progress");
// .. the rest of your handler
}
If you want to allow the form to submitted again later, remove the .data() on success.

Use the .destroy() method.
This question and its answers are quite old. So since that time, the developer has added a .destroy() method to detach the validation plugin from the form.
Destroys this instance of validator freeing up resources and unregistering events.
// Initialize the validation plugin on your form
var validator = $("#myform").validate();
// Remove validation from your form
validator.destroy();
// After this point `#myform` is back to its original state without validation.
https://jqueryvalidation.org/Validator.destroy/
To stop multiple submissions, disable the submit button within the plugin's submitHandler function. (The submitHandler only fires when the form is valid and you've already clicked the submit button.)
submitHandler: function(form) {
// validation & submit success, so disable submit button
$("#yourSubmitButton").prop('disabled', true);
// your ajax code here
return false;
}

Finalizing editing in jqgrid

I using jqgrid with great succes in the following way:
The data is loaded from the server as JSON
The user do inline editing
When a save-button is clicked all the data is serialized using:
var data = $("#mygrid").getRowData();
var datajson = JSON.stringify(data);
The problem with this aproach is that I will get the input elements in my json-data if the user has not pressed return or moved away from the edited cell. Is there any way to end edit mode i jqgrid?

You can use saveRow to save the data.
To use saveRow you have to know the row id of the current editable row. You can for example save the rowid of the current editing in a variable (before you call editRow) and use the value for calling of the saveRow method.
UPDATED: see the demo. First select some row, modify the values and then click on the "Save current editing row" button. You will see that the changes will be saves.

I have solved it by triggering "keydown" ENTER event on element:
editoptions: {
dataInit: function(elem) {
$(elem).datetimepicker({
dateFormat: "yy-mm-dd",
onClose: function(datetimeText, datepickerInstance) {
$(elem).trigger($.Event( "keydown", { keyCode: $.ui.keyCode.ENTER } ))
}
});
}
}

I use remote submit for each cell, and as I used "contenteditable" div for cell editor (for multiline text), i wanted to finish cell editing with ctrl-enter.
( Based on Oleg's answer and How to close cell-editor? and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing )
$(document).ready(function() {
var grid,currentCell;
$(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) {
if (e.ctrlKey && e.keyCode == 13)
{
grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol);
return false;
}
return true;
});
grid=$("#table_list_2");
grid.jqGrid({
url: ...
cellEdit: true,
cellsubmit: 'remote',
cellurl: '..',
beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
currentCell={
rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol
}
}
});
});

jqGrid with an editable checkbox column

When using jqGrid how do you force a cell to load in its editable view on page load as well as when it is clicked?
If you set up 'cell editing' like below, the check box only appears when you click on the cell.
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
Also on clicking checkbox, is there a way of sending a AJAX post to server instantly rather than having to rely on the user pressing enter?

To allow the checkboxes to always be click-able, use the checkbox formatter's disabled property:
{ name: 'MyCol', index: 'MyCol',
editable:true, edittype:'checkbox', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
To answer your second question, you will have to setup an event handler for the checkboxes, such that when one is clicked a function is called to, for example, send an AJAX POST to the server. Here is some example code to get you started. You can add this to the loadComplete event:
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});

This is an old one but has a lot of view so I decided to add my solution here too.
I'm making use of the .delegate function of JQuery to create a late binding implementation that will free you from the obligation of using the loadComplete event.
Just add the following:
$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });
This will late bind that handler to every checkbox that's on the grid rows.
You may have a problem here if you have more than one checkbox column.

I had the same problem and I suppose that I found a good solution to handle checkbox click immediately. The main idea is to trigger editCell method when user clicks on the non-editable checkbox. Here is the code:
jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
//I use edit-cell class to differ editable and non-editable checkbox
if(!$(this).parent('td').hasClass('edit-cell')){
//remove "checked" from non-editable checkbox
$(this).attr('checked',!($(this).attr('checked')));
jQuery("#grid").editCell(iRow,iCol,true);
}
});
Except this, you should define events for your grid:
afterEditCell: function(rowid, cellname, value, iRow, iCol){
//I use cellname, but possibly you need to apply it for each checkbox
if(cellname == 'locked'){
//add "checked" to editable checkbox
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
//trigger request
jQuery("#grid").saveCell(iRow,iCol);
}
},
afterSaveCell: function(rowid, cellname, value, iRow, iCol){
if(cellname == 'locked'){
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
}
},
Then your checkbox will send edit requests every time when user clicks on it.

I have one submit function that sends all grid rows to webserver.
I resolved this problem using this code:
var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
checkboxFix.push($(this).attr('checked'));
});
Then I mixed with values got from the code below.
$("#jqTable").jqGrid('getGridParam', 'data');
I hope it helps someone.

I had shared a full code at the link below, you can take a look if you need it.
http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Better solution:
<script type="text/javascript">
var boxUnformat = function ( cellvalue, options, cell ) { return '-1'; },
checkboxTemplate = {width:40, editable:true,
edittype: "checkbox", align: "center", unformat: boxUnformat,
formatter: "checkbox", editoptions: {"value": "Yes:No"},
formatoptions: { disabled: false }};
jQuery(document).ready(function($) {
$(document).on('change', 'input[type="checkbox"]', function(e){
var td = $(this).parent(), tr = $(td).parent(),
checked = $(this).attr('checked'),
ids = td.attr('aria-describedby').split('_'),
grid = $('#'+ids[0]),
iRow = grid.getInd(tr.attr('id'));
iCol = tr.find('td').index(td);
grid.editCell(iRow,iCol,true);
$('input[type="checkbox"]',td).attr('checked',!checked);
grid.saveCell(iRow,iCol);
});
});
</script>
In your colModel:
...
{name:'allowAccess', template: checkboxTemplate},
...