We Keep Coding

How pass 4 string values from HTML page to a javascript file?

Wish to pass 4 string values (not user inputted) from a HTML page to a javascript function in a separate file.
Have some javascript code which does an image flip. I've used this on many HTML pages and it worked.
Now I wish to put this code in a separate file, called "image-flip-comment.js" and each webpage will pass it 4 string values. The script will execute the function which will be displayed in the HTML page.
This is PART of the working code which was from a script on my HTML page.
<script language="JavaScript" type="text/javascript">
<!-- hide from non-JavaScript Browsers
Image_top1= new Image(100,100)
Image_top1.src = "../buttons/Rm_btn_fwa.gif"
//----more stuff ----
function SwapOutTop() {
document.imagebacktop.src = Image_top1.src; return true;
}
// - stop hiding -->
</script>
// here is PART of my code from the file "image-flip-comment.js"
// Imageflip Javascript routine, version w passed values shown as comments
// <!-- hide from non-JavaScript Browsers I'm going to assume this is
obsolete?
Image_top1= new Image(100,100)
Image_top1.src = "../buttons/${button_forw_a}!"
// Rm_btn_fwa.gif this went on above line
// more stuff for the other 3 parameters
function FwSwapBackTop() {
document.imagefliptop.src = Image_top1.src; return true;
}

Well you can have a parameterized function like
function imageflip(var your_parameter_name) {
...
...<!-- access the string here -->
...
}
And depending upon the event you want your image to flip call the function by onclick with parameter passed
For example:
<a onclick="imageflip('some_string_value')" >click</a>

chrome storage sync split error

Hello I am currently building a chrome extension that automates a website and on a html page I save the users checkout data using localStorage.
I then realized that you cant call local storage in a content_script
so what I did was this in the html page where I set and get the local storage.
this is what I use to save the users checkout info in the checkout html page for him to visually see and change when they want to:
var autofill = localStorage.getItem("checkout-info");
var filler = autofill.split(",");
$("#name").val(filler[0]);
$("#email").val(filler[1]);
$("#tel").val(filler[2]);
chrome.storage.sync.set({'autofiller': autofill}, function() {
});
the .val split is how I keep the data inside the inputs so the user can see it.
the chrome.storage is how I then take the data and call it later in the content_scripts file:
chrome.storage.sync.get(['autofiller'], function() {
});
checker = autofiller.split(",");
alert(checker[1], checker[2]);
and for some reason every time the alert part runs no matter what number it is it always alerts all the data not split with the commas.
Which is weird because the split works perfectly in the other file where I use localStorage.
I have also editet the file and tried this aswell:
chrome.storage.sync.set({
'info0': (filler[0])
'info1': (filler[1])
'info2': (filler[2])
'info3': (filler[3])
'info4': (filler[4])
'info5': (filler[5])
'info6': (filler[6])
'info7': (filler[7])
'info8': (filler[8])
'info9': (filler[9])
'info10': (filler[10])
'info11': (filler[11])
'info12': (filler[12])}, function() {
});
then in the content_scripts file tried this:
chrome.storage.sync.get(['info0', 'info1', 'info2', 'info3','info4','info5','info6','info7',
'info8', 'info9', 'info10', 'info11', 'info12'], function() {
});
alert(info0);
I also tried doing the set method without the () between the fillers and it also did not work. Can anyone help me Please?
Any advice on why the split isn't working?

There is a big difference between localStorage and chrome.sync: the first one is synchronous, and chrome.sync is asynchronous, which means you have to use a callback function to work with retrieved data.
It is a pretty rookie question. Please, check the answers to this question: How do I return the response from an asynchronous call?
In specifically to your case, all processing of a data should be inside the callback function:
chrome.storage.sync.get(['autofiller'], function (result) {
const checker = result.autofiller.split(',');
alert(checker[1], checker[2]);
});

Loader won't start until after process is complete

I'm trying to start a loader to show that I have a process going on. Converting a kml file to geojson. The converting part works fine. Larger kml files take longer to convert and I want to show that my web page is doing something while it's converting the file. I have this:
function convertFunction() {
loader.style.display = "block";
if(format.value = "kml"){
out.value = JSON.stringify(toGeoJSON["kml"]((new DOMParser()).parseFromString(input.value, 'text/xml')), null, 4);
}
};
I'm used to working with Android and when I order my processes like that, it usually starts the first one first.
Why does my loader not start until after my file is converted and placed into my out text view? How can I get it to work the way I want it to?
I'm not uploading the file to a server first. I'm reading the text from the file, placing the text in a text view(input), getting the text from the input, convert and put new text in the output text view. Then last button to create the geojson file and download it.

