I am trying to create a simple Alfresco dashlet with an edit button enabled on the title bar. Unfortunately, I can not figure out how to get the edit button to actually display on the title bar.
Here is what I have so far:
dashlet desc file (.desc.xml)
<webscript>
<shortname>Sample</shortname>
<description>Displays a Sample dashlet</description>
<family>dashlet</family>
<url>/mycompany/components/dashlets/sample-dashlet</url>
</webscript>
My main freemarker template file (.ftl)
<script type="text/javascript">
//<![CDATA[
var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({
"componentId": "${instance.object.id}",
"siteId": "${page.url.templateArgs.site!""}",
"title": "${msg("header")}"
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");
var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({
actions: [{
cssClass: "edit",
eventOnClick: editDashletEvent,
tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
}]
});
//]]>
</script>
<div class="dashlet-1">
<div> Test </div>
</div>
It seems as if the problem must be in my configuration somewhere, but I can't find it. Can anyone point me in the right direction, please?
If you want a working example of a very simple dashlet that is set up to be configurable in this way, see http://code.google.com/p/alfresco-get-latest-document. This blog post sets up the basic functionality: http://ecmarchitect.com/archives/2012/05/08/1592. And this blog post expands on that to make the initial dashlet configurable: http://ecmarchitect.com/archives/2012/05/15/1599.
In comparing your FTL with mine, I'm wondering if your div classes/id need to follow this pattern:
<div class="dashlet getlatestdoc">
<div id="getlatestdoc_title" class="title">
${title}
</div>
Otherwise, how will the edit button know where to render itself?
As Jeff suggests, you need to include a <div> element for the dashlet's title bar in your markup with an appropriate value for the class attribute, as follows
<div class="dashlet dashlet-1">
<div class="title">Title</div>
<div class="body">Body content</div>
</div>
When the Alfresco.widget.DashletTitleBarActions instance that your inline JavaScript code creates gets instantiated it will look for a child <div> with the class title and will add the actions there.
I also added a dashlet class to the parent div, which is required for the default dashlet styles to be applied.
Related
I am working on a school project and I have to do a static digital menu website for a bar. Because it's static, I used JavaScript where necessary. Anyways, I divided everything into groups, each group is represented by a card with an image and a button. Here is an example:
This is the source code for a card:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
As you can see, in order to add a single card, I had to manually write the whole structure of a card in the second div, with the class="card".
BUT, I must create it dynamically based on the structure of the subfolders inside the Root folder witch is called Resources, here's a scheme:
In order to achieve this I started using JavaScript since it's the only possible way I think:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
So, now that I've expressed what I need to do is this: in the JavaScript code you can see that the card was generated manually anyways but I need the content to generate based on the folder structure I have stored locally. In other words, the whole script should take in input the name/path of the ROOT folder which is called "Resources" and from there it should generate the groups based on it's content. For example, if I click the button on the FOOD Card, then it should delete the FOOD and DRINKS Cards and only add the Vegetables Card in this case...I know it sounds complicated but at the end of the day the problem lies in getting the subfolder names, and since the image has the same name of the subfolder, apply it on the <img> tag and also on the button. All this, using JavaScript. If you know that some other language would work much better I'm open to suggestions, but I built the entire website until now only using JavaScript.
Anyways, I tried to express the problem the best I could so if something is unclear, I can easily modify the post if needed. Thanks in advance!
You could put the image data into a JSON object, then bind related processing functions according to the requirement.
what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.
Here is my dropdown menu code and the div #location-info is where I want the info pulled into.
<div class="nav-location">
<ul>
<li class="locationhead">Select Locations
<ul id="location-options">
<li>Atikokan</li>
<li>Dryden</li>
<li>Emo</li>
<li>Fort Frances</li>
<li>Rainy River</li>
<li>Red Lake</li>
<li>Sioux Lookout</li>
<li>Thunder Bay</li>
</ul>
</li>
</ul>
</div>
<div id="location-info"></div>
Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...
$('#location-options').on('click', 'a', function (event) {
$el = $(event.target);
$.ajax({
type: 'GET',
url: $el.attr('href'),
success: function (html) {
$('#location-info').html(html);
}
});
return false;
});
I would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at modocom.ca/gillons/emo which I want to pull in the info from the location-div
<div id="location-info">
<div class="sevencol">
<h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
<p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
</div>
<div class="fivecol last">
<h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
</div>
</div>
So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.
I am using Wordpress but this stuff is all hardcoded in.
Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.
I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div>.
Instead you should take only <div id="location-info"> from html variable.
Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.
EDIT:
I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.
This is my JSFiddle example:
http://jsfiddle.net/mUThR/51/
Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied; but it should work from your machine. If it does, you still need to extract proper div from returned html.
Cheers.
I have a client site that has a community events page. On that page, events are generated and put out one by one like this:
<div class="event-info">
<h5>This is an event</h5>
<span class="date">December 25, 2013</span>
<p class="details"></p>
</div>
They want a link on the homepage that goes to this one Christmas event, which will eventually start to move down the page. The only way to really find that block is by the contents of the <H5>. A classic anchor link would do the trick, but I can't add them to the <div class="event-info" /> block. The homepage link has to go to this page and then jump down to the necessary <div class="event-info" />.
jQuery or vanilla javascript are all I have to work with. I have one .js file that I can add to, and of course the html/javascript of the link itself on the homepage. I can't manipulate the existing HTML of the pages (content is dynamic - I add new stuff to it), and I have no access to the backend .NET framework.
Thanks.
something like this?
jquery:
var hash = window.location.hash;
if (hash==='#xmas') {
var xmas = $('.date:contains("December 25")').parent('.event-info').offset().top;
$('html,body').animate({scrollTop: xmas}, 500);
}
You just add #xmas to end of the page url, like: http://fiddle.jshell.net/filever10/afK7M/show/light/#xmas
made a fiddle: http://jsfiddle.net/filever10/afK7M/
I'm trying to make a dynamic text a link with javascript:
<div class="container">
<div class="form-current">
<form>
<h2 style="margin-left:10px" ><a href='#' onclick="homePage()" id="h2Current" ></a></h2>
<div id="node-current"></div>
</form>
</div>
This is the html and the text is loaded from a DB through a javascript function:
var h2Current = document.getElementById('h2Current');
h2Current.innerHTML = 'Day '+data[0]['day'];
the parameter "data" is a simple Json. The text appear underlined correctly but is impossibile to click.
Thanks in advance
You need to check your JSON. Check JSON i have written is a correct one. check your JSON format. You can use jsonlint.com to validate JSON you are trying to use.
<html>
<head>
</head>
<body>
<div class="container">
<div class="form-current">
<form>
<h2 style="margin-left:10px" ><a href='#' onclick="homePage()" id="h2Current" ></a></h2>
<div id="node-current"></div>
</form>
</div>
</div>
<script>
var data = [{ 'day':'monday'},{ 'day':'tuesday'}]
var h2Current = document.getElementById('h2Current');
h2Current.innerHTML = data[0]['day'];
</script>
</body>
The problem is not the JSON since you say that it appears and is underlined properly. The issue is that you are either not actually calling your 'homePage' function during the 'onclick' event, or there is an unhandled exception in the code of your 'homePage' function. Here is how you go about debugging this issue.
You need to open your site in Chrome, and open the developer tools, 'F12'. Click the 'Sources' tab, and find your .JS file, or the page file, if it contains the function, 'homePage' inline. You may need to open the 'File Navigator'. If this is the case, click the "arrow in the box" directly beneath the 'Elements' tab.
Once the file is opened, find the function declaration 'homePage' and breakpoint the first non var declarative line. Now, simply click the link and step through the function. You may find that you are not even calling the function at all and you may even see JS exceptions listed. Address any exceptions which appear inline in your code. If you are actually reaching your function, step through every line, 'F11' including any nested functions, until you find the exception.
If I check official documentation, I can see a property called HTML:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?
This parameter is just about whether you are going to use complex html into the tooltip. Set it to true and then hit the html into the title attribute of the tag.
See this fiddle here - I've set the html attribute to true through the data-html="true" in the <a> tag and then just added in the html ad hoc as an example.
Another solution to avoid inserting html into data-title is to create independant div with tooltip html content, and refer to this div when creating your tooltip :
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
This way you can create complex readable html content, and activate as many tooltips as you want.
live demo here on codepen
Just as normal, using data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
The html parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.
The html data attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
JSFiddle demos:
Bootstrap 2.x
Bootstrap 3.x
set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
Live sample
As of bootstrap 5, you can just specify the contents of the tooltip to be html DOM nodes when configuring it. Sample config...
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
html: true // <- this should do the trick!
})
});
For bootstrap 5, you can use data-bs-html="true" with the title tag data-bs-original-title="Tooltip Title"