I want to do a javascript function that check the unchecked checkbox. My function nowadays, check all the unchecked checkbox, and I need that just check a specific GridView unchecked checkbox
function checar() {
var el = document.getElementsByTagName("input");
for (var i = 0; i < el.length; i++) {
if (el[i].type == "checkbox") {
el[i].checked = true;
}
}
}
You want to first limit the scope of your search for elements. One way to do so would be to use getElementById
function checar() {
var grd = document.getElementById("<%=grd.ClientID%>"); // <-- Add this line
var el = grd.getElementsByTagName("input"); // <-- change the scope of this to grd
//rest of your code here.
}
Sample using divs, but you'll get the idea I think: http://jsfiddle.net/8LRkk/
Edited to include setting the specific Grid ID.
To get at all of the checkboxes of a particular gridview, you need to grab checkboxes whose ClientID contain the portion of the gridview's ClientID as well since all controls have an id which is "stacked".
Your function should work as a base, it just needs to have an added check in it:
function checar() {
var el = document.getElementsByTagName("input");
// Get the client id of the gridview from ASP here
var gvID = '<%= this.myGridview.ClientID %>';
for (var i = 0; i < el.length; i++) {
// Call the id of the checkbox and check to see if it
// contains the client id of the gridview at the same time
if (el[i].type == "checkbox" && el.id.indexOf(gvID) != -1) {
el[i].checked = true;
}
}
}
Related
How do I use Jquery to find the last checked/unchecked item and so that I can add or remove them from other two listboxs?
I am creating a dropdown listbox(excludedPeople) with multiselect checkbox with two other listboxs(PrimaryPerson,secondaryPerson) in same form. All three list box are having same set of data during form load. If any item in excludedPeople is selected(checked), I need to remove that item from PrimaryPerson and secondaryPerson and vise-versa.
ASP.Net MVC multiselect Dropdown Listbox code:
#Html.ListBoxFor(m => m.ExcludedPeople, Model.AllPeopleListViewModel,
new { #class = "chkDrpDnExPeople" , #multiple = "multiple"})
jQuery code:
$(".chkDrpDnExPln").change(function ()
{
console.log("Trigger" + $(this).val()); //this code gets the list of all items selected. What I need is to log only last selected/unselected item's val & text into the console.
});
Any help is appreciated. Ask questions if any.
Well, after waiting for 2 days I made a solution myself and posting it here so that others can make use of it.
I made this code for multiselect dropdown listbox with checkboxes in each list item. I expect this to work on similar controls like checked listbox but haven't tested it.
I followed register control and get notified by event so the usage can be made seamless without getting into details.
Usage:
1) include the "JQuery based Library" part into your project as shared or same js script file.
2) Use the below approach to consume the functionality. The event should get you the changed values when the control selection is changed.
RegisterSelectedItemChangeEvent("chkDrpDnctrl#1");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#2");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#3");
$(".chkDrpDnctrl").on("OnSelectionChange", function (e,eventData)
{
var evntArgs = {
IsDeleted: false,
IsAdded: false,
AddedValues: [], //null if no change/None. Else changed value.
DeletedValues: [] //null if no change/None. Else changed value.
};
var source = e;
evntArgs = eventData;
var elementnm = $(this).attr("id");
if (evntArgs !== "undefined" && elementnm != "")
{
if (evntArgs.IsAdded == true)
{
//if excluded checked then remove.
for (var i = 0; i < evntArgs.AddedValues.length; i++)
{
PerformAction (control#, evntArgs.AddedValues[i]);
}
}
if (evntArgs.IsDeleted == true)
{
//if excluded checked then remove.
for (var i = 0; i < evntArgs.DeletedValues.length; i++)
{
PerformAction (control#, evntArgs.AddedValues[i]);
}
}
}
});
JQuery based Library:
function RegisterSelectedItemChangeEvent(selector) {
var dropdownElementRef = selector;
//Intializes the first time data and stores the values back to control. So if any of the checkboxes in dropdown is selected then it will be processe and added to control.
$(dropdownElementRef).data('lastsel', $(dropdownElementRef).val());
var beforeval = $(dropdownElementRef).data('lastsel');
var afterval = $(dropdownElementRef).val();
//storing the last value for next time change.
$(dropdownElementRef).data('lastsel', afterval);
//get changes details
var delta = GetWhatChanged(beforeval, afterval);
//stores the change details back into same object so that it can be used from anywhere regarless of who is calling it.
$(dropdownElementRef).data('SelectionChangeEventArgs', delta);
//prepares the event so that the same operation can be done everytime the object is changed.
$(dropdownElementRef).change(function () {
var beforeval = $(dropdownElementRef).data('lastsel');
var afterval = $(dropdownElementRef).val();
//storing the last value for next time change.
$(dropdownElementRef).data('lastsel', afterval);
//get changes details
var delta = GetWhatChanged(beforeval, afterval);
//stores the change details into same object so that it can be used from anywhere regarless of who is calling it.
$(dropdownElementRef).data('OnSelectionChangeEventArgs', delta);
//fires the event
$(dropdownElementRef).trigger('OnSelectionChange', [delta]);
//$.event.trigger('OnSelectionChange', [delta]);
});
var initdummy = [];
var firstval = GetWhatChanged(initdummy, afterval);
//fires the event to enable or disable the control on load itself based on current selection
$(dropdownElementRef).trigger('OnSelectionChange', [firstval]);
}
//assume this will never be called with both added and removed at same time.
//console.log(GetWhatChanged("39,96,121,107", "39,96,106,107,109")); //This will not work correctly since there are values added and removed at same time.
function GetWhatChanged(lastVals, currentVals)
{
if (typeof lastVals === 'undefined')
lastVals = '' //for the first time the last val will be empty in that case make both same.
if (typeof currentVals === 'undefined')
currentVals = ''
var ret = {
IsDeleted: false,
IsAdded: false,
AddedValues: [], //null if no change/None. Else changed value.
DeletedValues: [] //null if no change/None. Else changed value.
};
var addedvals;
var delvals;
var lastValsArr, currentValsArr;
if (Array.isArray(lastVals))
lastValsArr = lastVals;
else
lastValsArr = lastVals.split(",");
if (Array.isArray(currentVals))
currentValsArr = currentVals;
else
currentValsArr = currentVals.split(",");
delvals = $(lastValsArr).not(currentValsArr).get();
if (delvals.length > 0)
{
//console.log("Deleted :" + delvals[0]);
for (var i = 0; i < delvals.length; i++)
{
ret.DeletedValues.push(delvals[i]);
}
ret.IsDeleted = true;
}
addedvals = $(currentValsArr).not(lastValsArr).get();
if (addedvals.length > 0)
{
//console.log("Added:" + addedvals[0]);
for (var i = 0; i < addedvals.length; i++)
{
ret.AddedValues.push(addedvals[i]);
}
ret.IsAdded = true;
}
return ret;
};
I am using the following jquery postcode lookup and I am trying to push values and hard code the process in javascript.
I am using the following to give the postcode textbox a valid postcode, and then forcing the button click to find the addresses.
document.getElementById("idpc_input").value = "LL17 0PN";
document.getElementById('idpc_button').click();
This so far works, after this a dropdownlist appears with the id of 'idpc_dropdown', I am trying to (in javascript or jquery) select an option
Here is what I have done but it does not work
var select = document.getElementById("idpc_dropdown");
document.getElementById("idpc_dropdown").text = '2 Elwy Cottages Heol Esgob';
And also:
var desiredValue = "2 Elwy Cottages Heol Esgob"
var el = document.getElementById("idpc_dropdown");
for(var i=0; i<el.options.length; i++) {
if ( el.options[i].text == desiredValue ) {
el.selectedIndex = i;
break;
}
}
UPDATE:
Let me explain the process and order, 1- Type in postcode and press the button to find my address 2- a dropdownlist then renders and appears .. I Think this is why it is not working for my desired dropdownlist as its not loaded when the page is loaded, it is when the button has been pressed
Provided that i is the same as the index of the item you wish to select, I'd set the dropdown's value attribute to that index:
let el = document.getElementById("idpc_dropdown");
for(let i = 1; i <= el.options.length; i++) {
if ( el.options[i].text == desiredValue ) {
el.value = i; // here
break;
}
}
I am interested in when choosing an option from a drop-down list the value of the selected option that stá visualiando in a < div > that value is captured in a javascript variable. The list referred to originated in an AJAX routine that queries a database. On page php , where there is a div shown above . I need your help to take this value from the list.
Assuming that you meant for your question read the way RightClick explained it in the comments, you need something like this:
window.onload = function() {
var ids = $('.dropdown').map(function(){
return this.id;
}).get();//Get array of ids
var options = document.getElementsByClassName('dropdown');
for(var i = 0; i < options.length; i++) {
var anchor = options[i];
anchor.onclick = function() {
var h = new XMLHttpRequest();
h.open("GET", "/myDB?q="+ids[i], true);//This should be synchronous
h.send();
document.getElementById("responseDiv").innerHTML = h.responseText;
}
}
}
`
I am using jsTree. Its working fine but I want to get first node's data value in group of tree.
What I want to do?
When I click on any checkbox, then it will click automaticaly first checkbox
I am getting node id for first element but not getting original checkbox.
I have mention my code below.
.on("changed.jstree", function (event, data) {
if(data.action == 'deselect_node' || data.action == 'select_node'){
var parentId = $('#'+data.node.id).parent().parent().attr('id');
var childId = $('#'+parentId+' li:first-child').attr('id');
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
if(data.instance.get_node(data.selected[i]).original.permID){
r.push(data.instance.get_node(data.selected[i]).original.permID);
}
}
A checkbox in a jsTree node is not a checkbox control really, it is an image.
You can get it of course. Based on your script it would go like:
var checkBoxImageElement = $('#'+childId).find('.jstree-checkbox')[0];
Please check out demo: JS Fiddle
I have two asp.net listbox control in my page lbox1 and lbox2
lbox1 is filled in code behind .
Now user can select items on lbox1 and by clicking on a button the selected items goes in lbox2.
I do this using javascript becouse I don't want postback on each click.
this is the javascript function :
function Updatelist() {
var sel = document.getElementById("lbox1");
var listLength = sel.options.length;
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected)
document.getElementById("lbox2").add(new Option(sel.options[i].value));
}
}
Now I need to send on server side the content of lbox2 using another button.
I think that using a simple asp button with a onserverclick event not work becouse in server side lbox2 is never filled!
How can I do ?
You'll need to add a button and JS function that copies the values from the lbox1 control into an <asp:HiddenField> control. Once you post back, the selected values will be available in the hidden control's Value property.
To avoid postback use html dropdown... and for your code ans will be below:-
function Updatelist() {
var sel = document.getElementById("lbox1");
var listLength = sel.options.length;
var opt = document.createElement('option');
document.getElementById("lbox2").options.add(opt);
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected) {
document.getElementById("lbox2").options.add(opt);
opt.text = sel.options[i].value;
opt.value = sel.options[i].value;
}
}
}