Develop Reference

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");
}

jqgrid checkbox selectable even when beforeSelectRow returns false

In jqgrid with multiselect enabled, even when the beforeSelectRow returns false, the checkbox remains checkable. Is it a bug and if so is there a workaround for this.
$("#grid").jqGrid({
beforeSelectRow: function(rowid, e) {
return false;
}
Usecase here:
http://jsfiddle.net/erduT/1/
http://jsfiddle.net/erduT/2/
Please advice.

It is not exactly a bug, beforeSelectRow in this case is disabling the selection of the row, not the selection of the checkbox. Which is evident in your fiddle since the row itself does not remain highlighted. So in your beforeSelectRow function you are going to have to disable any other UI elements yourself.
Ex.
beforeSelectRow: function(rowid, e) {
$('#jqg_grid_' + rowid).attr("disabled", "disabled");
return false;
},
For working with the Select All/None checkbox you can use the onSelectAll event.
Params: aRowids,status
This event fires when multiselect option is
true and you click on the header checkbox.
aRowids - array of the selected rows (rowid's).
status - boolean variable determining the status of the header check box - true if checked, false if not checked.
Note that the aRowids alway contain the ids when header checkbox is checked or unchecked.
Ex.
onSelectAll: function(aRowids,status) {
if (status) {
$.each(aRowids, function(i, rowid) {
$('#jqg_grid_' + rowid).attr("disabled", "disabled");
});
}
},

how can i set tokeninput parameter on condition as dynamic

I am using tokeninput jquery for autocomplete with asp.net.
http://loopj.com/jquery-tokeninput/
i have one textbox and searching parameter is conditional. this jquery is render on loadtime. there is a checkbox, if checkbox is checked searching parameter wouldbe change and if checkbox is unchecked searching parameter is default parameter. i have called this on ready state.the issue is that when checkbox is checked searching parameter not changed. it search on only one condition as default condition.On ckeckbox click IsPastClass change as true or false.
$(document).ready(function() {
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass=false", {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
Can any one tell me how can i set tokeninput parameter on condition.
Thanks.

Try
$(document).ready(function() {
$('.checkbox').change(function(){
var IsPastClass = this.checked;
$("#txtStudentTokenSearch").tokenInput("clear");
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass="+IsPastClass , {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
$('.checkbox').trigger('change');
});
Hope it helps.

you can use tokenInput with ajax and handler very easly
you can download example from github
https://github.com/yanivsuzana/jquery-tokeninput-ajax-asp.net-vb

Radio Buttons in a jqGrid

Basically, I am trying to include radio buttons in a jqGrid.
I can see that we can use a custom formatter for this.
Following is my code, which does not tell me which radio button is selected/ or whether it is selected or not.
the value is "undefined" all the times.
// The custom formatter definition
function radio(value, options, rowObject){
var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
return radioHtml;
}
// Snippet of the colModel in jqGrid definition
colModel:[
{name:'select', label:'Select', width: 60, align:'center', edittype:'custom',
editable:true, formatter: radio},
{name:'name', label: 'Source Disk Volume', width: 170}],
// The method called on submit
function evaluate() {
// try 1
alert('val: '+$("[name='radioid']:checked").val());
// try 2
tried accessing the checked radio button through simple javascript
}
Please help me access the value of the radio button which is selected by the user.

gridComplete: function () {
$("td[aria-describedby=jqgridName_select] input[type='radio']").click(function () {
alert($(this).val());
});
}

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,