Need help traversing elements with jQuery in ASP.NET Web Forms - javascript

So the first image is what my page looks like. I am trying to grab the ID of the table at the top (the table that has the class trackingHistory and ID of ContentPlaceHolder1_ctl00_myRpt_ctl00_0_gdvTH_0) whenever the highlighted button is clicked.
Right now I can click the button and fire my Javascript method 'ToggleHistory()' and use jQuery to get the ID of my button. (.attr('id'))
but that's about as far as i can get. I have tried messing around with the closest() and prev() methods from jQuery but haven't had any luck. any help would be appreciated.
javascript method
function ToggleHistory(button)
{
console.log(button);
var x = $(button).prev();
var y = $(button).closest('table').find('.trackingHistory');
//var z = $(button).closest('.trackingHistory');
console.log(x);
console.log(y);
console.log($(y).attr('id'));
//console.log(z);
}
i dont want to have to hard code the id because there will be a dynamic amount of these tables and buttons.

The <button> and the <table> don't have a direct relationship, but do have the <div> in common.
<div>
<table class="toggleHistory"></table>
</div>
<button type="button" onclick="ToggleHistory(this)">click here to hide</button>
The <button> and <div> are immediate siblings, which you can traverse between with .prev() and back with .next().
$(button).prev()...
Then, the <div> and <table> are .parent() and child (.children()):
$(button).prev().children('.trackingHistory');
function ToggleHistory(button)
{
console.log(button);
var $historyTable = $(button).prev().children('.trackingHistory');
console.log($historyTable.attr('id'));
}

Related

Auto click on child element with random ID

I'm a complete javascript noob and I'm trying to automatically click a button inside a div.
<div id="KB_3383878" class="td button-visible">
<button id="KB_1532704" class="inputsubmit">Search</button>
</div>
The numbers after KB_ are changed randomly each time the button is clicked. I am not able to click based off the inputsubmit class as there are 3 identical buttons, of which 2 are hidden and they rotate which one is visible after x clicks, and the inputsubmit class is also rotated between inputsubmit and enterclass.
So I have to find the child element of the div with the button-visible class.
The JS script I've tried using so far has no effect what so ever:
window.onload = function(){
var parent = document.getElementsByClassName('button-visible');
var children = parent.children[0];
setInterval(function(){
parent.button.click();
},1000);
};
It seems you are referring to the wrong var. parent.button.click() should be referring to children (which I would name firstChild or something).

How to create a function that selectively deletes a div based on its ID

For my program, i have a button that append's newly created div to the page and sequentially names these new divs in the sequence of MydivIDis1, MydivIDis2, MydivIDis3 and so on. Each of these newly created divs will have a 'delete' button. The delete button will delete the div that it is currently in. However, i do not know how to do this.
In the code below, i have tried to use javascript to create a "remove element" button within each div. The button is tied to an onclick function called remove. I have also specified in the button.onclick to take in the argument newDiv.id. This code is not working however.
<!DOCTYPE html>
<html>
<body>
<div id="MainContainer">
<input type="button" value="Add Element" id="add" onClick="add();">
<div id="InnerContainer">
</div>
</div>
<script>
var mainDiv=document.getElementById("MainContainer");
var innerDiv=document.getElementById("InnerContainer");
var clicks=0
var add=function(){
clicks += 1;
var newDiv=document.createElement("div");
newDiv.id="MydivIDis"+clicks;
newDiv.innerHTML=newDiv.id
mainDiv.appendChild(newDiv); //creates the new Div, with the id MydivIDis1, MydivIDis2, MydivIDis3
var button=document.createElement("button");
var t=document.createTextNode("Remove Element");
button.onclick=function(){
remove(newDiv.id); //Here i am trying to specify to the program to take newDiv.id as the input to the remove function.
};
button.appendChild(t); //creates new button and appends to each new Div
var remove=function(input){
mainDiv.removeChild(input);
}
mainDiv.appendChild(button);
};
</script>
</body>
</html>
removeChild takes a node as an argument instead of an element ID.
So the solution is to just give newDiv to the remove function.
button.onclick=function(){
remove(newDiv);
};
Your remove statement is wrong, remove element like this
mainDiv.removeChild(document.getElementById(input));
Also, as per your current design even after removing the div the remove button will still be there, if you want to remove that button also you have to replace this line
mainDiv.appendChild(button);
With this
newDiv.appendChild(button);
Why don't you just use jQuery?
It's an awesome library.
Just give an ID to the div tag you want to alter and remove it. I'll give you an example on using it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$("button").click(function(){
$("#div1").remove();
}

How to pass an array id into jquery selector?

