We Keep Coding

Unable to update Materialize.css tooltips using jQuery after click event

I am using Materialize.css on my portfolio site, and am using the npm package clipboard.js. I am using this within a floating action button, and the copy to clipboard functionality is working as intended (when user clicks the button, it copies my email to their clipboard like it should).
However, I want the tooltip to update from ""Click to copy my email to your clipboard!" to a success message like "Copied to your clipboard ✅". I have tried the code below and it won't actually update the page, though I can sometimes see the new message (it's just very inconsistent, which I don't want).
This is my html element:
<li>
<a id="email" data-clipboard-text="example#gmail.com" class="btn-floating red waves-effect waves-light tooltipped" data-position="left" data-tooltip="Click to copy my email to your clipboard!"><i class="material-icons">mail</i></a>
</li>
and here's my javascript:
var clipboard = new ClipboardJS('#email');
clipboard.on('success', function(e) {
var anchorElement = $('#email');
anchorElement.attr('data-tooltip', 'Copied to your clipboard ✅');
anchorElement.addClass('success');
anchorElement.tooltip();
// Reset after a timeout
anchorElement.mouseleave(function() {
setTimeout( function(){
anchorElement.attr('data-tooltip', 'Click to copy my email address to your clipboard!');
anchorElement.removeClass('success');
anchorElement.tooltip();
}, 300);
});
e.clearSelection();
});
I would like for the tooltip to show the updated value consistently, but I haven't been able to figure out what's wrong with the code I have. I can tell that it does update the html element, as I can sometimes see the updated text, but it's very inconsistent and for this feature to be worth using at all I need it to be very consistent.
Any help would be greatly appreciated!

The problem you're running into is that materialize.css adds in other DOM elements that eventually appear on screen as the tooltips themselves - elements that you aren't targeting right now - elements that you didn't write in your HTML. You're targeting the original data-attributes that materialize.css uses to create those other elements. Updating those data-attributes after render is too little too late... by then, the materialize.css library has already looked at those attributes and gotten what it needs.
If you look at the official docs page on tooltips, we can investigate a little on that page. Open your dev console and scroll towards the bottom you'll see four DOM elements with the class material-tooltip - these were added by the library, and these are the DOM elements that actually get shown on screen.
Open those divs up and watch what happens to them when you mouse over the Bottom, Top, Left, Right buttons on the screen. As each tooltip appears, you should notice that the message-to-be-displayed gets injected as text into that element, and it animates some CSS properties.
If you want to change the text being displayed, you can probably skip editing the data-attributes (though if the library occasionally refreshes the content, changing the attributes might still be a good idea)... instead, we need to edit the text being shown in ^^THESE^^ elements.
If you only have one tooltip being displayed on that page, it should be as simple as something like this:
$('.material-tooltip').innerText = 'Copied to your clipboard ✅'
or if you have multiple on that page, you can attempt to identify which div is for which tooltip, but I suspect that could end up being unreliable. It would probably be safer to update ALL of the divs... the library will overwrite the content anyways next time it renders... which again, it gets from your data-attributes. Updating all of them would look something like:
$('.material-tooltip').each( eachDiv => {
eachDiv.innerText = 'Copied to your clipboard ✅'
})

here's only solution I found that works for me .. disclaimer - it's a bit hacky, basically it destroys tooltip on click and rebuilds it with new attr, then after a timeOut resets it back.
$('#shareLink').on('click', function (e) {
$('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Link copied!');
$('#shareLink').addClass('material-tooltip').tooltip('show');
setTimeout( function () {
$('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Copy link to Clipboard');
$('#shareLink').addClass('material-tooltip').tooltip('enable');
}, 2000);
});

Create element in HTML vs Javascript

