I have a list of elements that i want to dynamically change its data-original-title. What i did was have a async function that returns that content and then displays using a tooltipp.
This is the code:
function onElementOver(el) {
var pos = el.getAttribute('data-pos');
let contentTmp = arr[pos].content;
if (!contentTmp) {
let lat = arr[pos].lat;
let lng = arr[pos].lng;
getContent(lat, lng).then(function (ctn) {
contentTmp = ctn;
el.setAttribute('data-original-title', contentTmp);
$('[data-toggle="tooltip"]').tooltip();
arr[pos].content = ctn;
});
} else {
el.setAttribute('data-original-title', contentTmp);
$('[data-toggle="tooltip"]').tooltip();
}
}
I understand how the following line works, it gets all elements of the DOM wiht the data-toggle attribute, and displays it.
$('[data-toggle="tooltip"]').tooltip();
What I need is to only display the data-toggle in the element el argument of the onElementOver function.
How can I get it to only show that specific tooltip?
I haven't tested it but i assume $(el).tooltip() will work. if el is already a jquery element then use el.tooltip()
Related
I have written this code by using some basics. I simply wanted to remove the image that I have created by using the function Generate() by a button. I have written the following code to remove the image generated. Please help me.
Please note that I have linked my button with the function Reset1(). Can someone give me the code to do the following please.
function Generate()
{
var image=document.createElement('img');
var div=document.getElementById('flex-box-gen');
image.src="https://thecatapi.com/api/images/get?format=src&type=gif&size=small"
div.appendChild(image);
}
function Reset1()
{
document.getElementById('Generate').remove();
}
You could either assign an id to your image element and use that to remove in your second function:
function generate() {
var image=document.createElement("img");
image.id = "image-01";
...
}
function reset() {
var image = document.getElementById("image-01");
var parent = image.parentNode;
parent.removeChild(image);
}
Or if there is nothing else in your containing div element you could just empty all elements from it:
function reset() {
document.getElementById("flex-box-gen").innerHTML = "";
}
getElementById will query a DOM element, not a javascript element.
What you can do, supposing you have only one img in your flex-box-gen is:
var imgs = document.querySelectorAll('#flex-box-gen img')
if(imgs.length > 0){
imgs[0].remove();
}
With a null-check in case the image was already removed
image.setAttribute('id',"Generate");
Add this line in generate function.
I'd like to learn how work with a group of buttons without specifying Ids for the following task:
Hide and Show Div body, Div header stay show.
I was able to make one with this code:
function hide(){
document.getElementById('here').classList.toggle('hide')
}
but Hiding/Showing each individually was prove to be more difficult.
The sample here: Show/Hide Div Body
I know there is something like:
Let btns = document.querySelectorAll('buttons);
Let tables = document.getElementsByClassName('here');
function HideShow(){
//What do I put here??????? :)
}
Note: I can't use ids, because I want to add so many divs to make it dynamic.
UPDATE:::::: UPDATE:::::: UPDATE::::::
I had to do it the old fashion way, with ids!! and IF/ELSE, not cool! :(
let tables = document.getElementsByClassName('here');
var theParent = document.querySelector('#theDude');
theParent.addEventListener('click', doSomeThing, false);
function doSomeThing(e){
if( e.target!==e.currentTarget){
var clickedItem = e.target.id;
if(clickedItem=='one'){
tables[0].classList.toggle('hide')
}else if(clickedItem=='two'){
tables[1].classList.toggle('hide')
}else if(clickedItem=='three'){
tables[2].classList.toggle('hide')
}else if(clickedItem=='four'){
tables[3].classList.toggle('hide')
}
e.stopPropagation();
}
}
Pass your node lists into your Hide and show, and then iterate over them
Let btns = document.querySelectorAll('buttons);
Let tables = document.getElementsByClassName('here');
function HideShow(elemArray){ // note: I've added an elemArray parameter here
//What do I put here??????? :)
elemArray.forEach(elemArray, function(elem) {
//with each element, toggle hide or show
//elem.classList...
}
}
HTML: <button onclick="hideThisButton(this);">Button</button>
JS: let btns = document.querySelectorAll('buttons);
let tables = document.getElementsByClassName('here');
// use this to hide all the buttons
function HideShow(){
for(let i=0;i<btns.length;i++){
// you can access the index i over here
// change the logic to hide or show specific buttons
btns[i].classList.toggle('hide');
}
}
// use this method for hiding a specific button on click
function hideThisButton(event)
{
var btn = event.target;
btn.classList.toggle('hide');
}
I have created javascript in which data is fetched for dropped element and are created. The data is fetched from database using json encoding. I have assigned id to the elements but the click event for every element is not working. only the last elements id is obtained and clicked is performed on that id.
JS :
$(document).ready(function () {
var i,j=0;
var x1,x2,y1,y2;
var sf=pf;
sf=Math.round(sf);
var tmp;
var y=null;
var idiv=[];
var fty=ft;
var fd=fid;
var fetch=data;
var x = null;
var count=fetch['count'];
var i=count+1;
//document.write(count);
var rai=[];
//rai[0]='hello';
//document.write(rai[0]);
var ww=[];
var hh=[];
var xx=[];
var yy=[];
var room=[];
var roomt=[];
for(j=0;j<=count;j++)
{
rai[j]=fetch['room_id'+j];
//document.write(rai[j]);
ww[j]=fetch['width'+j];
//document.write(ww[j]);
hh[j]=fetch['height'+j];
xx[j]=fetch['x'+j];
yy[j]=fetch['y'+j];
room[j]=fetch['room'+j];
roomt[j]=fetch['roomt'+j];
//document.write(room[j]);
// alert("data"+rai+" "+ww+" "+hh+" "+xx+" "+yy);
idiv[j]=document.createElement('img')
$('#droppable').append(idiv[j]);
idiv[j].style.position="absolute";
idiv[j].style.left=(xx[j]*sf)+'px';
idiv[j].style.top=(yy[j]*sf)+'px';
idiv[j].style.width=(ww[j]*sf)+'px';
idiv[j].style.height=(hh[j]*sf)+'px';
idiv[j].style.border=1+'px';
idiv[j].id=room[j];
//y=idiv[j].attr('idd',rai[j]);
if(roomt[j]=='garden')
{
idiv[j].src="images/download.jpg";
}
else
{
idiv[j].src="images/ac.png"
}
$(idiv[j]).draggable();
//alert(y);
//y=idiv[j].id;
// alert(y);
//document.write("data"+rai[j]+" "+(ww[j]*sf)+" "+(hh[j]*sf)+" "+(xx[j]*sf)+" "+(yy[j]*sf) + room[j]);
}
//$(this).bind("click",'idiv',function(){
// alert("hello"+idiv.id);
//window.location.href="tables.php?room_id="+y;
// });
});
can anyone give idea how to bind click on each fetched element.
Ty this : add class to the element created and write a click event handler for all element having that class. See below
Add below html in Loop where you are creating idiv[j] -
idiv[j].className = "clickable";
Now write a click event handler using .on()
$(document).ready(function () {
...... your code start here
......
//loop
for(j=0;j<=count;j++)
{
...
...
}
//loop ends
... more code
....your code end here
$(document).on("click",".clickable", function(){
alert(this.id);
});
});
NOTE: Don't use bind because it is deprecated now after jQuery version 1.5
I've dinamically created a div with the code below:
typebox.innerHTML += "<div id='idtypebox' class='typebox'><img id='typeImg' width='30px' height='30px' src="+d[o].src+"></div>";
My intention is to remove completely the innerHTML I created, by changing the innerHTML that had created the img and if change the form A to B, those images will be removed.
function SelectCheck() {
var select_val = $('#Check').val();
// using this to remove typeimg
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove);
if (select_val) {
ajax_json_gallery("Img/"+select_val);
}
return;
}
$(document).ready(function() {
$("#Check").change(SelectCheck).change();
});
I tried this code by on button and it works, but if I put in jQuery selection I get an error
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove);
Why not just :
$("#typeImg").remove();
And the complete code :
function SelectCheck(){
var select_val = $('#Check').val();
// using this to remove typeimg
$("#typeImg").remove();
if(select_val){
ajax_json_gallery("Img/"+select_val);
}
return;
}
jQuery(document).ready(function($) {
myVar=$("#d1 [href]").html();
var href = $(myVar).attr('src');
$("#d1").html('');
$("#d1").html('<img src="'+href+'" class="images_responsive_mode">').removeAttr("href");
});
</script>
this is one of the script which i created for remove the class assigned by wordpress and to assign new class for responsive image , if it useful for you do this !
you can use childNodes to remove the innerHtml
var toRemove = document.getElementById('typeImg');
toRemove.parentNode.removeChild(toRemove.childNodes[0])
I have a table that is created in ASP.NET C# code behind. The table has several levels of groupings, and when I create the rows for the outer most grouping, I add an custom attribute as follows:
foreach (Table2Row row in Table2Data)
{
// skipping a bunch of irrelevent stuff
...
tr_group.Attributes.Add("RowsToToggle", String.Format(".InnerRowGroupId_{0}", row.GroupHeaderId));
...
}
The attribute is the CSS class name of the inner level rows that I would like to toggle. When the user clicks on the outer level row, I would like to call JQuery Toggle function for all inner level rows that match the custom attribute.
To achieve that effect, I have attached an onclick event to the header rows with the following script in the aspx file:
var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
var table = document.getElementById(tableId);
var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
for (i = 0; i < groupRows.length; i++) {
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
}
});
function ToggleOnRowClick(row) {
var r = $('#' + row.id);
var innerRows = r.attr('RowsToToggle');
$(innerRows ).toggle();
}
So, clicking anywhere on the header row should call the function ToggleOnRowClick, which should then toggle the set of rows below it via the custom attribute RowsToToggle.
When I set a (FireBug) break point in the ToggleOnRow function, the variable r appears to be pointing to the correct object. However, innerRows is not getting set but instead remains null. So am I setting the custom attribute incorrectly in ASP.NET or reading in incorrectly in JQuery?
You did not post the code to generate inner level rows, I am assuming you sat proper classes to them.
There are few issues with the jquery you posted. This line wouldn't work:
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
You don't have any groupRows property defined for table object.
We don't care about table row anymore, we care about groupRows[i] and want to pass it to ToggleOnRowClick function.
This line in next function is also wrong:var r = $('#' + row.id);
Solution: Change your script to this:
var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
var table = document.getElementById(tableId);
var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
for (i = 0; i < groupRows.length; i++) {
groupRows[i].onclick = function () { ToggleOnRowClick(this); }
}
});
function ToggleOnRowClick(row) {
//var r = $('#' + row.id);
var innerRows = $(row).attr('RowsToToggle');
$("." + innerRows).toggle();
}
I have tested the code with dummy data. So if you have any issue, PM me.
This line is your culprit:
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i])
By the time the event handler runs, table.rows might still exist, but i will be set to groupRows.length+1, which is out of bounds for the array. The handler will get called with an argument of undefined.
Remember, Javascript is an interpreted language! The expression "table.rows[i]" will get interpeted when the handler runs. It will use the last value of i (which will still be set to the value that caused your for loop to end, groupRows.length+1).
Just use
table.groupRows[i].onclick = function () { ToggleOnRowClick(this) }
So, First you shouldn't use custom attributes... they are a sin!
Please use data attributes instead, so that is what I'm going to use in the code, should be an easy fix regardless.
If this doesn't work then I'd be very very interested in seeing a dumbed down HTML snippet of the actual output.
$(document).ready(function () {
$('#MYTABLE').on('click', '.Table2GroupHeader', function() {
var attr_if_you_insist_on_sinning = $(this).attr("RowsToToggle");
var data_if_you_like_not_sinning = $(this).data("RowsToToggle");
//if the row is like <tr data-RowsToToggle=".BLAH" or th etc
//asumming you set the attribute to .BLAH then:
var rows_to_toggle = $(data_if_you_like_not_sinning);
rows_to_toggle.toggle();
//assuming you set it to BLAH then:
var rows_to_toggle = $("."+ data_if_you_like_not_sinning);
rows_to_toggle.toggle();
});
});
$(document).ready(function () {
$('#<%= Table2MainTable.ClientID %> .Table2GroupHeader').each(function(){
$(this).click(function(){
$(this).toggle();
});
});
});