How to access with a link, any item in dom-repeat - hyperlink

I have dom-repeat element and listing some items, (height:350px cartoons). I can give unique id while rendering the items. Everything is working perfectly. I wonder, How to access with a link, any item in dom-repeat, that I know the id. something like jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j to able to access directly to the item.
EDIT : jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j does not work.
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</template>
Not: jobijoy.com is live and can check there how its look like)

You can wrap the div you are using with an anchor and set the href to the required url.
If the id of the item you want is in the 'key' property you can use:
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<a href="jobijoy.com/dashboard#{{item.key}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</a>
</template>

Related

create relative links with Thymeleaf

I have the following code which loops through a list of countries and creates a href links
<div class="container" th:each="country: ${countryList}">
<a th:href="${country.countryAbbr}"><div clss="row" th:text="${country.country}"></div></a>
</div>
The current page url is "localhost:8080/directory", and the generated url is showing as
"localhost:8080/us"
How can I make the url show as "localhost:8080/directory/us"
I want "us" to be added to the current url of the page.
Try create the following code in your Controller class.
#RequestMapping(value="/", method=RequestMethod.GET)
public String rootGet() {
return "redirect:/directory";
}
You can use ServletUriComponentsBuilder:
<div th:with="urlBuilder=${T(org.springframework.web.servlet.support.ServletUriComponentsBuilder)}"
class="container" th:each="country: ${countryList}">
<a th:href="${urlBuilder.fromCurrentRequest().path(${country.countryAbbr}).toUriString()}">
<div clss="row" th:text="${country.country}"></div>
</a>
</div>
Give a try to this one
<div class="container" th:each="country: ${countryList}">
<a th:href="#{${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
Using # usually resolves the default context but I am not aware of your environment.
For example, if you had Tomcat .war file, and your application would be hosted at localhost:8080/myApp, you would want result /myApp/us rather then /us. # would do that trick.
If above is not relevant for you, use this one:
<div class="container" th:each="country: ${countryList}">
<a th:href="#{'/directory/' + ${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>

Get anchor tag value when anchor tag is inside for each loop

<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
${customer.customerName}
</li>
</div>
</c:forEach>
i don't know how to get customer name in Struts2 when user selects any hyerlink(customer name come from customer object).
You can use Struts anchor tag and add parameter to the URL.
<s:a href="url"><s:param name="customerName">${customer.customerName}</s:param>CustomerName</s:a>
Note, that you can use EL in the body of the tag.
May be this can help you to start:
<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
<s:a name="foo" namespace="bar">
<s:param name="customerName">${customer.customerName}</s:param>
<s:param name="customerNubmber">${customer.customerNumber}</s:param>
</s:a>
</li>
</div>
Please consider I find that the s:a url does not add parameters to link. Now your generated link will be /foo/bar/action?customerName=joe&customerNumber=1
No in your JS you can have:
$('a').bind('click',function(){
var url = ($(this).attr('href'));
var customerName= getURLParameter(url, 'customerName');
var customerNumber= getURLParameter(url, 'customerNumber');
//calling the ajax function
pop(cat, typ)
});
If you want to have ajax calls please have a look at struts 2 jquery plugin.

Grails: Removing Unwanted Brackets when Displaying Variable

I have a .gsp page where a student can select a course that they are in. That selection is then stored in an array list. I have another .gsp page that shows student details and within those details it shows which course they selected from the other page. However, when it displays the course it displays like this: "[courseName]", but I would like it to display without the brackets: "courseName".
This is my code for displaying the selection:
<g:if test="${studentDetails?.course}">
<li class="fieldcontain">
<span id="course-label" class="property-label">
<g:message code="student.course.label" default="Course(s)" /></span>
<span class="property-value" aria-labelledby="course-label">
<g:set var="course" value="${studentDetails?.course.courseName}" />
<g:message message="${course}" /></span>
</li>
</g:if>
So far I've tried displaying the variable with g:fieldValue, g:message, and just the variable itself without a tag. All methods display with the brackets. Any suggestions on how to remove the brackets are appreciated. If any other code is needed I can provide it. Thanks.
If your studentDetails?.course.courseName contains a List of courses and your want to display all of them, you need to convert it to a String. But default implementation of List.toString() uses brackets. Your could use .join(',') instead.
Like:
<g:if test="${studentDetails?.course}">
<li class="fieldcontain">
<span id="course-label" class="property-label">
<g:message code="student.course.label" default="Course(s)" /></span>
<span class="property-value" aria-labelledby="course-label">
${studentDetails.course.courseName.join(', ')}
</span>
</li>
</g:if>
Also I suggest to add .encodeAsHTML() if you got this data (course name) from a user, to escape any HTML content inside variables (avoid XSS, etc). Like:
${studentDetails.course.courseName.join(', ').encodeAsHTML()}

events are not triggerring after added by append method in jquery

<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.

changing the class name in nested divs

I have a nested divs as follows, how can I change the class of span in the div whose id is inside-one?
thanks.
my code is as follows:
$("#top span.myclass").removeClass("myclass").addClass("myclass-new");
<div id="top">
<div id="inside-one">
<span id="s1" class="myclass"></span>
</div>
<div id="inside-two">
<span id="s2" class="myclass"></span>
</div>
$('#inside-one').find('span').removeClass('myClass').addClass('myClass-new');
To access from #top without using span ID
$('#top #inside-one span.myclass').toggleClass('myclass-new');
To access from #inside-one without using span ID
$('#inside-one span.myclass').toggleClass('myclass-new');
or simply use the span ID
$('#s1').toggleClass('myclass-new');
Edit: In case if you have many span inside #inside-one and want to access just the first span with .myclass (DEMO)
$('#top #inside-one span.myclass:first-child').toggleClass('myclass-new');
DEMO

Resources