Disabling check box and uncheck it using jQuery - javascript
In below code I am dynamically generating td elements in for loop.
jQuery("#dialog_load_content").load(url, function() {
var clientName = jQuery('#client option:selected').text();
var clientId = Number(jQuery('#client option').filter(function() {return jQuery(this).html() == clientName;}).val());
var navDate = jQuery('input:checkbox:checked.signOff').closest('tr').find('td:eq(2)').html();
var fundName = jQuery('input:checkbox:checked.signOff').closest('tr').find('td:eq(0)').html();
var fundId = Number(jQuery('#fund option').filter(function() {return jQuery(this).html() == fundName;}).val());
jQuery.post('getNavPackReportsStatus', {clientId: clientId, fundId: fundId, periodEndDate: navDate}, function(data) {
var reports = data;
for(var count = 0; count< reports.length; count++) {
jQuery('#wrkbkRptTable tbody').append('<tr>' +
'<td><input type="checkbox" id="'+reports[count].reportStoreId+'" name="'+reports[count].reportName+'" checked/></td>'+
'<td>' + (count + 1) + '</td>'+
'<td>' + reports[count].reportGroupDisplayName + '</td>'+
'<td>' + reports[count].reportName + '</td>'+
'<td id="chkReportID">' + ((reports[count].reportStoreId == null || reports[count].reportStoreId == '') ? '<font color="red">Not Available</font>' : '<font color="green">Available</font>') + '</td>'+
'</tr>');
}
});
});
I tried to disable check box and uncheck check box using this, but it's not working
jQuery('#wrkbkRptTable input:checked').each(function() {
var test=jQuery('#wrkbkRptTable input:checked').attr('id');
if(test==null || test=='' || test=='undefined')
{
alert(test);
jQuery("#"+test+"").prop( "disabled", true );
}
});
I want to disable check box and uncheck it using first td (id attribute value) like
this: if (id == null then disable & uncheck it)
Try this
jQuery.each( jQuery('#wrkbkRptTable input:checked'), function(_, item) {
var item = jQuery(item);
var id = item.attr('id');
if (typeof id == 'undefined') {
item.attr('checked', false);
item.attr('disabled', true);
}
} )
This code will receive all checked checkboxes. Then it will test if item's ID is present. If not, it will uncheck current checkbox and disable it.
try something like this
$(document).ready(function() {
jQuery('#wrkbkRptTable input:checked').each(function() {
var test = this.id;
if(test==null || test=='undefined' || test.trim()=='')
{
this.checked = false;
this.disabled = true;
}
});
});
Use firebug aor chrome debugger to debug this.Your code for disabling checkbox is right.
I guess the conditions in if are not quite fit
if(test==null || test=='' || test=='undefined')
{
// means not got test
}
try this
if(test)
{
// ur codes
}
jQuery('#wrkbkRptTable input:checked').each(function() {
var test=jQuery(this).attr('id');
if(!test)
{
alert(test);
jQuery(this).prop( "disabled", true );
}
});
Related
show and hide element options for my case
I'm having a little bit of difficulties when I need to hide an element on a page.
I am using this script to create my multiselect dropdown element which is the main controller for the elements on the page (http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1).
It returns an array of selected elements and my elements have their showIfValues set in a JSON file.
My functions should do this:
I get selected values from the dropdown element in array (ex. ["value1", "value2"]).
Going through all the elements and find where in showIfValue is any value from the array above, show it
In the change of the multiselect dropdown, if any of the fields are removed, remove the element but leave the rest on the page.
Legend in showHideHendler function:
inp is the id of the input field I would like to show on the page
controlInp is the control input (in this case multiselect dropdown)
value is the array populated with the showIfValues from JSON file of the elements
So far I made it here. These are the things I have implemented.
function diffArray(arr1, arr2) {
return arr1.concat(arr2).filter(function (val) {
if (!(arr1.includes(val) && arr2.includes(val)))
return val;
});
}
function getSelectedValues(controlInput){
if($('#' + controlInput).attr("multiple") === "multiple"){
// var selectValues = $('#' + controlInput).multipleSelect("getSelects");
var selectValues = [];
if($('#' + controlInput).multipleSelect("getSelects") != null) {
selectValues = $('#' + controlInput).multipleSelect("getSelects");
}
return selectValues;
}
}
var multipleShowHideHandler = (function() {
var selectedValues = [];
function setSelectedValues(value){
selectedValues.push(value);
}
function overrideSelected(value){
selectedValues = value;
}
function getSelectedValues(){
return selectedValues;
}
return {
setSelectedValues: setSelectedValues,
getSelectedValues: getSelectedValues,
overrideSelected: overrideSelected
}
})();
function showHideHandler(inp, controlInp, value) {
if (!$('#' + controlInp).is(':checkbox') && !($.isArray(value))) {
value = $.makeArray(value);
}
var selectedValues = getSelectedValues(controlInp);
if(($('#' + controlInp).attr("multiple") === "multiple") && !$.isEmptyObject(selectedValues)){
$('#' + controlInp).change(function(){
var oldState = multipleShowHideHandler.getSelectedValues();
var selectedValues = getSelectedValues(controlInp);
if($.isEmptyObject(oldState)){
$.each(selectedValues, function(i, val){
multipleShowHideHandler.setSelectedValues(val);
});
}
var differentArray = diffArray(selectedValues, oldState);
if(!$.isEmptyObject(differentArray)){
if(($.inArray(differentArray[0], value) !== -1)){
$('#' + inp + 'Container').hide();
}
multipleShowHideHandler.overrideSelected(selectedValues);
}
//check diff
/*if(!$.isEmptyObject(selectedValues) && !$.isEmptyObject(oldState)){
var diff = diffArray(selectedValues, oldState);
}*/
$.each(selectedValues, function(i, val){
if(($.inArray(val, value) !== -1)){
$('#' + inp + 'Container').show();
}
});
});
}else if (($.inArray($('#' + controlInp).val(), value) > -1) || $('#' + controlInp).prop('checked') === value) {
$('#' + inp + 'Container').show();
} else {
$('#' + inp + 'Container').hide();
}
}
This works on some elements, but the moment it overrides my oldState the fields are not hidden.
Any kind of help is much appreciated. Thanks in advance.
After looking and trying many things, I have found that the easiest way is basically to remove all elements and show them again on any change of the multiple select dropdown element.
So the final code looks like this:
if(($('#' + controlInp).attr("multiple") === "multiple") && !$.isEmptyObject(selectedValues)){
$('#' + controlInp).change(function(){
var selectedValues = getSelectedValues(controlInp);
if(!$.isEmptyObject(selectedValues)){
$('#' + inp + 'Container').hide();
$.each(selectedValues, function(i, val){
if(($.inArray(val, value) !== -1)){
$('#' + inp + 'Container').show();
}
});
}else{
$('#' + inp + 'Container').hide();
}
});
}
There is no need to add a before state and after so this is the only thing I need.
DiffArray and multipleShowHideHandler are no longer needed.
Hope this helps someone in the future.
SyntaxError: let is a reserved identifier on firefox
I am using those code below
'use strict';
jQuery(document).ready(function($) {
function CMB2ConditionalsInit(context) {
if(typeof context === 'undefined') {
context = 'body';
}
$('[data-conditional-id]', context).each(function(i, e) {
var $e = $(e),
id = $e.data('conditional-id'),
value = $e.data('conditional-value');
var $element = $('[name="' + id + '"]'),
$parent = $e.parents('.cmb-row:first').hide();
$e.data('conditional-required', $e.prop('required')).prop('required', false);
$element
.on('change', function(evt){
let conditionValue = CMB2ConditionalsStringToUnicode(evt.currentTarget.value);
if(typeof value === 'undefined') {
CMB2ConditionalToggleRows('[data-conditional-id="' + id + '"]', ($element.val() ? true : false));
} else {
CMB2ConditionalToggleRows('[data-conditional-id="' + id + '"]:not([data-conditional-value="' + conditionValue + '"])', false);
CMB2ConditionalToggleRows('[data-conditional-id="' + id + '"][data-conditional-value="' + conditionValue + '"]', true);
CMB2ConditionalToggleRows('[data-conditional-id="' + id + '"][data-conditional-value*=\'"' + conditionValue + '"\']', true);
}
});
if($element.length === 1) {
$element.trigger('change');
} else {
$element.filter(':checked').trigger('change');
}
});
}
function CMB2ConditionalsStringToUnicode(string){
let result = '', map = ["Á", "Ă","Ắ","Ặ","Ằ","Ẳ","Ẵ","Ǎ","Â","Ấ","Ậ","Ầ","Ẩ","Ẫ","Ä","Ǟ","Ȧ","Ǡ","Ạ","Ȁ","À","Ả","Ȃ","Ā","Ą","Å","Ǻ","Ḁ","Ⱥ","Ã","Ꜳ","Æ","Ǽ","Ǣ","Ꜵ","Ꜷ","Ꜹ","Ꜻ","Ꜽ","Ḃ","Ḅ","Ɓ","Ḇ","Ƀ","Ƃ","Ć","Č","Ç","Ḉ","Ĉ","Ċ","Ƈ","Ȼ","Ď","Ḑ","Ḓ","Ḋ","Ḍ","Ɗ","Ḏ","Dz","Dž","Đ","Ƌ","DZ","DŽ","É","Ĕ","Ě","Ȩ","Ḝ","Ê","Ế","Ệ","Ề","Ể","Ễ","Ḙ","Ë","Ė","Ẹ","Ȅ","È","Ẻ","Ȇ","Ē","Ḗ","Ḕ","Ę","Ɇ","Ẽ","Ḛ","Ꝫ","Ḟ","Ƒ","Ǵ","Ğ","Ǧ","Ģ","Ĝ","Ġ","Ɠ","Ḡ","Ǥ","Ḫ","Ȟ","Ḩ","Ĥ","Ⱨ","Ḧ","Ḣ","Ḥ","Ħ","Í","Ĭ","Ǐ","Î","Ï","Ḯ","İ","Ị","Ȉ","Ì","Ỉ","Ȋ","Ī","Į","Ɨ","Ĩ","Ḭ","Ꝺ","Ꝼ","Ᵹ","Ꞃ","Ꞅ","Ꞇ","Ꝭ","Ĵ","Ɉ","Ḱ","Ǩ","Ķ","Ⱪ","Ꝃ","Ḳ","Ƙ","Ḵ","Ꝁ","Ꝅ","Ĺ","Ƚ","Ľ","Ļ","Ḽ","Ḷ","Ḹ","Ⱡ","Ꝉ","Ḻ","Ŀ","Ɫ","Lj","Ł","LJ","Ḿ","Ṁ","Ṃ","Ɱ","Ń","Ň","Ņ","Ṋ","Ṅ","Ṇ","Ǹ","Ɲ","Ṉ","Ƞ","Nj","Ñ","NJ","Ó","Ŏ","Ǒ","Ô","Ố","Ộ","Ồ","Ổ","Ỗ","Ö","Ȫ","Ȯ","Ȱ","Ọ","Ő","Ȍ","Ò","Ỏ","Ơ","Ớ","Ợ","Ờ","Ở","Ỡ","Ȏ","Ꝋ","Ꝍ","Ō","Ṓ","Ṑ","Ɵ","Ǫ","Ǭ","Ø","Ǿ","Õ","Ṍ","Ṏ","Ȭ","Ƣ","Ꝏ","Ɛ","Ɔ","Ȣ","Ṕ","Ṗ","Ꝓ","Ƥ","Ꝕ","Ᵽ","Ꝑ","Ꝙ","Ꝗ","Ŕ","Ř","Ŗ","Ṙ","Ṛ","Ṝ","Ȑ","Ȓ","Ṟ","Ɍ","Ɽ","Ꜿ","Ǝ","Ś","Ṥ","Š","Ṧ","Ş","Ŝ","Ș","Ṡ","Ṣ","Ṩ","Ť","Ţ","Ṱ","Ț","Ⱦ","Ṫ","Ṭ","Ƭ","Ṯ","Ʈ","Ŧ","Ɐ","Ꞁ","Ɯ","Ʌ","Ꜩ","Ú","Ŭ","Ǔ","Û","Ṷ","Ü","Ǘ","Ǚ","Ǜ","Ǖ","Ṳ","Ụ","Ű","Ȕ","Ù","Ủ","Ư","Ứ","Ự","Ừ","Ử","Ữ","Ȗ","Ū","Ṻ","Ų","Ů","Ũ","Ṹ","Ṵ","Ꝟ","Ṿ","Ʋ","Ṽ","Ꝡ","Ẃ","Ŵ","Ẅ","Ẇ","Ẉ","Ẁ","Ⱳ","Ẍ","Ẋ","Ý","Ŷ","Ÿ","Ẏ","Ỵ","Ỳ","Ƴ","Ỷ","Ỿ","Ȳ","Ɏ","Ỹ","Ź","Ž","Ẑ","Ⱬ","Ż","Ẓ","Ȥ","Ẕ","Ƶ","IJ","Œ","ᴀ","ᴁ","ʙ","ᴃ","ᴄ","ᴅ","ᴇ","ꜰ","ɢ","ʛ","ʜ","ɪ","ʁ","ᴊ","ᴋ","ʟ","ᴌ","ᴍ","ɴ","ᴏ","ɶ","ᴐ","ᴕ","ᴘ","ʀ","ᴎ","ᴙ","ꜱ","ᴛ","ⱻ","ᴚ","ᴜ","ᴠ","ᴡ","ʏ","ᴢ","á","ă","ắ","ặ","ằ","ẳ","ẵ","ǎ","â","ấ","ậ","ầ","ẩ","ẫ","ä","ǟ","ȧ","ǡ","ạ","ȁ","à","ả","ȃ","ā","ą","ᶏ","ẚ","å","ǻ","ḁ","ⱥ","ã","ꜳ","æ","ǽ","ǣ","ꜵ","ꜷ","ꜹ","ꜻ","ꜽ","ḃ","ḅ","ɓ","ḇ","ᵬ","ᶀ","ƀ","ƃ","ɵ","ć","č","ç","ḉ","ĉ","ɕ","ċ","ƈ","ȼ","ď","ḑ","ḓ","ȡ","ḋ","ḍ","ɗ","ᶑ","ḏ","ᵭ","ᶁ","đ","ɖ","ƌ","ı","ȷ","ɟ","ʄ","dz","dž","é","ĕ","ě","ȩ","ḝ","ê","ế","ệ","ề","ể","ễ","ḙ","ë","ė","ẹ","ȅ","è","ẻ","ȇ","ē","ḗ","ḕ","ⱸ","ę","ᶒ","ɇ","ẽ","ḛ","ꝫ","ḟ","ƒ","ᵮ","ᶂ","ǵ","ğ","ǧ","ģ","ĝ","ġ","ɠ","ḡ","ᶃ","ǥ","ḫ","ȟ","ḩ","ĥ","ⱨ","ḧ","ḣ","ḥ","ɦ","ẖ","ħ","ƕ","í","ĭ","ǐ","î","ï","ḯ","ị","ȉ","ì","ỉ","ȋ","ī","į","ᶖ","ɨ","ĩ","ḭ","ꝺ","ꝼ","ᵹ","ꞃ","ꞅ","ꞇ","ꝭ","ǰ","ĵ","ʝ","ɉ","ḱ","ǩ","ķ","ⱪ","ꝃ","ḳ","ƙ","ḵ","ᶄ","ꝁ","ꝅ","ĺ","ƚ","ɬ","ľ","ļ","ḽ","ȴ","ḷ","ḹ","ⱡ","ꝉ","ḻ","ŀ","ɫ","ᶅ","ɭ","ł","lj","ſ","ẜ","ẛ","ẝ","ḿ","ṁ","ṃ","ɱ","ᵯ","ᶆ","ń","ň","ņ","ṋ","ȵ","ṅ","ṇ","ǹ","ɲ","ṉ","ƞ","ᵰ","ᶇ","ɳ","ñ","nj","ó","ŏ","ǒ","ô","ố","ộ","ồ","ổ","ỗ","ö","ȫ","ȯ","ȱ","ọ","ő","ȍ","ò","ỏ","ơ","ớ","ợ","ờ","ở","ỡ","ȏ","ꝋ","ꝍ","ⱺ","ō","ṓ","ṑ","ǫ","ǭ","ø","ǿ","õ","ṍ","ṏ","ȭ","ƣ","ꝏ","ɛ","ᶓ","ɔ","ᶗ","ȣ","ṕ","ṗ","ꝓ","ƥ","ᵱ","ᶈ","ꝕ","ᵽ","ꝑ","ꝙ","ʠ","ɋ","ꝗ","ŕ","ř","ŗ","ṙ","ṛ","ṝ","ȑ","ɾ","ᵳ","ȓ","ṟ","ɼ","ᵲ","ᶉ","ɍ","ɽ","ↄ","ꜿ","ɘ","ɿ","ś","ṥ","š","ṧ","ş","ŝ","ș","ṡ","ṣ","ṩ","ʂ","ᵴ","ᶊ","ȿ","ɡ","ᴑ","ᴓ","ᴝ","ť","ţ","ṱ","ț","ȶ","ẗ","ⱦ","ṫ","ṭ","ƭ","ṯ","ᵵ","ƫ","ʈ","ŧ","ᵺ","ɐ","ᴂ","ǝ","ᵷ","ɥ","ʮ","ʯ","ᴉ","ʞ","ꞁ","ɯ","ɰ","ᴔ","ɹ","ɻ","ɺ","ⱹ","ʇ","ʌ","ʍ","ʎ","ꜩ","ú","ŭ","ǔ","û","ṷ","ü","ǘ","ǚ","ǜ","ǖ","ṳ","ụ","ű","ȕ","ù","ủ","ư","ứ","ự","ừ","ử","ữ","ȗ","ū","ṻ","ų","ᶙ","ů","ũ","ṹ","ṵ","ᵫ","ꝸ","ⱴ","ꝟ","ṿ","ʋ","ᶌ","ⱱ","ṽ","ꝡ","ẃ","ŵ","ẅ","ẇ","ẉ","ẁ","ⱳ","ẘ","ẍ","ẋ","ᶍ","ý","ŷ","ÿ","ẏ","ỵ","ỳ","ƴ","ỷ","ỿ","ȳ","ẙ","ɏ","ỹ","ź","ž","ẑ","ʑ","ⱬ","ż","ẓ","ȥ","ẕ","ᵶ","ᶎ","ʐ","ƶ","ɀ","ff","ffi","ffl","fi","fl","ij","œ","st","ₐ","ₑ","ᵢ","ⱼ","ₒ","ᵣ","ᵤ","ᵥ","ₓ"];
for(let i = 0; i < string.length; i++){
if(jQuery.inArray(string[i], map) === -1) {
result += string[i]
} else {
result += "\\\\u" + ("000" + string[i].charCodeAt(0).toString(16)).substr(-4);
}
}
return result;
};
function CMB2ConditionalToggleRows(obj, showOrHide){
var $elements = (obj instanceof jQuery) ? obj : $(obj);
return $elements.each(function(i, e) {
let $e = $(e);
$e.prop('required', showOrHide && $e.data('conditional-required'));
$e.parents('.cmb-row:first').toggle(showOrHide);
});
}
CMB2ConditionalsInit('#post');
});
But it is giving me error below
After searched stackoverflow, I got that it will not work on firefox. Is there any way to fix it?
BTW, other browser working fine. Thanks in advance.
As you can see the let keyword isn't supported on FF yet: https://kangax.github.io/compat-table/es6/ You will need to change it to var, or transpile your code with babel
Multiselect Detect Option Selected and Deselected On Change
I want to check the if the changed state of a multiselect is deselect or select.
pseudo-code:
$(document).on('change', '.mySelect', function (event) {
if(event === 'selected'){
alert("You have selected this item.");
} else {
alert("You have deselected this item.");
}
});
Something like this doesn't work. How can i check weather the event was a "select" event or a "deselect" event?
EDIT
Here is a jsfiddle DEMO
Try saving the current state of the select element on change:
http://jsfiddle.net/Wexcode/a4mf8akj/5/
function wasDeselected (sel, val) {
if (!val) {
return true;
}
return sel && sel.some(function(d) { return val.indexOf(d) == -1; })
}
$(document).on('change', 'select', function (event) {
var message,
$select = $(event.target),
val = $select.val(),
sel = $('select').data('selected');
// Store the array of selected elements
$select.data('selected', val);
// Check the previous and current val
if ( wasDeselected(sel, val) ) {
message = "You have deselected this item.";
} else {
message = "You have selected this item.";
}
alert(message);
});
The trick is to track the selected options length ..
var $select = $('select');
$select.change(function () {
// Last saved state;
var lastState = $(this).data('total'),
// New state;
changedState = $(this).find('option:selected').length,
txt = (lastState < changedState ?
'selected' : (
lastState > changedState ?
'Deselected' :
'Only one option is selected'));
// save state
$(this).data('total', changedState);
$('#console').append('<p>' + lastState + ' => ' + changedState + '<span>' + txt + '</span></p>');
// Initializing tracker
}).data('total', $select.find('option:selected').length);
Try this here
Custom JQuery dynamic link creation
I'm pretty new to js and having a hard time figuring out the best way to generate a custom url depending on what links are selected. You can view what I have done here. http://jsfiddle.net/1fz50z1y/26/ I will also paste my info here.
var products = [];
var quantity = [];
qstring = '';
$('input.product-radio, select.products-howmany').change(function() {
var $this = $(this)
var $product = $(this).closest('.product-options-left');
var $radio = $product.find('input.product-radio');
var $select = $product.find('select.products-howmany')
var qid = $select.val();
var pid = $radio.val();
currentStatus = $radio.prop('checked'),
theString = '';
qString = '';
pString = '';
if (currentStatus) {
products.push(pid);
quantity.push(qid);
if ($product.find('div.quantity').removeClass('q-hidden')) {
//code
}
} else {
products.splice(products.indexOf(pid), 1);
quantity.splice(quantity.indexOf(qid), 1);
$product.find('div.quantity').addClass('q-hidden');
}
if ((products.length > -1) || (quantity.length > -1)) {
if ((products.length === 0) || (quantity.length === 0)) {
console.log("Q Length: " + quantity.length);
pString += products[0];
qString += quantity[0];
console.log("qString = " + quantity);
} else {
pString = products.join('-p');
qString = quantity.join('_q');
if (quantity.length > 1) {
qString = quantity.splice(quantity.indexOf(qid), 1);
pString = products.splice(products.indexOf(pid), 1);
}
console.log("+ Q Length: " + quantity.length);
console.log("ADDING " + "p" + pString + "_q" + qString);
}
if ((qString == 'undefined') || (pString == 'undefined')) {
$('a.options-cart').prop("href", "#");
} else {
//$('a.options-cart').prop("href", "/cart/add/p" + theString + "_q" + qstring + "?destination=/cart");
//$('a.options-cart').prop("href", "/cart/add/p" + theString + "?destination=/cart");
$('a.options-cart').prop("href", "/cart/add/p" + pString + "_q" + qString + "?destination=/cart");
}
}
});
$('a.options-cart').click(function() {
alert(qstring);
var $this = $(this);
href = $this.attr('href');
if (href == '#') {
alert("You must select a product.");
return false;
}
});
When you click on the add link icon it displays a drop down where you can select the quantity. So changing the quantity should also update the link and how it is created. I am trying to figure out how to create the link so the end result looks like so.
cart/add/p123_q1?destination=/cart this is how it would look with a single item. Where p = the product ID and q = the quantity. Unclicking the add to cart should remove those items and changing the drop down should update the quantity. If there is more than one item it should append to the link like so. cart/add/p123_q1-p234_q2-p232_q4?destination=/cart and then unclicking or changing quantity on any of those items should reflect the change in the link. I am not sure if I am going about this all wrong but I have been trying forever and many different routes to go about trying to achieve this effect. If anyone could please help me figure this out I would be greatly appreciated!
I was able to get this to work properly using this piece of code. Hope this maybe helps someone.
$('input.product-radio, select.products-howmany').change(function () {
var $product = $(this).closest('.product-options-left');
var $radio = $product.find('input.product-radio');
var $select = $product.find('select.products-howmany')
$product.find('div.quantity').toggleClass('q-hidden', !$radio.prop('checked'));
$product.find('label.quantity').toggleClass('q-hidden', !$radio.prop('checked'));
var string = $('.product-radio')
.filter(':checked')
.map(function(){
return $(this)
.closest('.product-options-left')
.find('.products-howmany')
.val();
})
.get()
.join('-');
$('a.options-cart').prop("href", "/cart/add/" + string + "?destination=/cart");
});
$('a.options-cart').click(function() {
alert(qstring);
var $this = $(this);
href = $this.attr('href');
if (href == '#') {
alert("You must select a product.");
return false;
}
});
How to write the keypress event in Jquery/ Javascript?
I am new to Jquery and Javascript. Need a help regarding this problem:
There is a div named Profile , If I click that then a new popup window will open. Now this is only possible by a mouse click. I need it to be done by key press (enter) also.
JSP CODE FOR THE DIV
<div tabindex="0" style="text-decoration:underline" onmouseover="this.style.cursor='pointer';" id="<%=namespace%>_pmProfileName_<%=i%>_" onclick="perfChartConfig_<%=namespace%>.doShowProfilesForElement(this);">Profile</div>
JQUERY/JAVASCRIPT CODE
doShowProfilesForElement : function(source){
var callback = {
success : function(r) {
MO.globals.popups.hideWorkingMsg();
this.argument[0].pe = eval("("+r.responseText+")");
var pe = this.argument[0].pe;
var pStr = '';
if(this.argument[1].indexOf("pmProfileName") > 0){
if(pe == null || pe._mosol_AllPerfProfileNames.length==0){
pStr = pStr + "<li>There are no profiles available for the element you selected.</li>";
} else {
for(var i=0; i<pe._mosol_AllPerfProfileNames.length;i++){
var profile = pe._mosol_AllPerfProfileNames[i];
var onClick = "onClick=\"perfChartConfig_<%=namespace%>.doProfileSelection(this,'"+this.argument[1]+"');\"";
pStr = pStr + "<div style=\"text-decoration:underline\" onmouseover=\"this.style.cursor='pointer';\" "+onClick+" >"+profile+"</div>";
//alert('For profile ['+profile+'] there are '+pe[profile].length+' expressions.');
}
}
}
if(this.argument[1].indexOf("slaProfileName") > 0){
if(pe == null || pe.offers.length==0){
pStr = pStr + "<li>There are no SLAs available for the element you selected.</li>";
} else {
for(var i=0; i<pe.offers.length;i++){
var profile = pe.offers[i];
var onClick = "onClick=\"perfChartConfig_<%=namespace%>.doProfileSelection(this,'"+this.argument[1]+"');\"";
pStr = pStr + "<div style=\"text-decoration:underline\" onmouseover=\"this.style.cursor='pointer';\" "+onClick+" >"+profile+"</div>";
}
}
}
var rp = perfChartConfig_<%=namespace%>.rp;
rp.setHeader("Select a Profile you want to chart:");
rp.setBody(pStr);
rp.render();
rp.show();
},
failure : function(r) {
MO.globals.popups.hideWorkingMsg();
MO.globals.popups.showMsg("Error", "<h2><span class=\"portlet-msg-error\">Your submission failed</span>"+"<br />Status: " + r.status + "</h2>");
},
argument: [this, source.id]
};
Would you tell me how to write the function for keypress(enter) ?
bind the keypress or keyup event with you div
<div tabindex="0" class="someClass" style="text-decoration:underline" onmouseover="this.style.cursor='pointer';" id="<%=namespace%>_pmProfileName_<%=i%>_" onclick="perfChartConfig_<%=namespace%>.doShowProfilesForElement(this);">Profile</div>
add some class
$("div.someClass").bind("keyup",function(e){
if(e.keyCode == 13)
{
$(this).click();
}
});
$("#Profile").keyup(function(e){
var code = e.which;
if(code==13){
e.preventDefault();
//Do Stuff
}
});