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);
});
Related
I need help with my simple application. When I click on the selected (highlighted) row the alert box shows and I can confirm that I'd like to remove the selected one and that's fine - the selected row is being removed. The problem is that I checked what'll happen when I select one row and close the alert box, then 2nd row and close the alert box, then 3rd one, and so on. When I finally decide to use confirm button, not only the highlighted row is being removed but also the 2nd/3rd/4th clicked row which I decided not to remove. I want my app to remove only one, selected row regardless of how many times before using confirm button I clicked in any row and closed the alert box.
Below I'm putting the code responsible for the whole thing that I'm writing about.
Thanks in advance for any comments
const alertBox = document.querySelector('.alert-box');
tableBody.addEventListener('click',(e) => {
document.querySelector('.ok').addEventListener('click',() => {
const target = e.target.parentNode.childNodes[0].textContent;
alertBox.classList.add('no-show');
sizesList.forEach((element,index) => {
if (element.size.toLowerCase() === target.toLowerCase()) {
sizesList.splice(index,1);
localStorage.setItem('size',JSON.stringify(sizesList));
e.target.parentNode.remove();
};
});
});
document.querySelector('.fa-times').addEventListener('click',() => alertBox.classList.add('no-show'));
});
I am developing an MVC app in which I have created two tables in view dynamically. In each table first column contains ID and last column contains save button. On click of save button I'm passing this ID to my function. Now I want to check the button was clicked from which table so that I can perform operations. I have tried many solutions but did not work. Can anybody help?
function SaveDocument(_param) {
//alert(_param + "Add");
return;
var tableRow = $("td").filter(function () {
return $(this).text() == String(_param);
}).parent('tr');
tableRow.parent().attr('uid');
}
and I have also tried links like this but none of these work.
Edit : -
I have created fiddle for this here
You mentioned that you're creating tables dynamically, so I'm assuming your click event won't fire unless you delegate it.
Try adding a class say .save to the buttons and run the below code.
$(document).on('click', '.save', function(){
console.log($(this).closest('table'));
});
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.
I have a textbox where the user puts in some text, and a dropdown appears. When the user selects something from the dropdown list, the text from the dropdown replaces the text that they typed.
Now, I want this textbox to clear itself if they didn't select anything from the dropdown.
So basically, the only text that can appear in the textbox is something that was ultimately selected from the dropdown. How would I achieve this?
I've tried:
jQuery("#" + field).focusout(function() {
jQuery("#" + field).val("");
});
But this still clears even if they selected from the dropdown. What logic would I implement to do this? Could I set a variable or something that is set to true when they select from a list. I would then check this on the focusout function?
Quite new to JQuery!
Use the autocomplete change event, check for the existence of ui (the item selected from the menu, if any. Otherwise the property is null), if it doesn't exist, then you know the user didn't select an autocomplete option, and you can empty the value:
change: function (ev, ui) {
if (!ui.item) {
$(this).val('');
}
}
Here's a simple demo fiddle
Possibly something like this:
jQuery("#" + field).focusout(function() {
var enteredValue = $("#" + field).val();
var listOfAvailableOptions = //put method call here
if($inArray(enteredValue, listOfAvailableOptions)) //possibly use IndexOf() here and check if = -1
{
jQuery("#" + field).val("");
}
});
The neater way would be to populate the values of a combo box from the AJAX call though
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.