We are using JSF2.0 ,our end HTML needs to have <li> in the list box instead of <optionValues>. We are using <h:selectOneListBox> in the jsf . We are trying to use Jquery to change the <optionValues> to <li>.
Is there any other bettter solution for this?
Not with the standard JSF HTML component set. They all renders standard HTML elements without any fanciness.
You need to look at a JSF component library with enhanced skinnability support. The PrimeFaces component library for example, which uses jQuery UI under the covers, has a <p:selectOneListbox> which generates an <ul><li>, exactly as you need. See the showcase page. Here's the generated HTML source of the 1st <p:selectOneListbox> example on the showcase page:
<ul>
<li class="ui-selectlistbox-item ui-corner-all">Option 1</li>
<li class="ui-selectlistbox-item ui-corner-all ui-state-active">Option 2</li>
<li class="ui-selectlistbox-item ui-corner-all">Option 3</li>
</ul>
Related
i want to use MvcPager library in Asp.net mvc for my pager list
my Html Theme pager have class for style and i want to set this class for pager create with #Html.Pager(...)
Html Theme Pager code
<li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li><i class="fa fa-angle-left" aria-hidden="true"></i></li>
and library code for create pager is
#Html.Pager(6, Model.CurrentPage, Model.TotalResult)
I find it
i inspect element the paging create with #Html.Paging(...) and find what is the tag class and create style for it in my style.css
I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.
I'm still new to jQuery mobile. I'm trying to fix a minor problem on one of my pages.
I have a page that has a simple list of links. There's nothing special here, just this:
<ul>
<li> One</li>
<li> Two</li>
<li> Three</li>
<li> Four</li>
<li> Five</li>
<ul>
More
I have a bit of js so that when the #list_more link is clicked, we do an ajax call that pulls the next five items and adds to the end of the ul.
$('#list_more').click(function(){
$.post("/scripts/ajax.php", function(data){
$('#list_more').attr('data-time',data.time);
$('ul li:last').after(data.out);
});
})
The pages are setup using multipage templates. Because the new pages are being added to the DOM dynamically, I'm getting an Error loading page message. I'm not sure how to fix this.
Have you tried refreshing your list? http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/
I'm just starting with jQuery Mobile and adapting an existing application.
My problem is jQuery mobile is inserting anchor tags in my li tags within an unordered list.
The doc tells me that read-only lists will be created if the list has no links.
This is very unexpected behavior to put it mildly.
When I comment out the JQM includes I get my simple li elements back, so I know it is JQM that is doing it.
Markup without JQM:
<ul id="root_ul" data-role="listview">
<li id="1_1306901436141">Profile
</li>
</li>
Markup after JQM:
<ul id="root_ul" data-role="listview" class="ui-listview">
<li id="1_1306901436141">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#/evaluation_headers/714%20/tastesheet&ui-page=ul1_1306901436141" > <span>Profile</span>
</a>
</div><span> </span>
</div>
</li>
JQM has put in links into the list but I want a simple readonly list with no links.
Thanks everyone for responding. In my effort to simplify my code to submit to this site I failed to include a nested list within an item. I created a simple nested list and found that this causes JQM to insert the links. Not what I want or expected but will now figure out a workaround. The nested lists are at the heart of my app so maybe I won't use JQM.
Thanks again for your responses.
What you can do do avoid jQuery Mobile inserting anchor tags for your nested ul is to wrap the nested ul in a div. In fact besides for the conventions provided by the JQM framework you can also pretty much style a JQM li anyway you wish by placing what ever markup/css you want inside the li.
<ul>
<li>Item 1</li>
<li>
<div><ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
</ul></div>
</li>
</ul>
I'm trying the render an HTML list that looks like the following, using the Razor view engine:
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
</ul>
The code that I am attempting to use to render this list is:
<ul>
#foreach (var item in Model.TheItems)
{
<li id="item_#item.TheItemId">Item #item.TheItemId</li>
}
</ul>
The parser is choking, because it thinks that that everything to the right of the underscore in the id attribute is plain text and should not be parsed. I'm uncertain of how to instruct the parser to render TheItemId.
I don't want to but a property on the model object that includes the item_ prefix.
I also have to keep this syntax as I am using the list with JQuery Sortable and with the serialize function that requires the id attribute to be formatted in this syntax.
You should wrap the inner part of the call with ( ):
<li id="item_#(item.TheItemId)">
How about using String.Format? like this:
<li id="#String.Format("item_{0}", item.TheItemId)">
I prefer:
<li id="#String.Concat("item_", item.TheItemId)">
The verbosity tells the support developers exactly what is happening, so it's clear and easy to understand.
You can even use this way to concat more strings:
<li id="#("item-"+item.Order + "item_"+item.ShopID)" class="ui-state-default"></li>
Here is another post.
Hope helps someone.
You can so this in a simpler way:
id="item_#item.TheItemId"
This post seems to be older but now this does works now in latest MVC:
id="item_#item.TheItemId"