I am created a demo of autocomplete using http://jqueryui.com/demos/autocomplete/
plugin.
Now the suggested list which appears on pressing key is
<ul>
<li>
Suggestion
</li>
</ul>
I have to edit the list like :
<ul>
<li>
<a>Suggestion</a>
<br />
<a>data1</a><a>data2</a>
</li>
</ul>
how can I do this? I seen script for autocomplete but not found any hint.
You can configure the autocomplete with the formatItem, and the parse properties of the configuration object.
This question has been answered here:
JQuery AutoComplete results format?
Looks like you want to add some HTML to the result. If that is correct, the jquery ui docs point to a resource (at the bottom of the docs page):
The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.
Or, you can add custom data using the open event of the autocomplete. See example here:
http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/
Related
I have a simple pagination that looks like
<ul class="pagination justify-content-end" th:field="*{page}">
<li class="page-item page-item disabled">
<a class="page-link" href="action">1</a>
</li>
</ul>
I would get the following behaviour with Thymeleaf. Clicking on the page and before submitting the action, the value of the th:field associated with the pagination should be changed by setting it to the th:value of the selected page. In other words, clicking on the page number should change the value of "*{page}" and then call the method. Is there any way to do that, for example, combining th:onclick with th:action?
Thymeleaf is a rendering engine, as such it can do nothing once the page is served to the end user. At best u can fill variables into javascript when rendering to achieve the desired result.
As for your described functionality the given code is far to limited or faulty to give a suggestion for a javascript solution, for one th:field on a non-input element doesn't do much. Also the shown href is just a simple href that doesnt interact in any way with the encapsulating th:field.
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I read this article: Using HTML inside resource files but didn't find a satisfactory answer.
Basically, if I wanted to store:
<h2>Some heading</h2>
<p>An introduction for a series of steps</p>
<ol>
<li>Do x and y</li>
<li>Do y and z</li>
<li>Final step</li>
</ol>
would I put the whole thing into a resource entry or would I create a view that retrieved these values and marked them up?
<h2>#MyPage.Header</h2>
<p>#MyPage.Intro</p>
<ol>
<li>#MyPage.Step1</li>
<li>#MyPage.Step2</li>
<li>#MyPage.Step3</li>
</ol>
and then, if the final step contained markup like:
Make sure to read our disclaimers before continuing...
then would I have to write?
<li>
#MyPage.Step3MakeSure
#MyPage.Step3Read
#MyPage.Step3Before
</li>
the problem with embedding markup in the resource files is that now a translator needs to know to not touch the markup and if they do you're in trouble... but I can't think of a good structure?
Personally, I would use a templating for javascript such as Mustache or UnderScoreJs... then just load up the data based on a call to a controller action, see demo here for Mustache.
Mustache Demo
I am trying to bind color input using ng-model. In the following code:
<ul>
<li ng-repeat="col in ctrl.maincols">
<p>{{col.attr}}:{{col.value}}
<input type="color" ng-model="col.value"></p>
</li>
</ul>
there is no reaction when I select a colour. However if I change the input type to text everything works fine.
Any suggestions for making this work, or an alternative to ng-model for this use case?
It seems an editor for <input type="color"> is not yet implemented
see https://github.com/angular/angular.dart/blob/master/lib/directive/ng_model.dart
You could try to copy a similar and customize it to your needs.
You could also create a feature request. Please add a link here if you do.
I'm using jQuery mobile 1.3.0 and trying to style dynamic elements of a listview. I have a list defined in a pages markup and can add elements to it from an object.
<div data-role="content">
<ul data-role="listview" id="list_logs">
</ul>
</div>
This is then the code to read items from an object and build the list:
for(log in data.logs) {
$('<li><h2>'+data.logs[log].date+'</h2><p>'+data.logs[log].event+'</p><p>'+data.logs[log].type+'</p></li>').appendTo('#list_logs').trigger("refresh");
}
From what I can understand from the documentation calling trigger("refresh") should style the list content but neither it or trigger("create") are doing much at all. Does anyone have any further insight into this? Thanks in advance.
EDIT: I should add that the stylesheets are in place in the document head and that adding elements statically results in correct styling.
Every component has a designed function for markup enhancement, listview uses:
$('#listviewID').listview('refresh');
In case this is fully dynamically create listview, not just li elements then this line should be used:
$('#listviewID').listview().listview('refresh');
Full list and examples can be found in my other ARTICLE, to be transparent it is my blog. Or it can be found HERE.