Develop Reference

how can i make exception on jqgrid multiselection?

jQuery("#grid").jqGrid({
datatype: "local",
width:'auto',
height: 'auto',
multiselect:true,
colNames:[
'no'
],
colModel:[
{name:'no', align:'right', width:70}
],
beforeSelectRow: function(rowid, e) {
if($("#grid>tbody tr").eq(rowid).children().eq(3).text()=="unused"){
return true;
}else{
return false;
}
}
loadComplete: function(data) {
$("#grid").parents('div.ui-jqgrid-bdiv').css("max-height","250px");
},
});
i don't want to select skyblue part.
so i removed its checkbox.
but when i select all, even skyblue part doesn't have checkbox, it's still selected.
how can i solve this problem?

If you add a disabled class to this row, it will be not selected either with user input and when you click SelectAll - in this case you do not need to remove the check box.
If you use jQuery UI css the class is named ui-state-disabled
If You use Bootstrap 3,4,5 the class is named ui-disabled

How to save the user input data from a dialog box into a hidden field: Jquery and HTML

I have been working on this button that opens a dialog box containing an option-selecting table when clicked on. The thing is, I want the data input by the customer to be saved in a hidden field.
I have tried targeting the speicific field with getElementById, but I have no idea how to check whether or not it worked.
$(function() {
$("#opener").click(function() {
($("#table").dialog("isOpen") == false) ? $("#table").dialog("open") : $("#table").dialog("close") ;
});
$("#table").dialog({
autoOpen: false,
width: 300,
height: 250,
position: ['center',100],
buttons: {
Abbrechen: function() {
$(this).dialog("close");
},
Fertig: function() {
$('input[name="hfield"').val($("#safety_gear_select").val());
$(this).dialog("close");
}
},
});
Does anyone know how can I achieve this? TIA

I found a solution, hopefully it will help someone else too.
This is what I added to my button's code, where 'hfield1' is the name of the hidden field I want the data saved in and the #safety_gear_select is the id of the select field containing the input I wanna save in the hidden field.
It displays the name of the choice in the console rather than the index number, but that can easily be achieved too by replacing .html() with .val()
Fertig: function() {
$('input[name="hfield1"').val($("#safety_gear_select option:selected").html());
$('input[name="hfield2"').val($("#pawl_device_select option:selected").html() );
$('input[name="hfield3"').val($("#buffer_select option:selected").html() );
$(this).dialog("close");
}

Semantic-ui: checkbox onDisable function couldn't be called

My code is using the semantic-ui checkbox module. I have a checkbox. I need to call a function after the state of the checkbox changed. Just like the jQuery checkbox change function. But when I use semantic-ui checkbox, I just can't call the 'onDisable' function. And I always got the state of checkbox before it changed. But I just want to get the checkbox state after it changed.
HTML code
<div class="ui checkbox">
<input type="checkbox" name="high" > <label>High</label>
</div>
Javascript:
var $checkbox = $(".ui.checkbox input");
$checkbox.checkbox({
onEnable: function() {
console.log("onEnable!" + $checkbox.prop("checked"));
},
onDisable: function() {
console.log("onDisable!" + $checkbox.prop("checked"));
},
onChange: function() {
console.log("onChange!" + $checkbox.prop("checked"));
}
});
The usage of semantic-ui checkbox can be seen here.
when I click the checkbox (the checkbox state is checked), it always display
onChange!true
onEnable!true
I just want
onChange!false
onEnable!false
And when I click the checkbox (the checkbox state is unchecked), it always display
onChange!false
onEnable!false
And I just want
onChange!true
onEnable!true
Turns out that the semantic-ui checkbox callback function didn't match what I need.
My question is :
1.Why the 'onDisable' function isn't be called?
2.How can I use semantic-ui checkbox like jQuery checkbox onchange function?

I was having the same problem with the selector. Semantic UI's checkbox works against the containing div, not the input. The following isn't optimal, but works
var $cont = $(".ui.checkbox");
var $checkbox = $(".ui.checkbox input");
$cont.checkbox({
onEnable: function() {
console.log("onEnable!" + $checkbox.prop("checked"));
},
onDisable: function() {
console.log("onDisable!" + $checkbox.prop("checked"));
},
onChange: function(x) {
console.log("onChange!" + $checkbox.prop("checked"));
}
});

1/ onDisable and onEnable callbacks are for disabling/enabling the checkbox, not checking/unchecking (there are onChecked and onUnchecked callbacks for them), see the set enabled and set disabled behaviors, related to the input disabled attribute.
2/ documentation says that the context (= this) of the callbacks is the HTML input element, then you can use it as so.
$(function() {
var $checkbox = $(".ui.checkbox");
$checkbox.checkbox({
onEnable: function() {
console.log("onEnable!" + $(this).prop("checked"));
},
onDisable: function() {
console.log("onDisable!" + $(this).prop("checked"));
},
onChange: function() {
console.log("onChange!" + $(this).prop("checked"));
}
});
$('#disable').click(function() {
$checkbox.checkbox('set disabled');
});
$('#enable').click(function() {
$checkbox.checkbox('set enabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />
<script src="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.js"></script>
<div class="ui checkbox">
<input type="checkbox" name="high">
<label>High</label>
</div>
disable
enable
By the way, the onEnable and onDisable callbacks seems not to be fired as expected. jsfiddle version : https://jsfiddle.net/gtgco92h/

jqGrid: one radio button per row

I'm trying to setup a column in a jqGrid that has one radio button per row in it, to allow the user to set a single row as the "primary" child of the parent. The following code, however, merely renders empty cells.
I imagine the cells are not being put into 'edit mode' or whatever, which is confusing to me because there's an editable checkbox column on the same grid which just works as desired.
(There's a navButton at the bottom of the grid that saves the state of the grid if that's relevant.)
var createRadioButton = function(value) {
return $("<input type='radio' />", {
name: mySubGridID,
checked: value
}).get();
}
var extractFromRadioButton = function(elem) {
return $(elem).val();
}
$("#grid").jqGrid({
url: '/GetData',
datatype: 'json',
colModel: [
...
{ label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions:
{
custom_element: createRadioButton,
custom_value: extractFromRadioButton
}
},
...
],
...
});
Thanks for any help!

You try to use edittype: 'custom'. This work only in a edit mode (inline editing or form editing). If I correct understand your question you try to add radio button which are displayed in all rows in the corresponding column. So you should use better custom formatter (see here an example). You can bind click event in the loadComplete (see here an example).
I am not sure that I understand why you need to use radio button. If you want use radio buttons only for row selection probably you should consider to use multiselect:true instead. Some small behavior of selection you can change inside of onSelectRow or beforeSelectRow event handler if needed.

I had this same problem with the formatter and had to set a width on the radio button as it was getting set wider than the cell for some reason.
function radioButtonFormatter(cellValue, options, rowObject) {
var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>';
return radioHtml;
}

I needed a simpler solution so I came up with this method which uses the built-in multiselect rather than adding a col to the grid.
...
var gridSelector = $("#myGrid");
//jqGrid code snippet, methods below:
multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
// Allow only one selection
$(gridSelector).jqGrid('resetSelection');
return (true);
},
beforeRequest : function() {
//Remove multi-select check box from grid header
$('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
//Convert grid check boxes to radio buttons
$('input[id^="jqg_myGrid_"]').attr("type", "radio");
},
...
Cheers,

How can I pass an element to a jQuery UI dialog box?

Goal
I've got a web page with a table of items. Each item has a delete button beside it. When that button is clicked, I want to
Ask the user to confirm
Delete the corresponding item from the database
Remove that item's row from the list
Current solution
Right now, I'm doing something like this:
$('button.delete').click(function(){
thisRow = $(this).parent();
itemID = $(this).parent().attr('id');
if (confirm('Are you sure?')){
$.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){
thisRow.hide("slow").remove();
});
}
}
This solution works because each button.delete can determine which row and item it belongs to, and act accordingly.
Desired solution
Instead of the clunky "OK or Cancel" alert box, I'd like to use a jQuery UI dialog box. But I'm not sure how to let the dialog know which row and item it should handle on any given click.
Here's how you set it up:
1) Define a dialog box div
<div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?">
<p>Gee golly, are you s-s-s-sure you want to do that?!</p>
</div>
2) Set up the dialog box behavior
$('#cofirmdeleteitem').dialog({
//other options - not relevant here
buttons: {
"Nevermind": function() {
//do nothing
},
"Alright! Woo!": function(){
//do something
}
}
});
3) Set the click event that will open the dialog
$('button.delete').click(function(){
$('#confirmdeleteitem').dialog('open');
});
In this last step, I'd like to be able to pass some information to the dialog - which delete button was clicked, for example. But I don't see a way to do that.
I could insert a hidden dialog div.dialog into each item row up front, or insert one into a particular row after its button is clicked. Then the $(this).parent() references would grab the correct row...
Is there an easier way to do this?

i do something like this:
function ConfirmationDialog(title, question, options) {
var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>');
d.dialog({
bgiframe: true,
resizable: false,
height: 190,
width: 350,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: options
});
}
and then call my function from the click event.

It ended up being most straightforward to set up the dialog behavior inside the click function itself. Actually, it's not much different than my original example.
$('button.delete').click(function(){
thisRow = $(this).parent().parent();
thisRow.css("background-color","red");
skuid = $(this).parent().parent('tr').attr('id').substr(5);
$('#dialogbox').dialog({
autoOpen: false,
modal: true,
draggable: true,
width: 600,
buttons: {
"Actually, I can just mark it inactive": function() {
thisRow.css("background-color","inherit");
$(this).dialog("close");
},
"This SKU needs to be deleted": function() {
$.post('/intranet/backstage/modify_sku_info.php', {"action":"delete", "skuid":skuid}, function(result){
thisRow.hide("slow").remove();
});
$(this).dialog("close");
}
}
});
$('#dialogbox').dialog('open');
return false;
});
Since div#dialogbox doesn't get hidden until $('#dialogbox').dialog() is called, I just gave it an inline style of display:none.
If I end up needing something that can be generalized, as hyun suggested, I'll revisit the issue.

You could store the row in a global variable, like this:
var deletingId;
$('button.delete').click(function() {
deletingId = $(this).parent().attr('id');
$('#confirmdeleteitem').dialog('open');
});
$('#confirmdeleteitem').dialog({
//other options - not relevant here
buttons: {
"Never mind": function() { },
"Alright! Woo!": function(){
$.post(
'/manage_items.php',
{ action: "delete", itemid: deletingId },
function() {
$('#' + deletingId).hide("slow").remove();
}
);
}
}
});
This will only work if the dialog is modal; otherwise, the user could click two different delete links, and you'd need multiple dialogs.

Why can't you just call a setup method to build the dialog as you see fit?
setupMyDialog( '#confirmdeleteitem', info1, info2 );
$('#confirmdeleteitem').dialog...
Alternatively, just store the information in global space before you show the dialog. Remember that your javascript variables can have global scope, or you can store information arbitrarily on objects/functions (which are just objects).
myDataStore = {};
myDataStore.row = foo;
myDataStore.col = bar;

You could add the "rel" attribute to the dialog and store it there, instead. That way you don't need to worry about global variables, and it's semantically not-too-bad, since you are defining a relationship between the dialog and a row. So it'd just be $('#confirmdeleteitem').attr('rel', $(this).parent().attr('id').dialog('open');