Javascript InnerHTML is a scriplet code displaying as a text - javascript

I am using javascript innerHTML to post some data from javascript. Please find the below code:
var innerHTML='<% SomeClass.getSomething %>';
document.getElementById("something")=innerHTML;
HTML:
<div id="something"></div>
Now i am able to see the output as <% SomeClass.getSomething %>. But how do i render it to show the value of getSomething. Please Help.
The SomeClass is defined in jsp where the html is there.

Assuming your code is in a JSP file I think you want the following
var innerHTML='<%= SomeClass.getSomething %>';
The <%= tells the JSP to output the expression in place.

Try
var innerHTML='${SomeClass.getSomething}';
If you are passing it througn model.

Related

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

How to convert string into html format using ejs in javascript

The scenario is the user will enter the text in HTML format (e.g. <\/b>Testing<\/b>) then the inserted text will get saved into the database(HTML code as a string (e.g. <\b>Testing<\/b>).
I want the string fetched back from the database to be displayed as HTML text (e.g. Testing).
I followed the below snippet but didn't get anything as output.
Note: <%= cData.description %> worked fine when executed simply but displayed HTML code as plain text.
test.js (route file):
var testid = 234123;
b.find(testid, function(data) {
b.otherdet(testid, function(cdata){
res.render('blogdesc',{
Data: data,
cdata: cdata
});
});
});
test.ejs file:
<p class="" id="descid"></p>
<script>
var $log = $( "#descid" );
html = $.parseHTML('<%= cData.description %>'); //description is column in database
$log.append( html );
</script>
https://stackoverflow.com/a/8125053/20394 shows how to emit HTML as-is in EJS, but please make sure that you sanitize that content to avoid XSS.
I've found, where did it go wrong. I was using:
html = $.parseHTML('<%=blogData.description%>');
while the actual syntax should be this:
html = $.parseHTML('<%-blogData.description%>');

How to pass or use variable from GSP in Javascript

I have below line in my grails gsp file.
<div class="pagination">
<g:paginate total="${lotCount ?: 0}" />
</div>
I want to pass lotCount value to one of my javascript named area-switcher.js file to further use it. How can I do this?
I tried to refer one suggestion from How to pass a value directly from a controller to a javascript file in Grails
where I do below in my gsp
<g:javascript> var theId = ${lotCount} </g:javascript>
and try below in my js file for testing
alert(theId);
but it doesn't work.
Got error like ReferenceError: theId is not defined.
Please help.
Use a hiddenField:
<g:hiddenField name="lotCount" value="${lotCount}" />
<div class="pagination">
<g:paginate total="${lotCount ?: 0}" />
</div>
Your solution should work.
Just ensure that in source of generated html page line
<g:javascript> var theId = ${lotCount} </g:javascript>
is placed before line which includes area-switcher.js
<script type="text/javascript" src="area-switcher.js">
Besides that, there are two more options to pass some value from .gsp to javascript file (examples use jQuery):
By using of data attribute. For example,
gsp (here div, span, input, other tags could be used):
<div id="countElem" data-count="${count}">
js(jQuery used here):
var count = $("#countElem").data('count');
As was mentioned in another comments, by using of hidden field:
gsp:
<g:hiddenField name="countElem" data-count="${count}"/>
js(jQuery used here):
// hidden field will have name and id equals to countElem
var count = $("#countElem").val();

Passing Java List into included JSP via jsp:param

I am trying to pass a Java list into an included JSP page and am having no luck.
I capture the array in a scriplet on the first JSP page:
<% User user = User.getUser(request); %>
..and I pass it to the included JSP (which is essentially a header) like this:
<jsp:include page="includes/mySubNavigation.jsp">
<jsp:param name="myColl" value="<%=user.getObjs() %>" />
</jsp:include>
The problem comes when I try to iterate over and read the collection to build the subnav:
$(function(){
var myObjs = ${param.myColl}
});
The output from this is a String showing the type of Object, i.e.
[com.myProj.app.MyCustomObject#87eerftte]
Can't I pass an Array into the included JSP via jsp:param? How am I supposed to pass my collection along so it can be read on the included JSP?
Thanks for any helpful tips!
Just using JSP EL to put collection into request scope via:
<c:set var="myObjs" value="<%=user.getObjs()%>" scope="request"/>
And on the included JSP I access the collection using this:
${requestScope.myObjs}
Hope this helps somebody.

Access ASP.NET Literal value from Javascript

How can I access the value of an ASP.NET Literal control from JS. I have the below but it doesn't work:
var companyname = document.getElementById('litCompanyName').text;
var companynumber = document.getElementById('litCompanyNumber').text;
Thanks
You must public your literal in a webform/view, because you can't public asp.net code in .js files, you can do something like this:
<script>
var litCompanyName = <%= [YOUR LITERAL]; %>
</script>
and then use it
In Asp.net When Page is Going to Rendered it will change its ID in Html.
Check Html of Page using FireBug in Mozilla Firefox.
example of label
<asp:Label ID="SaveTime" runat="server"></asp:Label>
var companynumber= document.getElementById('<%=SaveTime.ClientID%>').Text
and For Literal You Need to Wrap with div or span
<span id="yourId"><asp:Literal ID="SaveTime" runat="server"></asp:Literal></span>
js:
var value= document.getElementById('yourId').innerText;
The short answer is that you can't. A literal control is just that. The value in the Text property is 'literally' outputted to the response stream.
You can either set a hidden field or use a Label. Just remember, referencing ASP.NET controls from Javascript, it's easier to use ClientIDMode="Static" or wrap your literal in a span with an ID.
For example:
litCompanyName.Text = "<span id=\"company-name\"> + Company.Name + </span>";
Then in your JS
var companyname = document.getElementById('company-name').text;
The literal control only exists on the server side, when the page is rendered it's only the text of the control that ends up in the page. So if you have:
The company name is <asp:Literal ID="litCompanyName" runat="server" Text="Google" />
all that ends up in the HTML code is:
The company name is Google
To access the text from Javascript you need an element around the text, for example:
<span id="CompanyName"><asp:Literal ID="litCompanyName" runat="server" /></span>
Now you can use document.getElementById('CompanyName').innerHTML to get the text from the literal.

Categories

Resources