We Keep Coding

How to change button in twitter bootstrap using jquery

I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers

You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");

In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");

Appending rows to nested rows issue?

I'm making a table with nested row's.
The thing is that when I append a child row to a parent row all other parent rows append a child row also.
Use function:
$scope.templates=[{src:'template'}];
$scope.include = function(templateURI) {
$scope.templates.push({src:templateURI});
}
Append row:
<button class="btn btn-default btn-sm ng-scope" ng-click="include('rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show template:
<div ng-repeat="template in templates">
<div ng-include="template.src">My template will be visible here</div>
</div>
Can somebody give me a hint?
I tried to do it myself but I didn't find what I need.

Try this: http://plnkr.co/edit/ZzPF7UFjKyp2tqn27cf4?p=preview
All of the projects are sharing the templates collection. Solve this by giving each project its own templates array and iterating through that.
Make the include function into:
$scope.include = function(project, templateURI) {
if (!project.templates)
project.templates = [];
project.templates.push({src:templateURI});
}
Call it like this:
<button class="btn btn-default btn-sm ng-scope" ng-click="include(project, 'rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show it like this:
<div ng-repeat="template in project.templates">
<div ng-include="template.src">My template will be visible here</div>
</div>

Panzoom - How to disable the drag option?

In rails 4.2.2 project, I am using panzoom jquery for a html element (instead of an image), for the same page I am using annotator plugin. Now the issue is annotator is not working because I am not able to select any word in the page. Whole html is moving(dragging) because of panzoom, how can I disable 'drag' option in it?
Referred by http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html
In views,
<div class="buttons">
<button class="zoom-in btn btn-default btn-xs">+ Zoom In</button>
<button class="zoom-out btn btn-default btn-xs">- Zoom Out</button>
<button class="reset btn-sm btn btn-primary">Reset</button>
</div>
<div class="panzoom" style="height: 480px;">
<%= render :file => #path %>
</div>
$(".panzoom").panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range"),
$reset: $(".reset")
});

Use the disablePan option:
$section.find('.panzoom').panzoom({
disablePan: true,
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});

Changes in html template do not reflect

I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?

Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.

Bootstrap popover on injected html button

I have injected a button like this:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" /> ');
but can't get a Bootstrap 3.0 Popover to render next to it when I click. Tried this inside $document.ready():
$(document).on('popover', '#pink', function(e){
e.preventDefault();
//console.log('clonk');
});
but nothing. Any ideas?

You can now use the selector option when creating dynamic popovers:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" rel="popover" title="A Title" data-content="This is the content of the popover" />');
$('body').popover({
selector: '[rel=popover]'
});
$(document).on('show.bs.popover', function(e) {
console.log('clonk');
});
Fiddle here