We Keep Coding

Background-image:URL jumbles the url. when made in JS

In my Js script i tried escaping,setting string to another complete variable and everything i can think of doing.
But cant figure out why the "/ "character in the background-image:url("../") is giving me such a hard time.
Here is a piece of code from my Js script.
let image = "../../" + value.image;
receptenMarkup += '<div class="receptImage" style="background-image:url("../../'+ value.image +'");" alt="test"></div><img src="'+ image + '">';
"../../'+ value.image +'" comes back correctly in the console.log as the path.
Image comes back as the correct path.
Example:
../../images/recepten/thai-chicken.jpg
My console.log of the entire markup also shows a correct path.
<div class="receptImage" style="background-image:url("../../images/recepten/noodle- soup.jpg");" alt="test">
but!! here is the Result in the inspector..
RESULT INSPECTOR:
<div class="receptImage" style="background-image:url(" ..="" images="" recepten="" noodle-soup.jpg");"="" alt="test"></div><img src="../../images/recepten/noodle-soup.jpg">
Notice the image url works great and fine!
The CSS part on the other hand gets all sorts of crazy.
I cant get this to work properly and point the background image to the right path.
I collect a lot of Json data and make cards based on that.
the background image needs to be in a div so i can style it in RWD and not deform like an image tag does.
Somehow i cant get this to work.
Can anyone please give me pointers?
I tried
1: using ../../ to escape ../../ to escape
2: using just "/'value.image'" to go to the root of the website as W3 suggests, no go.
I bee at this for hours now and my deadline is approaching..
Please can anyone explain why the / becomes a space and i get stuff like image=.. in there which i didnt even type that wat.
URL and IMG react differently.

The problem isn't the /, it's the mismatched quote characters delimiting the strings and attribute values.
The simple fix for this is to use a template literal:
receptenMarkup += `<div class="receptImage" style="background-image: url('../../${value.image}');" alt="test"></div><img src="${image}">`;
Side note; I would suggest making all paths relative to the site root, not relative to the current page.

Editing Javascript File

I am editing a javascript file for the first time and was wondering if someone could help point me in the right direction.
h&&""!=g&&(k+='<strong>Get Directions:</strong> '+g+"<br>"),
The code above is just a snippet from a larger file but is what I am trying to edit. I have added 'Get Directions' but now I want to remove the URL being shown in the middle of the link so that it reads "Click Here".
The +g+ is outputting an office URL.
I am unsure of how to edit the line as everything I do breaks the module.
E.g. example that does not work....
h&&""!=g&&(k+='<strong>Get Directions:</strong> 'Click Here"<br>"),

It's confusing because you are using ' and " on the same line to enclose strings. The "Click Here" text should be inside the string like this:
Click Here<br>')

Does this work?
h&&""!=g&&(k+='<strong>Get Directions:</strong> Click here<br>'),

How to get a website's HTML with runtime AJAX changes applied with Perl and Selenium?

For websites that rely on Ajax or javascript to render data, how can I use WWW::Selenium to save the data? My following code was able to perform all the clicks and get to the correct webpage, however it did not save the data (I mean the list of all contests) because it is not in the html source code. I tried $sel->get_body_text() but it did not work either. Can you help me save the rendered data to a txt file or htm file? Thank you.
use WWW::Selenium;
open (FO, ">test.htm");
my $sel = WWW::Selenium->new( host => "localhost",
port => 4444,
browser => "*firefox",
browser_url => "https://www.kaggle.com/competitions/",
);
$sel->start;
$sel->open("https://www.kaggle.com/competitions/");
$sel->click("all-switch");
$sel->click("completed");
print FO $sel->get_html_source();
print "Done\n";

