Why can't I set the template-url for uib-carousel dynamically? - angular-ui-bootstrap

I'm trying to override the template-url for the uib-carousel directive, https://github.com/angular-ui/bootstrap/tree/master/src/carousel/docs, however I can't get it to work unless using a 'hard-coded' string.
Overriding the template-url like this works
<div uib-carousel active="active" interval="1000" no-wrap="false" template-url="path/to/template.html">
But not like this
<div uib-carousel active="active" interval="1000" no-wrap="false" template-url="dynamicTemplate">
https://plnkr.co/edit/MPQs9lr7V7gyX21cB0bZ?p=preview
In the project I'm working on I'm using bootstrap without templates and an absolute url for the template but the plunker demonstrates the problem.
Does anyone know why?
Thanks
.r

Related

How do I conditionally parse formatting with Thymeleaf?

Is there an alternate way I can get this to process with Thymeleaf? Thymeleaf doesn't like the open tag, but I want to only render it for ROLE_A.
<span sec:authorize="hasRole('ROLE_A')">
<div class="col-xs-10">
</span>
bunch of text not specific to ROLE_A
<span sec:authorize="hasRole('ROLE_A')">
custom text specific to ROLE_A
</div>
</span>
I tried using
<sec:authorize="hasRole('ROLE_A')">
and
<div sec:authorize="hasRole('ROLE_A')">.
The former also doesn't run due to the same open tag issue and the latter is mixing up the closed div tags.
I have numerous blocks like this, so duplicating sections for different roles is not a great solution.
Not in the style you want. You need to close those elements.
My advice is then consider using fragments and load them as required with the needed data/
That way you reuse existing code thus making it cleaner and smaller.
For more examples and way you can do the above check out the Thymeleaf page http://www.thymeleaf.org/doc/springsecurity.html.

CKEditor Textarea not displaying on live server

I am using ckeditor for my textareas and I am able to see the editor when I run the application locally, however, when I publish the application to the live server the editor is not visable.
I just see the label for the textarea and then there is a space where the editor should be.
I am using the class attribute to replace my textareas like so
#Html.TextAreaFor(model => model.PostContent, new { #class="ckeditor" })
And this is rendering the html correctly
<textarea class="ckeditor" cols="20" id="PostContent" name="PostContent" rows="2">
I am using ckeditor 4.0 and have tested this in IE as well as chrome.
I have been able to resolve this by removing the reference to the bundle for ckeditor and replacing it with a direct link to the ckeditor.js
You still can add this script to bundle, however ckeditor loads all additional needed scripts, css, language files by itself, based on path for main script file. Puting it into bundle changed the path and plugin couldn't find needed content.
to make it work you need to override base path for editor:
http://cdn-source.docs.ckeditor.com/#!/guide/dev_basepath
If you are going tu use the text area like that:
#Html.TextAreaFor(model => model.PostContent, new { #class="ckeditor" })
The javascript call should look like that:
CKEDITOR.replace('PostContent');
CKEDITOR replace looks for the name attribute of the text area, not the class.
Hope it helps :)
EDIT:
This solution is only for explicit editor replace, not automatic replace.
source: http://rev.ckeditor.com/ckeditor/trunk/7664/_samples/replacebyclass.html
(thanks to AlfonsoML)

Ember SelectView not displaying the correct content binding only in Ember-rails

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>

jQuery Mobile Losing Style After Updating DOM

A question similar to this has been posted several time, but I cannot find a solution that works. Hopefully, someone can help!
I am using jQuery Mobile 1.1 and jQuery 1.7.2, so I'm on the most recent stable releases. I want to create a dynamic page header. Using this HTML code, it works fine:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
So I then go to dynamically create the title. I change the HTML to this:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
And added the following jQuery code:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
The title appears, but is not styled. I have found several posts about this. In the jQuery Mobile Documentation, it says:
"However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
So I tried several things. After the above code, I added the following:
dirHeader.trigger("create");
This had no effect. So I tried to put it on the actual append itself:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
This had no effect. I then tried the process on the parent element (in this case, the id of the parent div is "levela"). So I tried this:
$('#levela').trigger("create");
This also had no effect. At this point, I am completely lost. Every solution involves doing one of the things I have tried and is just not working. I must be missing something incredibly basic but I just can't seem to find it.
Thanks in advance for your help!
You can update the content by calling .page:
See this working Fiddle Example!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
I just solved a similar problem -- it appears that jQM headers and footers do not have the "create" method, so as far as I can tell, the css classes and roles need to be added manually.
For reference, I posted an example fix on this (old) question: JQuery Mobile trigger('create') command not working

Emberjs and jQuery UI integration questions

I am trying to understand how the integration between jQueryUI and Emberjs should be done. I am new to both libs and to javascript so this might be a newbie question.
I have this jsfiddle set up: http://jsfiddle.net/pSKgV/1/ and it renders this resulting document:
<body class="ember-application">
<div id="ember129" class="ember-view">
<div id="ember163" class="ember-view ui-draggable"></div>
</div>
</body>
The code is mostly taken from this blog post: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Questions: How do I put something inside the inner div? I want to put some content that i can bind to something.
I have tried the following:
{{view App.Draggable}}Drag Me{{/view}} but that gives an error. I’ve also tried
adding this to the App.Draggable object:
didInsertElement: function() {
this.$().html(“Drag Me”)
}
but that did not give the expected results. How is the best way to use/access the jquery/jqueryui functions such as .html() in this situation?
Also, is the outer div necessary or can I make this view only render one div element?
regards
Oskar
http://jsfiddle.net/ud3323/XMgwV/
You forget the # symbol {{#view App.Draggable}}Drag me{{/view}}. You should also create namespaces in Ember using Ember.Namespace.create() instead of just using an empty {}

Resources