Error when using x-editable with BS3 - cakephp

I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.
It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).
So when I click on the link to trigger the editable popover, I got this error in firebug :
TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154
Which is actually this line :
this.$element.data('popover').tip().addClass('editable-popover');
Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...
So I'm running out of idea, if someone knows about it, would be cool !
Thanks !
EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.

Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip
I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/
Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?
Code used:
html:
<div class="container">
<div class="row">
superuser
</div>
</div>
javascript:
$(document).ready(function() {
$('#username').editable();
});
css:
/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}

Related

Chips autocomplete for Angular 1.6. No angular-material

I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.

Most basic Angular demo not working

I'm following an online tutorial, and it says all I need is angularJs script, and a ng-app tag.
Following this: https://www.youtube.com/watch?v=RBhqLRoRDgo
So I tried it, but ... it seems the most basic part, I'm failing at:
http://plnkr.co/edit/aX8C3MTPh2fu3klt54Qk?p=preview
{{ 843 / 42 }}
That should show the answer, as opposed to showing a string.
What am I doing wrong?
You have coded in angular 1 version but you have added angular 2 scripts. In simplest case you can add prior version or write in 2 fashion.
https://angular.io/guide/quickstart
In your plunker code, it seems you are using angular 2 that needs more preparations, (see angular 2 quickstart).
replace the script tag with this one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
First of all, the URL given in the script src is a 404. Also, you're using angular 1.x syntax in your code.
For coding in angular 2.x, you should have a look at this quick start: https://angular.io/guide/quickstart

angular-bootstrap-ui modal size doesn't work

howto resize angular ui bootstrap modal on large size it looks that it doesn't work ? by the doc page it's enough to add size attribute https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs , also when I try to add size='lg' (with ui-bootstrap version 0.10.0) into example.js open function in plunker from official page it doesn't work http://plnkr.co/edit/lNqi9T8HRUHzcleY68KB?p=preview
I've never had luck with that feature. We just add a class to the modal with the windowClass property and it all works.
CSS
.full .modal-dialog{
width:auto;
margin-left:20px;
margin-right:20px;
}
$modal.open({
template:'blah.htm',
windowClass:'full'
controller:'blahCntrl'
});
It "doesn't work" since the commit where this feature was introduced (https://github.com/angular-ui/bootstrap/commit/976f6083e8485333612b05c023a3c490404543f0) wasn't released yet, so it is not part of the official 0.10.0 release.
You need to wait for 0.11.0 release (hopefully this weekend) or build your own version from the master branch as described here: https://github.com/angular-ui/bootstrap#development

ng-view not getting updated when there is ng-grid inside it

Please take a look at following plunker http://plnkr.co/edit/34JedA
It is a simple app with a ng-grid. What I need to do is navigate to the edit page when the edit button is clicked. What happens is instead of going to the edit page columns in the grid get messed up. Could anyone please explain why it is happening and what I could do to correct it.
There seems to be a problem with the ng-grid version you are using, I changed to the latest version I found and it worked.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.8/ng-grid.debug.js"></script>
Example: http://plnkr.co/edit/5myA2K?p=preview
Do not include file with following header.
/***********************************************
* ng-grid JavaScript Library
* Compiled At: 04/22/2014 16:27
***********************************************/
instead of this, please add
/***********************************************
* ng-grid JavaScript Library
* Compiled At: 04/07/2014 16:55
***********************************************/

Angular-Bootstrap, Can't get modal to appear

Here's a plunker that replicates the issue I'm having.
Long and short of it, I can get the backdrop to appear, and the console shows the modal being popped onto the DOM, but isn't visible. Not sure if it's supposed to be popped onto a different element or if the visibility is supposed to be set manually somewhere, but I'm following along with the example code and can't make the actual modal dialog appear.
Using Angular-UI 0.6 with Bootstrap 3.0 styles (though I've tried the older Bootstrap versions and multiple angular versions).
http://plnkr.co/edit/p23z5xnjQRmHu8MOfvcv?p=preview
So, I've managed to make this work, cobbling together various parts of an answer from here: https://github.com/angular-ui/bootstrap/issues/722. The trick is that, at least currently, angular-ui doesn't support Bootstrap 3.0 out of the box. However, it can be worked around. The HTML needs to be wrapped in a modal-dialog and modal-content, e.g.:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">blah</div>
<div class="modal-body">blah</div>
<div class="modal-footer">blah</div>
</div>
</div>
Then you also need to add some styles to your CSS:
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
Check below is the working Demo
Model Window Working in Angular-Bootstrap
Working Demo
Based on a discussion here, there are a couple of options:
use patched ui-bootstrap build with $modal fix for bootstrap3
build your own ui-bootstrap distribution with bootstrap3 support, currently hosted in bootstrap3_bis2 branch on github.
$ git clone https://github.com/angular-ui/bootstrap.git ui-bootstrap3 && cd ui-bootstrap3
$ git checkout bootstrap3_bis2
$ npm install
$ grunt
grab needed .js files from dist folder
In the latter case, bootstrap3_bis2 is not yet integrated on master, so you might consider watching ui-bootstrap repo on github, so you could jump back to master as soon as it gets merged in.

Resources