Disclaimer: I have not tried this!
You should be able to use get_eval($script) to run some JavaScript that grabs the full current DOM for you. That's different from the page's body text, because the DOM is the current representation, and not what the browser parsed initially.
my $html = $sel->get_eval(q{document.getElementsByTagName('html')[0].outerHTML});
When I run that JS in my browser's console it gives me the full page's current representation. Here's a snippet that creates an empty <div>, then uses jQuery to add some text into it and afterwards uses the plain JS code from above to fetch the HTML of the full document and alert it. You'll see it contains the text we added.
$('#foo').text("bar");
alert(document.getElementsByTagName('html')[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" />

how to set href value at runtime through javascript?

i have created a html page which contain two iframe .
first iframe refer another html which contain a list of members
this list is not fixed and every member name there is a separate html page. which is shown by second iframe.
i have written some javascript code to get the value of that list but i am unable to update the src link of second iframe.
document.getElementById("frame2").setAttribute("src", name);
i have used this code to set the value but i didn't work. i have written this code in javascript file in setFileName(name) function.this is user define function.

might want to give this a try:
window.frames["frame2"].src = name
Information from: Changing Iframe source using Javascript

I have faced this query once and following article helped me. Hopefully it will be useful to resolve your issue.
http://www.dyn-web.com/tutorials/iframes/

i got my answer
top.parent.frame2.location = name;
like this we can change the src of another frame.
thanks all of you..

Injecting javascript and HTML using AJAX

First of all I would like to say that while this is the first time i post here these boards have helped me much.
With that said, I have got a strange issue regarding AJAX and scripts.
You see, in my web application i used custome JS context menus. Now each of them menus is implemented with specific features depending on the object and if the object exists.
E.x : if we got an upper menu place holder but no upper menu the context menu will have one option which is "add menu".
But say we already have the upper menu the context menu will have different options such as "edit menu" etc...
so far so good, however, say we have an upper menu place holder and no menu and then we added the menu (still no refresh on the page) i need to generate a new context menu and inject it right? so i do just that along with the new menu i just built.
all that code goes into the SAME div where the old context menu script and upper menu place holder were so basicaly they are overwriten.
Now the menu itself is in HTML so it overrides the current code the JS however acts wierd and will show now 2 context menus the old one and the new one even though i overwrite it's code.
I need to some how get rid of the old context menu script without refreshing the page.
Any ideas?
P.S
all the JS are dynamicaly generated if that makes any difference (i dont think it does.)

Well after some head breaking i figured it out..
(the problem not the solution yet) this is the ajax function right?
$.ajax({
type: "GET",
url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
dataType: "html",
success: function (data) {
$('#CPH_Body_1_content_holder').html(data);
}
});
now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.
so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.
what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.
ill let you folks know if that works out.
cheers and thanks for the advice these forums rock.

No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.
See my soluition here: trying to call js code that is passed back from ajax call
Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.
//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";
//HTML /////////////////////////////////////////
//Locate our HTML holder Div
var wndw=document.getElementById("display");
//Update visible HTML
wndw.innerHTML = htmlCode;
//Javascript ///////////////////////////////////
//Create a JSON Object to hold the new JS Code
var JSONCode=document.createElement("script");
JSONCode.setAttribute("type","text/javascript");
//Feed the JS Code string to the JSON Object
JSONCode.text=javascriptCode;
//Locate our code holder Div
var cell=document.getElementById("codeHolder");
//Remove all previous JS Code
if ( cell.hasChildNodes() )
while ( cell.childNodes.length >= 1 )
cell.removeChild( cell.firstChild );
//Add our new JS Code
cell.appendChild(JSONCode);
//Test Call///////////////////////////////////////
test();
This code will replace all previous JS code you might have put there with the new JS Code String.

Thanks for the replies.
Dutchie - that's exactly what I did. now the thing is the HTML is properly overwritten (I didn't use append I overwrote the entire div) and yes the javascript just keeps on caching...
I tried to disable browser cache and still the problem persists i get multiple context menu per item the more I ran the ajax function...
Jan,
My AJAX function builds a div tag and script tags and places them into another container div tag in the page.
What's suppose to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version.
the div inside the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jQuery function calls the context menu i get multiple menus...
I don't think code is needed but I will post it tomorrow.
Any ideas?