How to pass markdown parameter to javascript file? - javascript

Im using Hugo and Im trying to pass a markdown parameters from md file to JavaScript file.
This is the markdown file
This is my javascript file

Are you using your own theme, or something you have downloaded?
You can edit the relevant template to output the parameter as a Javascript variable. And after that, use a Javascript function to reference that variable by name. Example:
<script type="application/javascript">
var title = "{{.Title}}"
console.log(title)
</script>
In this case, you would probably want to add a check to ensure that parameter exists, or is properly set before trying to print it. Otherwise the JS may throw an error if the variable is null or undefined.

Hugo is a static website generator - so it outputs HTML - if you want a "variable" from markdown to Javascript - with traditional JS and Markdown (i.e. no products like Alpine or something beyond the scope of Hugo) you would output the HTML and have Javascript - getElementbyID for instance.

Related

Java method doesnt execute from Javascript using Freemarker

I am trying to execute Java method in Javascript over object which I get from Java code using Freemarker.
I have java object "actual_id" of type "Settinga" and method "setActual_id" which just sets one attribute of the object. This is my call of the method in js:
var idd = ${actual_id}.setActual_id(variable);
Instead of execution in html code I see:
javaclassurl$Settinga#5beccfce.setActual_id(variable);
And there is error: myFunction is not defined
at HTMLButtonElement.onclick
Why it doesnt execute?
Following call is executed as expected but I need to include variable:
var idd = "${actual_id.setActual_id("aaa01dd3-abe4-4d50-a69e-62b04199b7c5")}";
I understand that Freemarker expressions are translated during page generation and when I use just string its easily interpreted and can be executed but during page generation my variable which I want to include in the call isnt known so need to make execution somehow else...
Because the way it works is this: FreeMarker is executed on the server, resolving all the ${...} to mere text, then the browser on the client side gets the resulting HTML and executes the JavaScript.

Assign an object variable from Twig to javascript

Using this syntax (according to Pass variable from twig to js):
var channelData={{ ChannelDataFeed }};
was rendered as a descriptive string of the object (which then caused an error in the js since I didn't use quotes).
I don't want to copy each attribute from the Twig variable since it's tedious, so I'm looking for a way to assign the variable as a whole.
Is there a way to do that? Thanks.

Javascript mixed with C# - unable to use variables

I have a JS function which I want to loop round a c# object passed from the controller. I then want to compare it to a HTML input value - which I have passed into the JS function as a string.
Function is called like
searchReleases($("[name=release]").val());
function searchReleases(givenName) {
var list;
var data = givenName;
#foreach (var a in #Model.Releases) {
if (#a.Name.Contains(givenName)) {
list+= a.Name + "=";
}
}
}
However I can't access the JS variable givenName within the IF statement.
I have spent a while trying to find an answer on google but have yet found a workable solution.
You should understand that C# is a server-side code and JS is executed on client-side.
So if you generate view in ASP.MVC you have access only to C# data. All information which you want to print on your page will be statically generated to HTML file.
Then you can pass this HTML page to browser and inside it, it would be executed JS code. But only based on statically generated data or JS variables.
You can't read JS from C#, but you can read C# from JS. So if it's a read-only operation, than convert your C# object to JSON and access it from the JS code.
Try this answer : Asp.net mvc passing a C# object to Javascript

How to set javascript variable to flask template variable using javascript

I want to set the javascript variable value to flask template variable in javascript. What I am trying is
$(document).on("click", ".prepopulate", function () {
var myBookId = $(this).data('id');
alert(myBookId); // The value is showing proper
{% set tempVar = 'myBookId' %}
alert ({{tempVar}})
});
But it's giving an error instead (UndefinedError: 'list object' has no attribute 'myBookId'). What is the way to set the template variable in javascript using javascript variable?
You want to use set like this:
%SET{"tempVar" value="myBookId"}%
You cannot do this because jinja runs before the page loads and on the server side but the javascript code is executed when the page is loading and on the client side (browser) so your myBookId variable doesn't exist for jinja (see this answer for more info). A way to achieve what you want is to use ajax. See here an example.
If you look at your rendered HTML you will see
alert (myBookId)
Unless you define a variable called myBookId, this is not valid JavaScript. You need to wrap the string value in quotes.
alert('{{ myBookId }}')
An even better way to do this is to let Jinja decide for you if quotes are needed.
alert({{ myBookId|tojson|safe }})
This will wrap string values in strings, leave integers alone, and use JavaScript booleans.

how to call javascript function from client side on anchor click

I have javascript function sample('textValue') and have to call at server side on anchor click. I tried below code
string text="xyz";
anchor.Attributes.Add("onclick","javascript:sample('"+text+"');
but the value of the text is not assigning correctly. Encoded string gets added. The result in view source looks like
javascript:sample('xyz')
But i need javascript:sample('xyz')
What server/backend language do you use? PHP? Do you use any framework (Zend, CakePHP...)?
On the JS side do something like this:
Option 1
Test
Option 2
Test
<script type="text/javascript">
document.getElementById('clicky-clack-link').onClick = function() {
sample('test');
};
</script>
Note: Also check out jQuery if you haven't.
I wonder if you could just do this:
string text="xyz";
anchor.Attributes.Add("onclick", function(){ sample(text); } );
What does it do? Well, the onclick handler takes a function with no arguments, right? That is, what to do if somebody clicks the link. If you're coding this by hand in HTML, you can use the javascript:a_statement_goes_here to describe the code to run. I expect the browser will just create a function out of that. Since you're assigning this in JavaScript, you have to do that yourself (unless you write out to the document - that might work) and assign the function. But you don't have such a function yet - you have one sample that takes an argument - hence the anonymous function closing the text argument.
This is based on the assumption, that the above is actually client-side code. I'd be very surprised, if JS didn't allow you to assign a function to an attribute. In fact, I think the problem you are running into, is JavaScript trying to be very smart and make sure assigning a string, will stay a string - that is why your ' got encoded.
Have a go, tell me how it went. Ta!

Categories