Can't add button under div - javascript

I have a Chrome extension that inserts a button onto HTML pages. I got it to add the button under one div. Now I'm trying to get it to add it under an image in that div, and it won't work — no errors, the button just doesn't appear. When I do console.log(image_div); it prints out the image object.
Version that works:
var uCW = jNode.closest("[role='article']");
uCW.append(button);
Version that doesn't work:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
uCW is the variable name I gave to the parent div, and image_div is the variable name I gave to the child within uCW that contains the image.

The problem that you are having is you are appending to a div successfully, but appending to an image is failing. The reason is you can't append to an image, you have to use 'after' since an image isn't an object that can content appended to the innerHTML of it.
So change this:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
to:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.after(button);

Related

trying to grab image url within div's children

I'm making an extension that grabs an image URL within the "uCW" div on an HTML page.
Currently, I have:
var uCW = jNode.closest("div._q7o");
var image = uCW[0].children[1].getElementsByTagName("img")[0].src;
console.log(image);
That finds the image by going into the div/children and pulling the image. Unfortunately, this method is problematic, since it stops working if the children change, which they regularly do.
Instead, I want to select the image by searching the div and all its children (there are a lot of them) for the first image/string that starts with "https://external" (all the images I want start this way, and that doesn't seem to change.)
This is what I tried:
var uCW = jNode.closest("div._q7o");
var image = $(uCW).find([name^="https://external"]).src;
console.log(image);
This doesn't work. The console just prints "undefined."
You could do it like this, if ucw is a classname (if it's an id, you would write $("#ucw") instead):
var image = $(".ucw").find('[src^="https://external"]').attr("src");
console.log(image);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ucw">
<img src="https://external/1.jpg"/>
</div>
If your images have a name attribute with the source of the image as value, you can also adjust your attempt to fetch the images via their name attribute like you did:
var image = $(".ucw").find('[name^="https://external"]').attr("src");

How to find link in div where name begins with X

i'm trying to find a link where the name of the div begins with a certain text.
not OK when searching by "name begins with":
link = $("div[title^= 'label']").find('a').attr('href');
var contentOfFile = loadFile(link);
OK when searching by class:
link = $(".o_mail_thread").find('a').attr('href');
var contentOfFile = loadFile(link);
i'd like to get the content of a file, it works with an unique file as shown in "OK", but when there are multiple files, i can't select the right one based on this search "NOK".
I suppose you have some divs with class o_mail_thread and those divs have anchor element. divs dont have name. you have to select them by class
$('.o_mail_thread').each(() => {
var link = $(this).find('a').attr('href');
//do what you want with your links.
});
I didn't understand your multiple file reference. You have to share your full html code.

Moving a value after php returns the table

I have a title on my page. It is inside a div tag. When the page is displayed it is simple and says "Net Control Manager". After the user makes a selection a PHP program runs MySQL and returns a table. It also returns a value that I want to put into the title. So that it would say "Net Control Manager: PCARG" for example.
The problem is I'm not sure how to put that extra piece into the div. I write the value to another div with an echo from the php "echo $value" which is returned correctly. Then in an onload in the body tag I use a function to retrieve the new div (newport), and add it to the title div. But since the onload happens first all I get is "undefined".
How do I make it wait for the new div to be written with the new data? Or is there another method I don't know about.
If I read this correctly, you're just looking to pick up some text and append it to another div's text?
You could do something like this -- making sure it's at the bottom of your HTML before the closing </body> tag.
<script type="text/javascript">
$(document).ready(function () {
var title = $('#title'); // Or whatever your div id or class name is.
var newport = $('#newport'); // Or whatever your div id or class name is.
// This will append the text from your `newport` onto your `title` div.
title.text(title.text() + ' ' + newport.text())
});
</script>

onmouseover & onmouseleave functions not working properly

I'm new to this site and relatively new to web development. I was trying to incorporate javascript to this webpage I made with just HTML & CSS. This webpage is basically an online store for certain products and what I was trying to do was that when someone has their mouse over one of the products, it would provide some details such as the name of the product and the price and when they move the mouse out, it would go back to just an image of the product. For some reason, with my code, it will change the elements so that it shows the details but it won't change back to the original image after the mouse moves away.
I've tried everything I could think of and the goal of this project was to make sure I had an understanding of javascript so I was trying to do this without any jquery. Any advice would be greatly appreciated.
Here is the code:
//Holds all div elements with class attribute "productlink" which hold the product images
var products = document.getElementsByClassName("productlink");
//When this function is called, the product image is changed to show an image of the product, the name and price
//classNum - specifc class element being called
//priceAmount - price of product
//describe - Description/Name of the product
function hoverDetails(classNum, priceAmount, describe) {
//Div container for details, image of product, price of product and description
var divContainer = document.createElement("div");
var image = document.createElement("img");
var price = document.createElement("p");
var description = document.createElement("p");
var priceTextNode = document.createTextNode(priceAmount);
var descriptionTextNode = document.createTextNode(describe);
description.appendChild(descriptionTextNode);
price.appendChild(priceTextNode);
image.src = picArray[classNum];
divContainer.setAttribute("class", "newdiv");
image.setAttribute("class", "newimg");
price.setAttribute("class", "itemprice")
description.setAttribute("class", "itemdescription");
products[classNum].parentNode.style.textDecoration = "none";
divContainer.appendChild(image);
divContainer.appendChild(description);
divContainer.appendChild(price);
//This should replace the current image with the details specified eariler
//childNode is set to 1 due to a #text node in the div
products[classNum].replaceChild(divContainer, products[classNum].childNodes[1]);
}
//This function, when called, replaces the detailed product with just an image of the product
function originalImage(classNum) {
var image = document.createElement("img");
image.setAttribute("class", "display_image");
image.src = picArray[classNum];
products[classNum].replaceChild(image, products[classNum].childNodes[1]);
}
Here is the element that is referencing these functions:
<a href="#">
<div class="productlink" onmouseover="hoverDetails(0,'$85.95','Printer') "onmouseout="originalImage(0)">
<img class="display_image" src="images/printer1.jpg" />
</div>
Don't the mind the variable names and I'm sorry if my code seems too much. Any help would be appreciated.
EDIT: Just to let people know, both functions work. The onmouseleave event works when the onmouseover event is not attached. Additionally, the code works when the onmouseover event is replaced with onclick. When I replace onmouseover with onmouseenter, the code works once but never again. This is very strange.
There is actually another mouse event called onmouseout. Add another attribute called onmouseout="removeHoverDetails()" and then inside of removeHoverDetails() select everything and say .visibility = "hidden"; Or whatever way you want to use to get rid of the elements in the popup. Also check out w3schools tutorial on onmouseover and onmouseout: http://www.w3schools.com/jsref/event_onmouseover.asp
Okay I found the solution to my problem. I put the onmouseover event on the image element of the "productlink" div an left the onmouseout event on the div and looks to be working fine.

Javascript change the src of a table cell

I am trying to change content of the first cells of rows into some images. Below is my Javascript code which doesn't work. I tried to use p.appendChild(img), but as it's in a for loop, each time I pressed the button that invokes this, it will append another image to that row. I reckon that I am not using .src correctly? Can someone please help?
var rowx =document.getElementById(rowid); //the row that I want to change its first cell
var uri= "baseuri"+rowid;
img = document.createElement('img');
img.src= uri;
var p = rowx.cells[0];
p.src=img; //this doesn't change the first cell's content.if I use p.appendChild(img) it will append new img each time it gets executed.
cells gives you an HTMLCollection of td elements, which do not support a source attribute. if you want to edit the content you would need to append or modify its innerHTML, like
rowx.cells[0].innerHTML="";
rowx.cells[0].appendChild(img);
You don't need to create another image, you can simply change the src property of the current one:
rowx.cells[0].querySelector('img').src = uri;
If the image is the only (or 1st) element inside the cell, you can use firstElementChild, even better:
rowx.cells[0].firstElementChild.src = uri;
References: querySelector and firstElementChild
.

Categories