I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.
The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)).
Now I have included this in my code:
var clickedNumber = 10;
$('.answerBtns').each(function (index) {
if (index < clickedNumber) {
$(this).show();
}
});
Now what this does is no matter how which button I select in the first grid, it will always display 10 buttons. So what I need is clickNumber to be in a loop so it loops through the buttons, so if the user selects button "1" in first grid (the grid which you have to open using (Open Grid) link, then it should display the first button which is "A" in second grid, if user selects button "2" in first grid, then it should display the first two buttons "A" and "B" in second grid, if "3" then display "A", "B" and "C" and so on.
But also if user selects "True or False" button in first grid, it should display only "true" and "false" buttons in second grid and if user selects "yes or no" button in first grid, it should display "Yes" and "No" buttons only in second grid.
Does anyone know how to do this?
Thank you
Code is in jsfiddle, click here
If you add the following to the end of your buttonclick() function it will show or hide the appropriate number of buttons, as you can see in this updated jsfiddle.
$('.answerBtns').each(function (index) {
if (index < button.value)
$(this).show();
else
$(this).hide();
});
Note that that is basically the same as the snippet from your question except using the value from the clicked button instead of a hardcoded 10.
But more generally, if you're using jQuery then use jQuery. That is, don't put inline onclick handlers in every one of your buttons. They all just say onclick="buttonclick(this);", and they all have the same class, so you should remove those inline handlers from your HTML and set them up using jQuery.
So you could replace your buttonclick function with something like this:
$(".gridBtns").click(function() {
// what you need from your "buttonclick(button)" function should go here
// except instead of the "button" parameter you can just use "this",
// e.g., this.value
var clickedNumber = this.value;
$('.answerBtns').each(function (index) {
if (index < clickedNumber)
$(this).show();
else
$(this).hide();
});
});
I haven't got time to do the "yes or no" part for you, but perhaps you can figure it out from the above? Within the click handler you can test if (this.value==="yes or no") and so forth.
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);
});
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.
I have a jsfiddle application below:
http://jsfiddle.net/ybZvv/5/
If you open the jsfiddle, you will see a top control which contains "Answer" buttons. You will also see some letter buttons, a "True" button, and a "False" button.
The "True" and "False" buttons work perfectly, meaning that if the user clicks on "True" and then clicks on "False", it replaces the text input as you can't have an answer both "True" and "False".
This works for the same for the "Yes" and "No" buttons.
But there is a problem with the letter buttons. If you click on the letter buttons, you realise that you can click on multiple letter buttons which is fine, but the problem is that it replaces the text input for those letters which is incorrect. If multiple letter buttons are selected, then it should display the text inputs for all of those letter buttons, not replace the text input with the latest letter button selected.
I know the code below
_oCurrAnswerContainer.html('');
empties the container DIV, so it removes the inputs before creating a new one.
But I only want that to happen between the "True" and "False" buttons and "Yes" and "No" buttons. If you select mutliple letter buttons, it should not empty the container:
If buttons A, C and E are turned on, then text input A, C and E is shown, if E is then turned off, then text input for E is removed.
I guess you wanna append. Why can't you make the code this way?
_oCurrAnswerContainer.html(_oCurrAnswerContainer.html() + '' + NewContents);
Append to it. I am not sure, as I don't understand the question.
It seems the solution is to continually inspect the selected letters, each time the user makes a selection or deselect a letter.
Example:
<script type='text/javascript'>
var checkboxes = $('form > p > input:checkbox');
// updates the text input with the selected values...
var update = function() {
var values = [];
$('form > p > input:checked').each(function(idx, cb) {
values.push($(this).val());
});
$('#foo').val(values.join(', '));
};
// count the number of selected items...
var count = function() {
var n = $("input:checked").length;
$("div").text([n, 'box selected!'].join(' '));
};
// bind to the checkbox for clicks
// update the input field
// count the number of selected items
$(checkboxes).on('click', function(e) {
update();
count();
});
update();
count();
</script>
See this gist for a working example
I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!
The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo
Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.
jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});