I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.
console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));
The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.
Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.
<div id="collection_form">
<div id="element_container">
<ul class="element_list element_group ui-sortable">
<li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
stuff in here is same as below
</li>
<li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
<div>
<span>Room Booking</span>
<span class="element_type"> - Group</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
<ul class="element_group">
<li id="de_30" class="element_config_form element_group_leaf">
<div>
<span>Room Number</span>
<span class="element_type"> - Text</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
</li>
</ul>
</li>
<li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
<div></div>
<ul class="element_group">
<li id="de_32" class="element_config_form element_group_leaf">
<div> more stuff </div>
</li>
</ul>
</li>
</ul>
</div>
</div>
What is it that I am doing wrong?
Try this :
$(itemElement).is(':visible'); // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent
i suspect your itemElement.id is undefined
But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :
$("#"+itemElement.id).is(':visible');
or even better :
$(itemElement).is(':visible');
Related
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
I'm trying to limit foreach item. here it is my source :
<div class="build-failed">
<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
<ul class="list-nostyle list-failed">
<li data-foreach-item="failedJobs">
<div class="label" data-bind="item.label"></div>
<div class="value" data-bind="item.value"></div>
</li>
</ul>
</div>
<div class="build-succeeded">
<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
<i class="fa fa-thumbs-o-up"></i>
</div>enter code here
<p class="updated-at" data-bind="updatedAtMessage"></p>
and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.
With <iron-list>, your <ul> can be rewritten as
<ul>
<iron-list items="[[failedJobs]]">
<template>
<li>
<div class="label">[[item.label]]</div>
<div class="value">[[item.value]]</div>
</li>
</template>
</iron-list>
</ul>
Try and see if the property, maxPhysicalCount, can get you only three results ;)
I thought I would find an applicable filter in the documentation:
http://batmanjs.org/docs/filters.html
But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.
You can create your own filter:
https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter
For example, to limit an array to three items:
Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)
Then, use it in your binding:
<li data-foreach-item="failedJobs | limit 3">...</li>
(Hmm, I hope data-foreach works with filters!)
Anyhow, hope it helps :)
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
As a follow-up to How do I move from one ui-sortable to another in Angular?
If I have 2 connected lists, and one of the lists is empty, how do I actually drop onto it? Again looking at http://minitrello.meteor.com he has a placeholder created even in an empty list. How do I replicate that so that when
list1 = [];
list2 = ['A','B','C']
I can actually drop onto list1? Fiddle at http://jsfiddle.net/hKYWr/894/
EDIT: Cleaner fiddle at http://jsfiddle.net/hKYWr/897/
If your List is empty then also you need to create an empty Li
I have added one List in each List
<li ng-show="list1.length==0"> </li>
<li ng-show="list2.length==0"> </li>
Below is the working Demo
Demo
Template code:
<div ng:controller="controller">
<div style="float:left; margin:5px;">
<h3>list1</h3>
<ul ui:sortable="sortableOptions" class="connectedList" ng:model="list1">
<li ng:repeat="item in list1" class="item">{{item}}</li>
<li ng-show="list1.length==0"> </li>
</ul>
</div>
<div style="float:left;margin:5px;">
<h3>list2<h3>
<ul ui:sortable="sortableOptions" class="connectedList" ng:model="list2">
<li ng:repeat="item in list2" class="item">{{item}}</li>
<li ng-show="list2.length==0"> </li>
</ul>
</div>
<div style="clear:both;"></div>
<hr />
<div>list1: {{list1 | json}}</div>
<div>list2: {{list2 | json}}</div>
</div>
It's a similarly 'hacky' solution to the accepted answer but you can also add some padding(top/bottom) on to your lists to handle this problem.
e.g.
<ul style="padding-top:20px; padding-bottom: 20px;">
See fiddle here for evidence!
This suggests the problem is that an empty list provides no 'target' to drop on.
Setting a min-height works just as well too.
A solution i used was just to set min-height to the connected list
.connectedList {
min-height: 10px
}
http://jsfiddle.net/hKYWr/2367/
I want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>