I am trying to use a javascript condition as a 'th:if' condition.
In specific i want to show a html element only when a scrollbar is existing in another element and tryed like this:
<div th:if="'javascript:document.getElementById(\'my-element\').scrollHeight>document.getElementById(\'my-element\').clientHeight'"></div>
Is something like this posible? Or should I do this in the '$(document).ready' function?
As #andrewjames rightly commented above, you cant embed evaluated JavaScript expressions into Thymeleaf. You might want to change your approach.
Try something like this to use javascript and thymeleaf together -
<script th:inline="javascript">
...
//your code
...
</script>
Read more about how to use thymeleaf and javascript together in official documentation -
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
Related
I'm using 'convertHangul()' method which is in java object in html with thymeleaf.
I already checked it works but there is some problem in case of with js variable.
It works successfully without js variable as below.
let tmp = '[[${#customUtil.convertHangul(3333221)}]]';
but this case, it doesn't work.
let txt = $('#money').text();
let tmp ='[[${#customUtil.convertHangul('+txt+')}]]';
I got a thymeleaf parsing exception. I think there is some syntax error.
how can I use js variable in thymeleaf?
In order to use thymeleaf with your Java-Script code, you need to use -
th:inline="javascript" with your <script> tag.
So your code will look something like this -
<script th:inline="javascript">
...
//your code
...
</script>
Refer the thymeleaf official documentation in order to get to know more about thymeleaf with javascript -
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
I want to write something like this in my Gatsbyjs Link tag:
<Link to=`/${this.props.latestPost.node.slug}`>Click Here</Link>
but it's not working, and my code looks like this:
Is there some way I could use a javascript expression inside the 'to' property? I want the slug to be dynamic, as the Link tag is for a 'recent posts' set of links, that will regularly update.
You need to escape it as Javascript:
<Link to={`/${this.props.latestPost.node.slug}`}>Click Here</Link>
I would like a for loop in jquery using .html()
like this:
.html('<select property="doctype" name="doctype"><%for (String number : list)
{%>'<option value="'<%=number%>'>'<%out.println(number); %>'</option>'<% } %>'</select>');
In Java's for each loop list it uses an object of java.util.ArrayList<String>.
Here the .html(); function will call when we click on add button.
Here my question is it possible to write jsp scriplet code in .html() of jquery.
function will call when we click on add button.
No you can't.
Jsp is compile time.
More over java script plays on client side and jsp playes on server side.
jsp ,jsf and other kinds of java web technologies are rendered on the server side. Since jquery is a client side technology, it's not possible.
Instead, you can make ajax calls via jquery and update the html.
You cannot have the client execute Java in your scriptlet. Fortunately, what you want to do is very common.
Don't try to dynamically generate JavaScript in a scriptlet or jsp. It's very easy to make a mistake and end up with malformed JavaScript.
Instead, use a .jsp to spit out HTML. Then use static JavaScript to grab that HTML and put it where you want in the DOM.
For example, your jsp file could look something like this:
<div id="destination">The select element will be added to this div.</div>
<select id="my-select" property="doctype" name="doctype">
<c:forEach items="${list}" var="number">
<option value="${number}">${number}</option>
</c:forEach>
</select>
<script>
$('#destination').append($('#my-select'));
</script>
I wish to create an MVC wrapper around jqPlot.
I want to have a helper object to render the required html container element and the required java scripts to draw the chart.
Something that will look like this:
#Html.jqPlot()
.ChartType(eChartTypes.PieChart)
.ChartData(someData)
.RenderChart();
Now I'm only at the initial design phase and I know what the jqPlot object should look like to achieve that, the problem I'm having is with the java script that suppose to be emitted to draw the actual chart using jqPlot.
Suppose I will render the following script in my .RenderChart() method
public string RenderChart()
{
string chartCode = string.format(#"
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
$(document).ready(function(){
var plot1 = $.jqplot ('{0}', [{1}]);
});
",this.ChartGuid, this.ChartData);
return chartCode;
}
The above is not actual code but just a general representation of the idea.
So the problem is that i don't want the Helper to emit the JS code into the body of the Html document, furthermore i cannot let it do that becuse some of the required scripts may be at the bottom of the html (as the best practice states).
Any suggestions ?
What would be the best way to emit JS code using an HTML helper if the situation requires it (like this one) ?
I think, listening to an even will be a possible solution, in this case the even of outputting or finishing the rendering of the footer. so maybe your code will give as an option to listen to an event and render at that moment, but this is of course platform dependent. I also worked on a php wrapper you can fork it here: https://github.com/oumsofiane1/jqplotPHPwrapper.git
and just implemented a helper, but of course you can extend that :-)
Hope this helps
I am trying to understand how the integration between jQueryUI and Emberjs should be done. I am new to both libs and to javascript so this might be a newbie question.
I have this jsfiddle set up: http://jsfiddle.net/pSKgV/1/ and it renders this resulting document:
<body class="ember-application">
<div id="ember129" class="ember-view">
<div id="ember163" class="ember-view ui-draggable"></div>
</div>
</body>
The code is mostly taken from this blog post: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Questions: How do I put something inside the inner div? I want to put some content that i can bind to something.
I have tried the following:
{{view App.Draggable}}Drag Me{{/view}} but that gives an error. I’ve also tried
adding this to the App.Draggable object:
didInsertElement: function() {
this.$().html(“Drag Me”)
}
but that did not give the expected results. How is the best way to use/access the jquery/jqueryui functions such as .html() in this situation?
Also, is the outer div necessary or can I make this view only render one div element?
regards
Oskar
http://jsfiddle.net/ud3323/XMgwV/
You forget the # symbol {{#view App.Draggable}}Drag me{{/view}}. You should also create namespaces in Ember using Ember.Namespace.create() instead of just using an empty {}