The purpose - an image gallery.
As opposed to creating each gallery-image inside a 'gallery' div, like below:
<div id="html_collection">
<img src="picture_1">
<img src="picture_2">
<img src="picture_3">
</div>
I'm storing them inside a javascript array object - for simplicity, like below:
var js_collection = [
{
'gallery' : 'picture_1.jpg',
},
{
'gallery' : 'picture_2.jpg',
},
{
'gallery' : 'picture_3.jpg'
}
From there I will create an empty <div id="carousel"></div> inside the HTML file and append each 'gallery' image into it dynamically through JS, by clicking 'next' and 'previous' buttons. These buttons will cycle through the js_collection array.
For example:
function showCarousel(x) {
var slide = document.createElement('img')
slide.src = js_collection[x].gallery
var output = carousel.appendChild(slide)
}
The concern - I feel like redrawing the img node and fetching the current img from the JS collection everytime we hit next or previous.. may be dirty in a way. I know the same result can be achieved by showing and hiding imgs in the first 'html_collection' option - but I prefer the flexibility of the second implementation. Can I get away with it, or is this just wrong?
EDIT: I went with Leeish's suggestion and created a div like so,
<div id='carousel'>
<img id='carousel_slide' src='nameOfFirstSlideHere.jpg'>
</div>
From there, I dynamically switched the img 'SRC' rather in redraw the 'IMG' itself each time. Cheers

My concern about your script approach is that the user may experience a noticeable delay upon every click of the next/previous button while waiting for the next image to be retrieved, at least as your script is currently written. On the other hand, if the number of images is large, there would be a significant up-front delay in the HTML version as you waited for the entire group of images to load.
I think the best solution would be one that preloaded at least enough images to make sure that when the user clicks the button, the next or previous images is (at least usually) already loaded so the only delay is the tiny one to append the content. If your images are small, you might consider using CSS sprites to load several images at once and cut down on the number of HTTP requests, though this would require a bit more coding.
The other option, which is simpler to code, but doesn't reduce the number of image requests, would be have your showCarousel method create an image object, load the src, and append to the carousel for image x + 1, but hide that image x + 1 initially and show image x. That way, assuming the user spent a few seconds looking at each image, the user should see image x essentially immediately, while x + 1 gets ready just in case the user asks for it.

Looking for advice on what approach to take for multiple image swaps

I'm working on designing an interactive university campus map and need some direction with what I am looking to do.
Link to page: http://www.torontoclassfind.com/startpage.html
I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.
I could do that with the following:
$("#buildinglink1").click(function () {
$("#buildingimg1").attr("src","highlightedimage.gif")
})
Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.
The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.
I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.
Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.

Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.
I think you're asking to do something like this:
$(".any-building").click(function () {
//replace all building sources with the unhighlighted version
$(".any-building").attr('src', function () {
return $(this).attr('src').replace('buildingc', 'building');
});
//replace clicked image with highlighted one
$(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});
A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.

A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.
You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .
Example:
var $mainImage=$('#mainImage')
var $buildingLinks=$('.buildingliststyle a').click(function(){
/* "this" is the link clicked*/
/* get index of this link in the whole collection of links*/
var index=$buildingLinks.index(this);
/* perhaps all the image urls are stored in an array*/
var imgUrl= imagesArray( index);
/* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
var imgUrl=$(this).data('image');
/* store the current image on display (not clear how page is supposed to work)*/
var currImage=$mainImage.attr('src');
$mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
/* nw update main image*/
$mainImage.attr('src', imgUrl);
/* load ajax content for this link*/
$('#ajaxContainer').load( $(this).attr('href') );
/* avoid browser following link*/
return false;
});
/* button to reset main image from data we already stored*/
$('#imageResetButton').click(function(){
$mainImage.attr('src', $mainImage.data('lastImage') );
})
Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID
Code above mentions potentially storing image url in data attribute such as:
Building name

What is the best way to load a set of pictures to be shown later

I have a callback from an ajax call that returns a bunch of image links. I store this array in a variable (called fullPeopleList) and then on the click of a link, i show all of the images in the DOM. something like this:
function ShowAllPeople() {
var html = [];
$.each(fullPeopleList, function (i, person) {
html.push("<img title='" + person.Name + "' height='45' width='45' src='" + person.SafePicLink + "' /> ");
});
html.push(" <a id='showTop' href=''>Show Less ...");
$("#people").html(html.join(""));
}
the issue is that when i click on the list to show all of the people it takes a while to actually load all of the pictures so it shows the ugly browser empty placeholder box for each image until the images each load one by one
Is there anyway i can load these images in the background when i get the initial list so when i click on the "Show" link they are show up quickly ?

How about wrapping the area they shown in in a div then visibility: hidden initially then use the link to change it to visibilty: visible it? (preferably thropugh add/removing a class). Using hidden means the space still gets taken up as opposed to none which would not do that. You would still need to create areas of the right size though as you can't reserve space if you don't know about the image size (yet).

Why not just do the DOM manipulation you're doing now when the image links are initially obtained? Just pop them into a hidden element until the user decides to view them all, at which point ShowAllPeople() would simply make the element visible.

I believe that the "classic" method is to us abs positioning to "display" the image outside the viewport. Eg at -10000 0 location.
You can also use an img elements "onload" event. See SO Q
You should also investigate to ensure that there is no slowdown from your image server. I recommend that you store the images on Amazon S3. I do and they are both very fast and very cheap.
Finally, you should re-examine your User Experience. Eg show some animations while the images are loading. Or display the images using a gallery or carousel. The advantage is that if the user will only see one or two images at a time, it will seem faster. -- Since you can then be pre-loading the additional images in the background until the user (later) presses the Next button.

images created dynamically do not appear on screen! -> Javascript

I'm trying to do something simple to practice my Javascript (which I learned some recently) and I'm trying to do a game on it (pacman to be precise).
I am trying to build that game board on the browser by creating images dynamically. I've done an array like this:
var images= new Array(25);
for(i=0;i<25;i++)
images[i]= new Array(25);
And, for the game board I used a matrix done with 0 and 1's with 25x25 size (not going to post it here cause is too big and would make my text hard to read) called board.
For the images that I am using right now I have something like this:
var image_empty = new Image();
image_empty.src="Images/empty.jpg";
var image_wall = new Image();
image_wall.src="Images/wall.jpg";
For the initialization function I have something like this:
function drawField()
{
for(i=0;i<board.length;i++)
{
for(j=0;j<board[i].length;j++)
{
if(board[i][j] == 0)
draw(i,j,image_empty);
else if(board[i][j] == 1)
draw(i,j,image_wall);
}
}
}
And for drawing the images themselves I am using this:
function draw(x,y,img)
{
images[x][y] = new Image(22,22);
images[x][y].src = img.src;
images[x][y].style.position = 'absolute';
images[x][y].style.left = 40+x*22;
images[x][y].style.top = 40+y*22;
}
Every time I run this code nothing appears on the screen. I've tried several times use a load of things but nothing happens. I am saving the pictures (at least I think I am) and still nothing.
Can someone give me some pointers of what could be wrong?
PS: Some people pointed me out using the appendChild method would solve the problem, still, since pacman will be moving around I can't use it to store my images (and I was planning to use the draw function to draw anything).
And btw nor Web Developer plugin or firebug point out errors (the code is correct from their perspective).

Creating an Image in the method you describe doesn't actually display the image. Even putting attributes and styling to make it appear a certain way doesn't add it to the DOM. The advice about append child is correct. For example, if you had:
<div id="main"></div>
and you called
document.getElementById("main").appendChild(images[x][y]);
this would insert the image inside the div. You could do this repeatedly to generate the equivalent of...
<div id="main">
<img src... />
<img src... />
...and so on
</div>
Then, your CSS styling and positioning would work.
There's nothing wrong with your script, but Firebug does display a rendered version of the DOM. As you run the script, you will actually see the HTML tab of Firebug changing with the images you've added to the page.
Also, keep in mind that the DOM must complete loading before you are able to run this. You can accomplish this by doing a simple:
<body onload="drawImages()">
UPDATE: Once you've actually added the 25x25 images, the array still references the elements - they're just now part of the DOM. So, you can change their source via:
images[x][y].src = "newImage.jpg";
If you, for some reason, wanted to remove an image from the board, leaving a gap, you can remove it from the DOM
document.getElementById("main").removeChild(images[x][y]);
or just hide it via CSS.