I have rendered data into EJS and now using a while loop I want to cycle through that data and display it on a single line. For example let's say the data is an array of objects with name attributes. I have the names ['Bob','Chris','Sarah']. After I have sent the data over to EJS I want Bob to appear, and then after some time Bob disappears and then Chris appears and then Sarah appears.
As of right now my code outputs them all at once over multiple lines, instead of one at a time on a single line as I desire.
<body>
<% var current = 0; %>
<% while (current < 2){ %>
<h1> Hey <%= person[current].name %>, how are you doing? </h1>
<% current += 1;
};%>
</body>
The output should be on a single line: Hey CURRENT NAME, how are you doing? Then the current name should just keep changing.
Instead the code outputs three lines, one for each name. Does anybody know how to fix this? Thanks.
I think you are confusing template processing (which produces static output) with dynamic updating of a DOM element. The latter is more of a problem for a front-end framework (although just what you have provided is simple enough in vanilla JS).
I would look into just creating a template with a placeholder for the name and then use a timer to update the text inside:
setInterval(3000, function(){
var span = document.getElementById('name-span');
if ('textContent' in span) {
span.textContent = person[current].name;
} else {
span.innerText = person[current].name;
}
current = (current + 1) % person.length;
}
Of course you need to figure out a better way to access person and current instead of using globals.
Related
I'm working with liferay portal 6.2. And I want to get the value of the text in a tag with alloy user interface.
exemple:
<div>
<p> Paragraph </p>
"value"
</div>
the desired result is: value
please help.
AlloyUI, being an extension of YUI3, uses get/set methods to access and manipulate the properties/attributes of the object (YUI3 Node / AlloyUI Node) that is returned when looking up elements from the page.
Some examples can be reviewed in this documentation as well as this documentation.
In general you'll need something unique (i.e. id, css class) to the div in order to fetch only that element. Once you have that element, divNode.get('text') will give you all of the text within the element. There is not a means to easily "skip" the paragraph contents within the div without the value being contained within some other markup. If you have control over the markup and can do this, that would be the best option. Otherwise you are left to using the replace function to strip out the paragraph contents from the text.
<script>
AUI().use('aui-base', function(A) {
var paragraphText = A.one('#myDiv>p').get('text');
var divText = A.one('#myDiv').get('text')
var onlyValue = divText.replace(paragraphText, "").trim()
console.log(onlyValue)
})
</script>
I use ditto to show the last entries of a specific parent. For this I am using the following call:
[!Ditto? &parents=`5` &orderBy=`createdon DESC` &display=`3`
&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]
I now want my website to continuously loop through a specific range of parent ids and change the parents parameter every other second.
The result should be a "slideshow" of the content called by the ditto calls.
No special effects, no design (except the one provided by the template).
Is there an easy way to manage this?
Solution:
Got it to work!
I created this resource:
<div id="newsticker_vn">[!Ditto? &parents=`6` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
<div id="newsticker_hp">[!Ditto? &parents=`5` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
<div id="newsticker_ks">[!Ditto? &parents=`7` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
and use this script to get the desired ditto calls and loop them:
<div id="newsticker"></div>
<script type="text/javascript">
function execute() {
$( "#newsticker" ).load("[~348~] #newsticker_vn").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute2 );
}
function execute2() {
$( "#newsticker" ).load("[~348~] #newsticker_ks").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute3 );
}
function execute3() {
$( "#newsticker" ).load("[~348~] #newsticker_hp").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute );
}
execute();
</script>
I tried doing all steps in one function but for some reason it was showing every ditto call three times before rotating, no idea why.
Thank you for your help!
Unless I don't understand what you are trying to do, it's not possible without changing your template(also assuming that your template doesn't support the loop).
From your explanation it seems like you what some sort of ajax functionality. You will need 2 resources setup in the manager.
Your page using whatever template you have
Another page where you get the content for the first page from
First page is your regular page. Second is a page that uses a "blank" template and only has a Ditto call that is randomized. You will have to modify the first template to load the second page using some ajax code.
Let say I have an text box in an HTML page as follows.
<DIV style = "display:none;">
<DIV style = "display:inline;">
<INPUT type = "text" style = "display:inline;">
</DIV>
</DIV>
In this case, the text box will not be visible to the user. How can I identify that text is not currently visible to the user.
Dont say that, I should travel up to the parent objects to find out if they are set to not visible. I have bunch of fields to be validated like this and this would reduce the application performance.
Is there any other way to find out as this object is not visible to the user?
Thanks in advance.
If you don't need it to be pure JavaScript I would suggest using jQuery. Using the :visible or :hidden selector will accomplish what you want:
if ( $('yourElement').is(":hidden") ) {
// The element is not visible
}
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
If you need pure JavaScript and you don't want to travel up through every ancestor element, you could try checking the element's offsetWidth and offsetHeight. If the element is hidden because of an ancestor element, they should both be 0. Note: I've always used jQuery for this, so I don't know how reliable this is.
var yourElement = document.getElementById('yourElementsId');
if ( yourElement.offsetWidth == 0 && yourElement.offsetHeight == 0) {
// The element is not visible
}
https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.offsetHeight
I would like to have two search boxes on my master page.
One that would search for content and the other one that would search for people.
I see the code in the master page that searches for content:
How would i do to add another box that searches for people?
if you know or have info on how to achieve this I would appreciate it.
thank you much
W
You can do something simple which is to put an HTML text box directly in your master page. It may not be as elegant as writing a customer user control that reads the location of the Search site, but if the URL to your search results page is static then something like this might work for you:
<script type="text/javascript">
function SearchPeople()
{
var termArr = document.getElementById("SearchTextBoxPeople").value.split(" ");
var retStr = "";
for (var i = 0; i < termArr.length; i++) {
retStr += termArr[i] + "* ";
}
document.location.href = "/Search/Pages/peopleresults.aspx?k=" + retStr;
}
</script>
<input type="text" id="SearchTextBoxPeople" />
Search People
One additional benefit of this is that you can control the input to include wildcards (which are horrible out-of-the-box for people searches). The JavaScript is simply including * in the search which allows wildcard searches. So a search for jo sm will actually send jo* sm* to the search page which will then match on John Smith.
I have a custom list in SharePoint (specifically, MOSS 2007.) One field is a yes/no checkbox titled "Any defects?" Another field is "Closed by" and names the person who has closed the ticket.
If there are no defects then I want the ticket to be auto-closed. If there are, then the "Closed by" field ought to be filled in later on.
I figured I could set a calculated default value for "Closed by" like this:
=IF([Any defects?],"",[Me])
but SharePoint complains I have referenced a field. I suppose this makes sense; the default values fire when the new list item is first opened for entry and there are no values in any fields yet.
I understand it is possible to make a calculated field based on a column value but in that case the field cannot be edited later.
Does anyone have any advice how to achieve what I am trying to do?
Is it possible to have a "OnSubmit" type event that allows me to execute some code at the point the list item is saved?
Thank you.
Include a content editor web part in the page (newform.aspx / editform.aspx) and use jQuery (or just plain javascript) to handle the setting of default values.
Edit: some example code:
In the lists newform.aspx, include a reference to jquery. If you look at the html code, you can see that each input tag gets an id based on the field's GUID, and a title that's set to the fields display name.
now, using jquery we can get at these fields using the jQuery selector like this:
By title:
$("input[title='DISPLAYNAMEOFFIELD']");
by id (if you know the field's internal guid, the dashes will ahve to be replaced by underscores:
// example field id, notice the guid and the underscores in the guid ctl00_m_g_054db6a0_0028_412d_bdc1_f2522ac3922e_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField
$("input[id*='GUID']"); //this will get all input elements of which the id contains the specified GUID, i.e. 1 element
We wrap this in the ready() function of jQuery, so all calls will only be made when the document has fully loaded:
$(document).ready(function(){
// enter code here, will be executed immediately after page has been loaded
});
By combining these 2 we could now set your dropdown's onchange event to the following
$(document).ready(function(){
$("input[title='DISPLAYNAMEOFFIELD']").change(function()
{
//do something to other field here
});
});
The Use jQuery to Set A Text Field’s Value on a SharePoint Form article on EndUserSharePoint.com shows you how to set a default value for a field using JavaScript/jQuery.
They also have a whole series of articles on 'taming calculated columns' that will show you many more powerful options you have for calculated fields with the use of jQuery.
One thing to be aware of when inserting JavaScript into a SharePoint page and modifying the DOM is support. There is a small chance that a future service pack will break the functionality you add, and it is quite likely that the next version of SharePoint will break it. Keeping this mind however, I believe it's a good solution at this time.
I've got a walk through with sample code that may help
Setting a default duration for new calendar events
It sets the End Time/Date fields to Start Time + 1.5 hours when you create a new event.
Its complicated a little by the steps need to do the time/date work, but you'll see examples of how to find the elements on the form and also one way to get your script onto the newform.aspx without using SPD.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
// Set the hours to add - can be over 24
var hoursToAdd = 1;
// Mins must be 0 or div by 5, e.g. 0, 5, 10, 15 ...
var minutesToAdd = 30;
// JavaScript assumes dates in US format (MM/DD/YYYY)
// Set to true to use dates in format DD/MM/YYYY
var bUseDDMMYYYYformat = false;
$(function() {
// Find the start and end time/minutes dropdowns by first finding the
// labels then using the for attribute to find the id's
// NOTE - You will have to change this if your form uses non-standard
// labels and/or non-english language packs
var cboStartHours = $("#" + $("label:contains('Start Time Hours')").attr("for"));
var cboEndHours = $("#" + $("label:contains('End Time Hours')").attr("for"));
var cboEndMinutes = $("#" + $("label:contains('End Time Minutes')").attr("for"));
// Set Hour
var endHour = cboStartHours.attr("selectedIndex") + hoursToAdd;
cboEndHours.attr("selectedIndex",endHour % 24);
// If we have gone over the end of a day then change date
if ((endHour / 24)>=1)
{
var txtEndDate = $("input[title='End Time']");
var dtEndDate = dtParseDate(txtEndDate.val());
if (!isNaN(dtEndDate))
{
dtEndDate.setDate( dtEndDate.getDate() + (endHour / 24));
txtEndDate.val(formatDate(dtEndDate));
}
}
// Setting minutes is easy!
cboEndMinutes.val(minutesToAdd);
});
// Some utility functions for parsing and formatting - could use a library
// such as www.datejs.com instead of this
function dtParseDate(sDate)
{
if (bUseDDMMYYYYformat)
{
var A = sDate.split(/[\\\/]/);
A = [A[1],A[0],A[2]];
return new Date(A.join('/'));
}
else
return new Date(sDate);
}
function formatDate(dtDate)
{
if (bUseDDMMYYYYformat)
return dtDate.getDate() + "/" + dtDate.getMonth()+1 + "/" + dtDate.getFullYear();
else
return dtDate.getMonth()+1 + "/" + dtDate.getDate() + "/" + dtDate.getFullYear();
}
</script>