Thymeleaf var as value of attribute - javascript

$("#comparison-qty").html('<div id="comparison-qty"><a href="'+
[[${url_compare_view}]] +'">' + error.transport + '</a></div>');
Hello, I have this code. I want [[${url_compare_view}]] this thymeleaf var to be value of attribute href, but it isn't work. Where wrong?

First you have to store your variable on inline script, in order to access its data later, because thymeleaf only works in html page not on js files. Try this.
<script th:inline="javascript">
/*<![CDATA[*/
var urlCompareView = /*[[${url_compare_view}]]*/ 'url_compare_view';
/*]]>*/
</script>
Then you can use ir on your javascripts.
$("#comparison-qty").html('<div id="comparison-qty">' + error.transport + '</div>');
Hope it helps you.
Edit
If you want do it all inlinie. try this.
<script th:inline="javascript">
/*<![CDATA[*/
var urlCompareView = /*[[${url_compare_view}]]*/ 'url_compare_view';
$("#comparison-qty").html('<div id="comparison-qty">' + error.transport + '</div>');
/*]]>*/
</script>

Related

I am getting error running function in html

I have a function that I need to call from html. However, the way I have the call at the moment, it is causing typeError. Can someone show me how run this function: splitboxes(); in my html markup.
The function is declared earlier and works if I run just 'splitboxes', but need to call it as a function.
Thank you
$("html").append("<div id='dialog-success' />");
var dialogSuccess = $("#dialog-success");
dialogSuccess.html('<br />Here the details of your submitted intake ' +
'<br /><b><font color="green">' + depts + '</font></b><br />' + splitboxes(); +
' This entry was successfully submitted to the database.<br />Thank you.');
You have syntax error:
...+ splitboxes(); + ...
to
...+ splitboxes() + ...
Please use IDE to do your coding. It saves you aloooooot of headache :)
$("html").prepend("<div id='dialog-success' />");
var dialogSuccess = $("#dialog-success");
dialogSuccess.html('<br />Here the details of your submitted intake <br /><b><font color="green">depts</font></b><br />' + splitboxes()+' This entry was successfully submitted to the database.<br />Thank you.');
function splitboxes(){
return "<i>output from splitboxes() function</i>";
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
just remove ; from + splitboxes(); + here is the code and output

How to properly generate HTML in a JavaScript widget?

I've been following this tutorial on how to make JS widget. However I noticed that manually building html with plain JavaScript is not DRY. I am planning to build a form, tables etc. in a JS widget. Whats the best way to do this?
$.getJSON(jsonp_url, function(data) {
var fruits = ["Apples", "Mangoes", "Banana"];
var myHtml = "<ul>";
$(fruits).each(function(i){
myHtml += "<li>" + fruits[i] + "</li>";
});
myHtml += "</ul>";
$('#example-widget-container').html(myHtml);
});
if you want one of your divs or containers to continuously grow while you build dynamic content, without losing older content, use jQuery.append
$('#example-widget-container').append(myHtml);
this is probably the cleanest way. Or you can do other things like
var html = $('#example-widget-container').html();
newHtml = yourContent;
$('#example-widget-container').html(html + newHtml);
In JavaScript you can generate html content in different ways :
Create HTML with a string directly :
$("#sampleArea").append('<div class="' + newClass + '">' + newText + '</div>');
Create HTML with jQuery Api wrapping :
$("#sampleArea").append($('<div/>',{class : newClass}).text(newText));
Use a template engine in Javascript (like mustache.js) :
<script id="exampleTpl" type="x-tmpl-mustache">
<div class="{{class}}">{{text}}</div>
</script>
<script>
var data = {
class: newClass,
text: newText
}
var template = $('#exampleTpl').html();
var html = Mustache.render(template, data);
$('#sampleArea').append(html);
</script>
The best solution will depends of your use.

Autofill input text on Sharepoint 2007 using Jquery

im sure this is a simple question but can't understand why this isn't working. I simply want to set the current time automatically to an input field. I am using Jquery at the moment to accomplish the task. I know jquery works because if I do alert (time); it shows me the time as expected.
Just to add, I set the jquery script in a text then referenced into a Content Editor Webpart under the list.
Below is the HTML of my input generated by Sharepoint. I decided to target the title as its the only consisting attribute in there.
<input type="text" class="ms-long" title="Current time" id="ctl00_m_g_dd7a368d_cc10_4464_a245_c7fc87ae6650_ff2_1_ctl00_ctl00_TextField" maxlength="255" name="ctl00$m$g_dd7a368d_cc10_4464_a245_c7fc87ae6650$ff2_1$ctl00$ctl00$TextField">
Below is the Jquery script I am trying to run. A the moment this script does nothing to my input text box.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
$("input[Title='Current time']").val(time);
});
</script>
Any help would appreciated on this.
I tested your code and it works fine if you define the dNow first: tested on Chrome and Opera
jQuery(document).ready(function($) {
var dNow = new Date();
var time = (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
alert(time);
$("input[title='Current time']").val(time);
});
If that's not working for you, you have some other problem in your JavaScript, debug and check for other errors

Read json until "more" comment

I want to pull from a tumblr blog and display it on another webpage using javascript.
I'm using the $TUMBLR_BLOG/api/read/json feed which provides a variable filled with the information from the blog post.
I want to print everything up to the "<!-- more -->" set of characters in the 'regular-body' section, ie. I don't want to print everything in the 'regular-body' just up to that more section.
Any thoughts on how to do that?
Eg. API read: http://blog.intercut.yegfilm.ca/api/read/json
Eg. Basic code I'm using:
<script type="text/javascript" src="http://blog.intercut.yegfilm.ca/api/read/json"></script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
document.write(
'<h3> ' + tumblr_api_read.posts[0]['regular-title'] + '</h3>' +
tumblr_api_read.posts[0]['regular-body']);
</script>
<script type="text/javascript">
// The variable "tumblr_api_read" is now set.
var url = tumblr_api_read.posts[0]['url'];
var title = tumblr_api_read.posts[0]['regular-title'];
var body = tumblr_api_read.posts[0]['regular-body'];
body = body.substring(0,body.indexOf("<!-- more -->"));
document.write('<h3> ' + title + '</h3>' + body);
</script>
Simple as that :)
Something like responseData.split("<!-- more -->")[0] ?
Get the index of the <!-- more --> and print the substring upto that index.
sampleString = "Foo <!-- more --> Bar";
moreIndex = sampleString.indexOf("<!-- more -->");
if (moreIndex > 0) {
console.log(sampleString.substring(0, moreIndex));
}
JSFiddle
Use the javascript SubString() method:
Example:
var mystring = 'Hello World <!-- more -->';
alert(mystring.substring(0,mystring.indexOf("<!-- more -->")));
jsFiddle: http://jsfiddle.net/8CXd8/
Documentation: http://www.w3schools.com/jsref/jsref_substring.asp

Using jQuery on dynamically loaded element

I am using the following code to retrieve the number of likes from the Facebook Graph API, and this works perfectly. What I am having trouble doing is using jQuery .css to alter the color of the last character in the returned value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/krewella?callback=?";
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul><li>" + json.likes + "</li><li>" + json.about + "</li></ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
});
</script>
</head>
<body>
<div id="wrapper"><!--wrapper open-->
<div class="facebookfeed">
<h2>Loading...</h2>
</div>
</div><!--wrapper closed-->
</body>
How about something like:
json.likes = json.likes.toString().slice(0,-2) + "<span class='red'>" + json.likes.toString().substr(-1) + "</span>"
var html = "<ul><li>" + json.likes + "</li><li>" + json.about + "</li></ul>";
With the trivial css:
.red{
color:#ff0000;
}

Categories