how to use variable key in thymeleaf expression in js side - javascript

since few days, i tried to avoid to put an harcoded list in my JS to display a list of header labels.
I have tested many stuff but do not manage to find the way to do it.
In Html, if a put a list inside the model, the value is well interpreted by the tag th:text
<td th:each="header:${headerMemberLiaisonList}" th:text="#{'planner.table.header.'+ ${header}}">???planner.table.header</td>
The issue is that my list is not computed at this moment because it depends on the actions of the user in this view. So I try to move it in JS part.
But the same peace of code in js which should be [[#{'planner.table.header.'+headers[i]}]], is not interpreted because the value between brackets is read as string.
any idea?

Related

Jade / Pug: Hide div unless variable has data

I want to hide a div unless the div has received data to the local variable. I have this at the moment:
div#cost
p You earn #{cost} a day!
But it displays on the page. How do I hide it until it receives the data? Im confused about Jade's if/else syntax
-if (cost)
div#cost
p You earn #{cost} a day!
First of all, the - means that it is unbuffered Javascript code. Meaning this will not get rendered in the final version of the template. If you would want that, you should use a script tag like so: script..
Second, the if-statement will check if cost is not equal to null or undefined. When it doesn't exists, the code inside the if-statement will be skipped.
The above code will result in the following HTML if cost is not equal to null or undefined:
<div id="cost">
<p>You earn ... cost a day!</p>
</div>
What you are trying to achieve is not possible.
jade/pug is a template engine, you can give placeholder variable, perform loops, conditions etc but your browser does not understand jade/pug it understands only HTML, which means your template will be converted to a static HTML content before being displayed.
The if/else block decide what is going to be part of the generated HTML file, once the file is generated jade/pug does not have any control over it.
If you want to dynamically control your DOM you can use a web framework such as Angular, Vue, React or you can do DOM manipulation using jQuery or by hand with regular Javascript.

How to refer to Presentation Variable in JavaScript?

I'm on OBIEE 11g. I am trying to create a printer-friendly dashboard that shows in the footer how the dashboard was prompted on each page. I don't want to use the filter object because it is query specific and I have multiple queries per dashboard.
I've assigned all prompts with a presentation variable and I've referred to the presentation variables in the footer. I now am almost where I want to be. I would now just like to use javascript logic (supported in footer section) so that all blank prompts are filtered out.
Is it possible to refer to a presentation variable in JS? If so, how should I build the syntax?
UPDATE: The use of JS was not needed. There is a feature on the syntax of the Presentation Variable code that allows you to enter how you display nulls. The basic code format is this: #{var_name}. Adding an extra set of curly brackets activates the ability to modify the default display. #{var_name}{} displays the blank that I was looking for instead of the variable name I had before.
The use of JS was not needed. There is a feature on the syntax of the Presentation Variable code that allows you to enter how you display nulls. The basic code format is this: #{var_name}. Adding an extra set of curly brackets activates the ability to modify the default display. #{var_name}{} displays the blank that I was looking for instead of the variable name I had before.
I'm not sure if you can reference a presentation variable from JS, and I think that's still an interesting question.
However, a more scalable/supportable solution might be to use the built in functionality – which I think could meet your requirement.
You could either make a new Analysis and drop in as many columns as you have presentation variables, and change the column formula for each in turn to reference your presentation variables. I'm not sure how you'd display that though.
Alternatively, I would probably do it in a Narrative view, where you can reference the presentation variables directly and possibly format it a little better.
Inspiration from Nico Gerard.

Building HTML passing it in as XML and also using javascript?

This project I'm working on is building large amounts of HTML into a string and then putting it an XML string.
Then once that XML is fully built it is being saved into a hidden input form element. Then it is being passed to a javascript function which then parses that xml string.
The javascript function applies the $.parseXML to the value that was in the hidden input variable.
For the most part everything is working, however, there are also some javascript calls in that HTML string (i.e onclick).
When I look at the HTML string in Firebug the onclick event looks like this:
onclick="lbRowClick(this,ptObj_listbox0, 0);"
The problem I am having is right now the lbRowClick function is never firing. I imagine that I will also have an issue with the second parameter not having quotes around it as well (every time I put quotes around it I get an XML error).
I've been looking at this for awhile and I'm not sure which way to go. Any advice would be helpful.
I imagine that I will also have an issue with the second parameter not having quotes around it as well (every time I put quotes around it I get an XML error).
If the onclick block has a syntax error in it, it won't execute and lbRowClick won't be called. If the 2nd parameter should be a string, try using single-quotes:
onclick="lbRowClick(this, 'ptObj_listbox0', 0);"
If that results in an XML error, try using ' for them:
onclick="lbRowClick(this, 'ptObj_listbox0', 0);"
If you can use jQuery, you might try using Live(), and see if it will pick up the late bindings in the HTML string.

Is it possible to insert rendered ASP.NET controls with JavaScript?

I'm not very familiar with ASP.NET, so forgive me if I word this question poorly. We build lots of .aspx pages that include dynamic "labels" that render as plain text when viewed in the browser. For example, if the source of my .aspx contains this code:
<p>Thanks for trying <em>{ProductName}</em>!</p>
The page when viewed in the browser will read:
Thanks for trying My Company's Product!
Now, I want to able to insert that text on the page dynamically via JavaScript. The problem is that if I have a script write that same bit of code to the page, I get this:
Thanks for trying {ProductName}!
I assume this is because the page has already finished rendering before the script runs, so the dynamic label gets treated as plain text instead of rendering on the server side first.
Is there any way at all that I can do this?
The .aspx scripts are server side rendered, so they are rendered at your web server and then downloaded by the user, so the user already gets a page with that values.
On the other side, javascript is rendered at the client machine, so he downloads the script, and the browser renders the page, thats why you dont get that value show.
There are some workarounds to do that.
First, and the better one is to try ajax. That means that the javascript will do another server request to get that value and show it to the user, and that value will come from server.
Second, you can try to put these server variables on script variables or hidden html elements. That way, when you want to use that values, you can get it from the local script(javascript). It would be something like writting the value on a hidden or hidden input " >, and recover it like
document.getElementById("value_id").innerHTML or even set the javascript variables at your page, doing something like
var val = "<%=ProductName%>";
I'm not familiar with that syntax. I would expect something like <%= ProductName %> instead. What flavor of ASP.Net are you using? WebForms? MVC? Spark?
Since curly braces are integral to the JavaScript language, it is likely that JavaScript tags are not parsed for string replacement. It would take a pretty robust parsing engine to know when the curly braces indicate a string replacement and when they are part of the JavaScript code. If you can switch to the <%= ProductName %> syntax for your JavaScript, that may be the easiest. If that's not an option or doesn't work for your situation, try putting the strings in the html, and extracting them from JavaScript. A hidden input seems ideal:
<input type="hidden" id="ProductName" value="{ProductName}" />
You may find it doesn't work in attributes. Fine, just use a hidden span:
<span class="hidden" id="ProductName">{ProductName}</span>
(don't forget to define a "hidden" css class to do the actual hiding: .hidden { display: none; })
Get at your strings with JavaScript:
var productName = document.getElementById("ProductName").value; // hidden input
var productName = document.getElementById("ProductName").innerHTML; // hidden span

How do I insert a DOM element in an ordered list (in Dojo)?

I'm trying to make an AJAXy submission and have the resulting partial be inserted into my list at the proper place. I can think of a few options, but none is terribly good:
Option 1: Return JSON, do rendering in Javascript. That seems like the wrong place to render this, especially since the list itself is rendered in my application server. It has the benefit, though, of making it easy to access the value to be sorted (response.full_name).
Option 2: Return an HTML fragment, parse the sort value out. Parsing HTML in Javascript is probably worse than rendering it.
Option 3: Return an HTML fragment that also contains a <script> section that gets evaluated. This could add the DOM node to a master list and then make a JS call to insert itself at the right point. The downside here is that IE doesn't evaluate <script> tags when innerHTML or appendChild are called.
Personally I would do #1. Nothing is wrong with combining the server-side generated HTML with the client-side generated one, but if it is a complicated procedure it is better to keep it in one place (on the server in your case). So you may want to return (as JSON) two values: the sort value, and the HTML snippet.
After that it is simple: find the position, instantiate the snippet (e.g., using dojo.html.set()), and place it with dojo.place(). Or instantiate it directly in-place.

Categories

Resources