I have an element with an array id id="x[]" that vary depending on the number of elements that I have on a database. It's basically a x button to delete a certain table row in the database.
<div align="center" id="x[]" class="x">
<img src="x 2.png" alt=""></div>
Problem is, I don't know how to pass this id into the jQuery selector. I want to change the form action to delete the row and create an hidden input to get the paramater I need from another field with an array id id="codsinmov[]" with the same index as x[]. What I have so far is:
$(document).ready(function(){
for(var i=0; i<x.length; i++) {
$('#x[i]').click(function(){
var $hiddenInput = $('<input/>',{type:'hidden',id:codsinmovesse, name:codsinmovesse});
$hiddenInput.val($('#codsinmov[i]').val());
$hiddenInput.appendTo('#tabelaeditavel');
$('#form').get(0).setAttribute('action', 'deletemoviment.php');
$('#form').submit();
});
}
});
But it doesn't work.. So, any ideas? Sorry, I'm a beginner at jQuery. Thank you very much!
you can use
$("div[id^='x['").click(function(){
// write code here })
So this will execute on click of those ids of div which start from x.
So as per my understanding You need not to use for loop here rather use 'this' keyword and do what you want.
I hope it will help you.
If you want to add an eventListener to ALL elements you can simply do it like that
var $myButtons = $('.buttons');
That way the whole list of Elements are stored behind the variable $myButtons.
Now you can proceed as following:
$myButtons.on("click", function(event){
console.log(this); // this will print out the clicked element
});
This way every element with the class .buttons is clickable and accessable.
If you want to dynamically select a single element with jquery depending on some value you have to exclude your [i] from the string
for example like that $('element:nth-child('+[i]+')');

I need to pass two elements to an onclick event handling function JavaScript and not just their id's

Suppose I have two elements in my code and I want to pass their respective id's to an event handling function. (In my example below, I have a div and a button)
<div id="div1">
<input type="button" id="button1" onclick="doSomething(this, [here comes id of div])" />
</div>
For the button, instead of writing the id which is "button1", I simply passed the element itself using the this keyword. Now my question is, is there a way where I can pass the div element itself in the function and not just its id just like what I did with the button element?
Any help would be greatly appreciated.
You can use the parentNode property;
this.parentNode
As this returns a DOMElement (similar to this), you can access the ID the same via;
this.parentNode.id
... should you want to.
Just get it from the parent in the callback:
function clickHandler(e){
console.log(e.target.parentNode.id);
}
Why do you need to pass it in the first place? Access the div via parentNode.
onclick="doSomething(this);"
and
function doSomething(btn) {
var div = btn.parentNode;
}

How can I assign click function to many buttons using JQuery?

I have 29 buttons: todayResultsbutton0 .. todayResultsbutton28,
and 29 divs: todayResultsUrls0 .. todayResultsUrls28.
I also have a function toggleVisibility(divName) that hide/show the given div.
I am trying to use the following code:
for (var i=0; i < 29; ++i) {
var b = "#todayResultsbutton"+i;
var d = "todayResultsUrls"+i;
$(b).click(function(){toggleVisibility(d);});
}
I thought that this will cause each button click to show/hide the matching div but the actual result is that clicking on any button (0 .. 28) show/hide the last div - todayResultsUrls28.
Can someone tell me where am I wrong?
Thanks.
Use a class.
$(".myClass").click(function() {
var d = $(this).attr("id").replace("button", "Urls");
toggleVisibility(d);
});
Instead of trying to use a loop, you'd be better off using the selector to "find" your divs..
say you have something like:
<table>
<tr><td>
<input type="button" id="myButton" value="test" text="test" />
</td><td><div id="myDiv"></div></td></tr></table>
You can find myDiv by :
$('#myButton').parent().find('#myDiv').hide();
You could use the "startsWith" attribute selector with the id, then build the url from the id of the clicked item.
$('[id^=todayResultsbutton]').click( function() {
var url = this.id.replace(/button/,'Urls');
toggleVisibility(url);
});
Use
var d = "#todayResultsUrls"+i;
Instead of
var d = "todayResultsUrls"+i;
You can use this:
$('button[id^="todayResultsbutton"]').click(function() {
var index = this.id.substring(18,this.id.length);
toggleVisibility("todayResultsUrls"+index);
});
This will find all <button> tags with id's starting with todayResultsbutton. It will then get the ID for the clicked tag, remove the todayResultsbutton part of it to get the id and then call the toggleVisibilty() function.
Example here.
Edit
Notes:
Using button before the starts with selector ([id^="todayResultsbutton"]) speeds up the jQuery selector because it can use the native getElementsByTagName function to get all button tags and then only check those for the specific ID.
this.id is used instead of jQuery's $(this).attr('id') because it's faster (doesn't require wrapping this or calling the extra function attr()) and shouldn't cause any cross-browser issues.
Toggle visibility by finding the relevent div usint the event target rather than classes etc.
Assuming:
<div id='todayResultsUrls1'>
<button id='todayResultsbutton'></button>
</div>
Using the event target you can get the button element and find the div you want to hide.
var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);

Categories