I have javascript creating a generic select box when you double click in a table cell and when an option is clicked, the select box is removed and the option selected is recorded. The table cell displays the option selected.
However, if the table cell is double clicked and the select box is created, but then you just click out of the select box without selecting an option, the select box remains and the rest of the page from then on breaks.
I want the select box to be removed if the focus is lost, but the onblur method that works with input boxes doesn't seem to work with select boxes.
Does anyone know what event is triggered?
Javascript code when table cell is double clicked to make a select box:
var object_input = document.createElement ("SELECT"); //Put an select box in the cell
object_input.setAttribute("name", "course_price_select");
object_input.setAttribute("id", "course_price_select");
object_input.style.width = (current_cell.clientWidth - 20) + "px";
object_input.attachEvent ("onblur", focus_lost);
object_input.attachEvent ("onkeypress", checkForEnter);
These two lines don't work! (focus_lost and checkForEnter methods start with alert('hi'); so I know they are not being triggered)
object_input.onchange = function() {focus_lost()};
//Populate with options....
attachEvent is an IE only function. You should also bind your events using addEventListener, for example:
if(object_input.addEventListener)
{
object_input.addEventListener('blur', focus_lost);
object_input.addEventListener('keypress', checkForEnter);
}
else
{
object_input.attachEvent('onblur', focus_lost);
object_input.attachEvent('onkeypress', checkForEnter);
}
You can see a jsFiddle demo here.
You should note that addEventListener does not require the events to be prepended with on, while attachEvent does.
Related
Single Row Selections requirement:
My current gridview selects the row just on click on the row. Thus, if the user click 2nd row and then 3rd row, its just not the recent (3rd) row but also the 2nd row is shown as selected. Now the requirement is, when the user selects the 2nd row, and then click on 3rd row, only the 3rd row should be selected and not the 2nd row.
Multi Row Selection requirement:
Also, the user should be allowed to select multiple rows by clicking on "CTRL" key together with the left mouse click on the rows.
How to achieve this using JAVASCRIPT? I am new to Javascript and or Gridview stuffs. Could someone please help me with this code please?
Please remember, our application is based on 2.0
create global JS variable says , var rows_clicked = [].
Use following link to check how to detect CTRL + CLICK. We will use that in later step. - How to detect control+click in Javascript from an onclick div attribute?
Use this code to bind gridview row click event.
$('#<%=gvw.ClientID%> tr[id]').click(function() {
// row click handler , gridview id = gvw -- assumption
// check if it is clicked earlier using IsClicked()
// if clicked 1st time, then call OnRowClick, else OnRowDeselect
$(this).css("color","red");// set some css to look like selected.
});
function OnRowClick()
{
// detect if ctrl+clicked, then save that row's datakey to global
// if it is that, then
rows_clicked.push(datakey);
// and set clicked = true.
$(this).attr("clicked",true);
}
4.
function OnRowDeselect()
{
// remove that datakey from `rows_clicked`
}
5.
function IsClicked(element)
{
if($(element).attr("clicked")) // clicked is an attr to check if row clicked 1st time or deselected
return true;
else
return false;
}
Use this rows_clicked and set in hiddenfiled, and postback that to get selected rows in server side code.
In this fiddle,There is a to button.
When the to button is pressed a pop up appears with a drop down menu.
From the drop down menu a user either selects users or groups then a table with check boxed rows appear.
Now, after selecting a few check boxes and hitting the ok button, the selected check boxes name should be displayed in the textfield.
I am doing this like this:
$('#mytable tr').find('input[type="checkbox"]:checked').each(function(i)
{
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
But its not working.
I added an alert, but still, the alert is not showing which means the control is not going inside.
Please tell me how to do this.
You're reading from the wrong table. Your selector specifies #groupsTable (for instance), but the groups table in the modal has no id on it. Your selector is reading the checkboxes from the main page instead.
You can either add ids to your tables in the modal div, or use these selectors instead:
$('#ToOk').click(function(){
$('#users tr').find('input[type="checkbox"]:checked').each(function(i) {
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
});
$('#groups tr').find('input[type="checkbox"]:checked').each(function(i) {
sCheckbox.push($(this).attr("data-id"));
//alert("hello " +sCheckbox);
});
var ds = (sCheckbox.length > 0) ? sCheckbox.join(",") : "";
alert("ds is "+ds);
});
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.
I'm trying to create a table of inputs that automatically adds a new row when you enter text in one of the inputs on the bottom line. For the most part, it works fine. However, I'm having some trouble with jQuery UI checkbox buttons.
The checkbox buttons are supposed to change their icon when clicked. This works fine for the original buttons, but the cloned button that appears when you add a new row doesn't work properly.
You can see it in jsfiddle here. To replicate the issue, put some text in the third input down. You'll see that a fourth row appears. If you press the fourth checkbox, you'll see the third checkbox is the one whose icon changes. The wrong button also gets ui-state-focus but doesn't actually get focus, which really baffles me, though the correct button does get ui-state-active and seems, as far as I can tell, to evaluate as having been checked properly.
To be clear, the two checkboxes do not have the same ID, and their labels are for the right checkbox - the createNewRow() function takes care of that. If you comment out the line that turns the checkboxes into jQuery UI checkboxes, you'll see everything works fine. If you console.log the value of $(this).attr('id') in the buttonSwitchCheck function, you'll see that it has the right ID there too - if you click the fourth button, it'll tell you that the id of $(this) is "test4", but it's "test3" (the third button) that gets the icon change.
I'm going mad staring at this and I'd appreciate any help people can give. Here's the code:
// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
if ($(this).prop('checked') === true) {
$(this).button("option", "icons", {
primary: "ui-icon-circle-check"
});
} else {
$(this).button("option", "icons", {
primary: "ui-icon-circle-close"
});
}
}
// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
// Identify the row and clone it, including the bound events.
var row = $(this).closest("tr");
var table = row.closest("table");
var newRow = row.clone(true);
// Set all values (except for buttons) to blank for the new row.
newRow.find('.ssheet').not('.button').val('');
// Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
newRow.find('.ssheetRowId').each(function () {
var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
var idNum = idArr[2] - 0 + 1;
var newId = idArr[1] + idNum;
$(this).attr('id', newId);
$(this).siblings('label.ssheetGetRowId').attr('for', newId);
});
// Add the row to the table.
newRow.appendTo(table);
// Remove the old row's ability to create a new row.
row.removeClass('ssheetNewRow');
row.find(".ssheet").unbind('change', createNewRow);
}
$(document).ready(function () {
// Activate jQuery UI checkboxes.
$(".checkButton").button().bind('change', buttonSwitchCheck).each(buttonSwitchCheck);
// When text is entered on the bottom row, add a new row.
$(".ssheetNewRow").find(".ssheet").not('.checkButton').bind('change', createNewRow);
});
EDIT: I was able to find a solution, which I'll share with the ages. Thanks to "Funky Dude" below, who inspired me to start thinking along the right track.
The trick is to destroy the jQuery UI button in the original row before the clone, then reinitializing it immediately afterwards for both the original row and the copy. You don't need to unbind and rebind the change event - it's just the jQuery UI buttons which have trouble. In the createNewRow function:
row.find('.checkButton').button('destroy');
var newRow = row.clone(true);
row.find('.checkButton').add(newRow.find('.checkButton')).button().each(buttonSwitchCheck);
Try using the newer method .on, that allows for delegation, which should help with the dynamic changes to your DOM:
$(".checkButton").button().each(buttonSwitchCheck);
$("table").on("change", ".checkButton", buttonSwitchCheck);
I'm not sure, but it might help with not having to worry about binding events to specific elements.
Also, you could use it for the textbox change event:
$("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);
Here's your fiddle with my changes: http://jsfiddle.net/Cugb6/3/
It doesn't function any different, but to me, it's a little cleaner. I thought it would've fixed your problem, but obviously hasn't, due to problems with the button widget.
And funny enough, it doesn't seem they "support" cloning: http://bugs.jqueryui.com/ticket/7959
i think you are using deep clone, which also clones the event handler. in your create new row function, try unbinding the change event then rebind on the clone.
The problem is mostly summed up in the title.
I am using the custom radio/checkbox code from accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
This is the jist of their code (I modified it to allow defining different style depending on the label's title)
$(this).each(function(i){
if($(this).is('[type=radio]')){
var input = $(this);
// get the associated label using the input's id
var label = $('label[for='+input.attr('id')+']');
var labelTitle = label.attr('title');
// wrap the input + label in a div that has class "custom-radio-LabelTitle"
$('<div class="custom-radio-' + labelTitle + '"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
var allInputs = $('input[name='+input.attr('name')+']');
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
}
});
From my understanding, their code basically finds all the radio inputs and then defines a special trigger called updateState. Then they trigger it inside the input's click function.
So every time the input radiobutton is clicked, updateState is trigger, which in turn sets a class for that radiobutton's label. The changing of the class changes the CSS of the label.
When the label is clicked, The input that the label is for is also clicked (JQuery's .click() function is ran).
What I did was set all my input radiobuttons to display:none. That way the user only clicks the label, and secretly they clicked a radio button.
The .click() function won't run for the input if the input is hidden.
I assume there are two ways pass this:
instead of have the radio's .click() function trigger the handlestate, have the label's .click() function handle it instead. This may not work right though, because then the radio button may not actually be clicked (which messes up my form)
when the label is clicked, trigger the radio's click function manually. However, this may cause it to be triggered twice in every browser but IE. I don't know how to reference the label's radio nor to stop it from triggering twice.
a) instead of have the radio's
.click() function trigger the
handlestate, have the label's .click()
function handle it instead. This may
not work right though, because then
the radio button may not actually be
clicked (which messes up my form)
This may work right, on you label's .click() trigger also force the radio button to be checked like this,
$('#radiobutton').attr('checked', 'checked');
I got what I wanted with:
$("label[title='Plan']").click(function() {
var id = $(this).attr('for')
$("input[id='"+id+"']").trigger("click");
$("input[id='"+id+"']").trigger("updateState");
PlanChange();
});
Then removed all the onClicks.