I implemented pagination using ui-bootstrap-tpls-0.11.0.js. Now when I upgrade to
ui-bootstrap-tpls-1.2.5.js, the pagination doesn't work.
Is there any example for pagination using ui-bootstrap-tpls-1.2.5.js.
With the current implementation, I am using like below
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
Your migration is not so far from being over.
From the docs
Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide
The directive name you are looking for is uib-pagination.
Check out the syntax here
So, your new markup (for version 1.2.5) would look something like this
<uib-pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</uib-pagination>
Related
I include moments.js in the following way
<script src="../static/js/moment-timezone-full.js"></script>
<script>
$('.select_timezone').timezones();
</script>
I then give the timezone selection to my user in the html as
<div class="row">
<div class="col-lg-4">
<select class="select_timezone" name="select_timezone"></select>
</div>
</div>
My question is how can I select a default timezone? I saw that one can do that with
moment.tz.setDefault(String);
but I don't understand how this would work in my setup?
EDIT: My implementation is just following this example...
http://www.jqueryscript.net/time-clock/Easy-Timezone-Picker-with-jQuery-Moment-js-Timezones.html
does really nobody know a solution to this?
carl
EDIT: I should clarify why moment.tz.setDefault does not work. When I add the line
moment.tz.setDefault('America/Los_Angeles');
I get the javascript error
Uncaught TypeError: Cannot read property 'setDefault' of undefined
I include moments as explained in the flask mega-tutorial meaning I do
from flask.ext.moment import Moment
...
moment = Moment()
...
moment.init_app(app)
and in my html template I do
{% block scripts %}
{{ moment.include_moment() }}
{% endblock %}
moment-timezones is included with the js file as shown above. Have I forgotten anything?
I am just trying to set the default timezone for the selection
After looking at what you have posted, it looks like you are using a jquery plugin from https://github.com/firstandthird/timezones which when I take a look at the code, it using an older version of moment.js (version 2.8.3) as seen at https://github.com/firstandthird/timezones/blob/master/dist/timezones.full.js
It is also using old versions of moment-timezone ( which it is pulling in at that bottom of the timezones.full.js file, version 0.2.4) and the moment.tz.setDefault() wasn't added until a later version. The most recent as of now is 0.4.0. So, I would recommend mashing up your own files with the most recent versions, and try it all again on your system to see if it works.
UPDATE:
So, I looked at your fiddle, and updated it at your fiddle allowing for
moment.tz.setDefault("America/New_York");
$('.select_timezone').timezones();
with my own mashed up moment.js, moment-timezone.js, and jquery plugin code, and it works just fine. Basically all that moment-timezone-full.js file is doing is mashing up the moment.js and moment-timezone.js with the jquery plugin code. (it is listed as one of the external libraries, you can find it at https://gist.github.com/iron-man/deedd9efe988318d842a as well. I did notice that it will only pick up the first timezone in the list for that offset, not the actual one you specify, but that is a bigger issue with the moment-timezone.js library and outside of the scope of this question.
By default it displays the timezone of the person looking at it, but you can override that by specifically defining it.
In your example you could do something like:
<script src="../static/js/moment-timezone-full.js"></script>
<script>
moment.tz.setDefault("America/New_York");
$('.select_timezone').timezones();
</script>
I have a JSF 1.1 with IceFaces 1.6.2 project, where in the form I use <ice:selectInputDate />, but that component uses server resources for rendering Date, I want to change it with JS implementation. How I can do it? I saw that tutorial, but I am a newbie, and I don't exactly know, what files to configure. My implemenation of form is:
<ice:selectInputDate id="genDate"
binding="#{frm_4_20Bean.genDateInput}"
renderAsPopup="true"
highlightUnit="DAY_OF_WEEK"
highlightValue="1,7"
highlightClass="weekend"
required="false"
value="#{frm_4_20Bean.genDate}">
</ice:selectInputDate>
How I can replace it with jQuery UI Datepicker which is described in tutorial above?
I've finally decided to give angularjs a whirl and i'm running into some early trouble.
I'm using Rails 3.2 and the Slim template gem for the view.
I'm just trying the example from the angularjs site here: http://angularjs.org/#todo-html
Here's the relevant bit:
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
Which in slim would be something like:
div(ng-controller="TodoCtrl")
span {{remaining()}} of {{todos.length}} remaining
The problem is Slim just prints:
{{remaining()}} of {{todos.length}} remaining
literally as a string.
Anyone able to get Slim and Angular to play together?
I finally got it to work.
I had to go into my layout and do this:
html(ng-app='')
You can probably add that to a div on the particular page also.
div(ng-app='')
div(ng-controller="TodoCtrl")
span {{remaining()}} of {{todos.length}} remaining
Hopefully this helps someone. It took me a bit to figure out.
You can also do it like so:
html [ng-app]
Or:
div [ng-app]
div [ng-controller="TodoCtrl"]
span {{remaining()}} of {{todos.length}} remaining
I am using full stack Thymeleaf (spring mvc, security, layout dialect, webflow) in a mid-size web application.
Ok..now that we put so much of code in the html templates it would be nice to include source code comments that don't get included in the generated HTML file.
How do we achieve that?
Version 2.1 is released so now you can upgrade your libraries and use comments in your code. With this version developers are able to use parser-level comment blocks:
<!--/* This code will be removed at thymeleaf parsing time! */-->
and prototype-only comment blocks:
<span>hello!</span>
<!--/*/
<div th:text="${...}">
</div>
/*/-->
<span>goodbye!</span>
Detailed explanation can be found in the official documentation here: http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#comments-and-blocks
As mentioned Rafal Borowiec to comment block of HTML code you should use
<!--/*something to comment*/--> construction (see documentation).
Also it is possible to comment/remove your javascript code using thymeleaf with
/*[- something to comment -]*/ construction (see documentation). So you can annotate your js code without leaking any information
/*[-
*
* Some information about function.
*
* -]*/
function someFunction() {
console.log('Hello world');
}
With Thymeleaf 3.0, the currently working version was
<!--/*-->
this comment will be removed by thymeleaf on the template processing
<!--*/-->
Other answers, for earlier thymeleaf versions, did not work by me. The current thymeleaf documentation is here.
Prior to version 2.1 you can do this
<th:block th:if="${false}"><!-- ignore me --></th:block>
Its very ugly (the th:block needing a false th:if) but works.
It's not possible in current stable version of Thymeleaf. It's planned for version 2.1 as mentioned in Thymeleaf Issue 10
I made a small mixin for the Chosen plugin that worked well in this fiddle.
When I use this in my ember-rails application the chosen box shows up, but has no options. I think it is related to my using ArrayController.extend vs Object.create (in the fiddle), but I can't figure out why. When I change extend to create in rails, it tries to create the controller twice and gives an error.
Ember changes so fast, did I miss something from the fiddle version to the ember-rails version?
(ember-rails source code under assets at https://github.com/camdub/watchd)
Looking at your code, it seems that you're using the routing. Nice. You understood that when using routing, the controllers are instantiated for you by the framework, and each xxxView has its xxxController instance, accessible by the controller property.
in repos.handlebars, try to directly use `controller'.
<div class="container top-section">
{{view Watchd.ChosenSelect
contentBinding="controller.content"
valueBinding="controller.selected"
}}
</div>