The reason that your loader isn't showing is that your conversion process is blocking code. This means that it will hold up the main thread (the UI thread) until the conversion process is done. The loader will never be shown because the conversion will already be done before the browser has a chance to show it.
A possible solution:
Use a Web Worker to carry out the conversion process on a separate thread. This will keep your UI thread free so that your loader can display and animate.
Another possible (simpler) workaround:
Display something on the page to indicate that the conversion process is going on, and use setTimeout to delay the conversion process just enough to allow the page to update. Note that you wouldn't be able to show any sort of animation during the conversion in this case because the blocked UI thread would prevent it from animating.
function convertFunction() {
if(format.value === "kml"){
loadingMessage.style.display = "block";
setTimeout(function () {
out.value = JSON.stringify(toGeoJSON["kml"]((new DOMParser()).parseFromString(input.value, 'text/xml')), null, 4);
loadingMessage.style.display = 'none';
// run any code that would use out.value
}, 100);
}
};

Inject/execute JS code to IPython notebook and forbid its further execution on page reload

I'm writing the library which has to embed javascript code to IPython notebook and execute it. The HTML/JS code looks like:
<div id="unique_id"></div>
<script>
var div = document.getElementById("unique_id");
// Do the job and get "output"
div.textContent = output; // display output after the cell
</script>
And the python code:
from IPython import display
display.display(display.HTML(code))
The side-effect is that the javascript code is stored in the output of the cell in notebook, and every time when the page is reloaded or the notebook is opened it will run again.
Are there any way of forbidding the code to be executed on reload? Or is it possible to run the javascript code without saving it within the output?

I've figured out the hack.
The trick is to use update=True argument of the IPython.display.display() which will replace the output with a new one (see here for an example).
So what is needed to be done: first output javascript that does the job, and then waits until the div with a certain ID is created, to fill it with the output. Once this display() is called, we could call display a second time updating the first one with the actual HTML with the div. So the javascript code once finished will fill it with the results, but the code itself will not be saved.
Here's the test code:
First, define the callback function (it looks like, it is important here to display it as HTML("<script> ... </script>") rather than Javascript(...)):
from IPython.display import display, HTML, Javascript
js_getResults = """<script>
function getResults(data, div_id) {
var checkExist = setInterval(function() {
if ($('#' + div_id).length) {
document.getElementById(div_id).textContent = data;
clearInterval(checkExist);
}
}, 100);
};
</script>"""
display(HTML(js_getResults))
And then execute the update trick in one cell:
js_request = '$.get("http://slow.server/", function(data){getResults(data, "unique_id");});'
html_div = '<div id="unique_id">Waiting for response...</div>'
display(Javascript(js_request), display_id='unique_disp_id')
display(HTML(html_div), display_id='unique_disp_id', update=True)
After the callback of get() is executed, the content Waiting for response... will be replaced with the output from the server.

After running into the same issue of Javascript executing on every notebook open, I adapted #Vladimir's solution to a more general form:
Use fresh unique IDs on every render (since old ID is saved with the HTML output of the notebook).
No polling to determine when HTML element is rendered.
Of course, when the notebook is closed, no HTML modifications done by JS are saved.
Key Insight: Replace Cell Output
from IPython.display import clear_output, display, HTML, Javascript
# JavaScript code here will execute once and will not be saved into the notebook.
display(Javascript('...'))
# `clear_output` replaces the need for `display_id` + `update`
clear_output()
# JavaScript code here *will* be saved into the notebook and executed on every open.
display(HTML('...'))
Making it Work
The challenge here is that the HTML and Javascript blocks can be rendered out of order, and the code which manipulates the HTML element needs to only execute once.
import random
from IPython.display import display, Javascript, HTML, clear_output
unique_id = str(random.randint(100000, 999999))
display(Javascript(
'''
var id = '%(unique_id)s';
// Make a new global function with a unique name, to prevent collisions with past
// executions of this cell (since JS state is reused).
window['render_' + id] = function() {
// Put data fetching function here.
$('#' + id).text('Hello at ' + new Date());
}
// See if the `HTML` block executed first, and if so trigger the render.
if ($('#' + id).length) {
window['render_' + id]();
}
''' % dict(unique_id=unique_id)
# Use % instead of .format since the latter requires {{ and }} escaping.
))
clear_output()
display(HTML(
'''
<div id="%(unique_id)s"></div>
<!-- When this script block executes, the <div> is ready for data. -->
<script type="text/javascript">
var id = '%(unique_id)s';
// See if the `Javascript` block executed first, and if so trigger the render.
if (window['render_' + id]) {
window['render_' + id]();
}
</script>
''' % {'unique_id': unique_id}
))
To keep the notebook clean, I would put this plumbing code into a separate .py file and import it from Jupyter.

My JSLink script will not work

I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.
~sitecollection/site/folder/folder/file.js
And
~site/folder/folder/file.js
The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?
Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields = {
// Add field and point it to your rendering function
"Title": { "View": overrideTemplate },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).
~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js
You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!
I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.
Hope this helps.