I have a button whose tooltip gets updated on enable/disable. But its not.Here is the binding js and html. When I use init then it doesn't but when I use update it does but then clickHandlers gets called multiple times. I am using knockout and bootstrap.
<button class="btn btn-primary" type="button"
id="displaySubmitBtn" data-bind="formSave: {text: isFormComplete() ? '' : missingRequiredTooltip, enable: isFormComplete, click: submitEstimateFromDisplay},
text: bundle.submit_button_label, visible: isSubmitVisible"
data-placement="bottom" data-backdrop="true">
</button>
ko.bindingHandlers.formSave = {
init: function (el, valueAccessor) {
var $el = $(el),
saveEnabled = valueAccessor()['enable'],
text = _.isFunction(valueAccessor()['text']) ? valueAccessor()['text']() : valueAccessor()['text'],
placement = _.isString(valueAccessor()['placement']) ? valueAccessor()['placement'] : 'bottom',
container = _.isString(valueAccessor()['container']) ? valueAccessor()['container'] : 'body',
clickHandler = valueAccessor()['click'];
var enabler = function (enabled) {
// not using $el.prop('disabled') on purpose so BS tooltip will show
if (enabled) {
// enable the button
$el.removeClass('disabled');
$el.attr('data-title', undefined).tooltip('destroy');
}
else {
$el.addClass('disabled');
}
$el.attr('data-title', text);
$el.tooltip({
//title: text,
placement: placement,
container: container
});
};
// call enabler to disable/ enable button and assign tooltip
enabler(saveEnabled());
// enabler listens to the computed method on button getting enabled/diabled
saveEnabled.subscribe(enabler);
$el.on("click", function (evt) {
if (!$el.is('.disabled')) {
$el.attr('data-title', undefined).tooltip('destroy');
if(clickHandler) {
clickHandler(evt);
}
}
else {
evt.preventDefault();
return false;
}
});
}
};
You should be setting the title attribute, not data-title
Related
I have problem with my script.
js
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
}
});
};
and html:
<div class="green" data-id="{{mydiv.mydiv_id}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm({{mydiv.mydiv_id}})">
Wykonane
</button>
</div>
Everything works well, id is allocated and when I check the console that also is all okay, but at this stage need to click the button changed class.For example when I'm click "showConfirm()" I need change class in div where data-id = showConfirm(id).
Now my div have class green, when I' click button this class change to red. In jquery the same script view like this:
$(button).on(click, function(e){
var element = $("div[data-id="+e+"]");
element.removeClass(green);
element.addClass(red)
});
How to do it?
EDIT:
I see that I need to add full code to make it clear :)
updated code:
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'title',
template: 'eeeeee'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
// if success set green
})
.error(function(){
// if error set red
})
}
});
};
I need change class when my server is success response.
You should do everything in angular way. angular.element is not the right solution.
You can use ng-class of angular.
Example
<i class="fa" ng-class="{'class-name1': condition1 == 'true', 'class-2': condition2== 'true'}"></i>
if condition 1 is true then class-name1 will be added, if condtion2 is true then class-2 class will be added.
HTML
<div ng-class="{'green': buttonClicked == true, 'red': responseInYes== true}">
$scope.showConfirm = function(e) {
$scope.buttonClicked = true;
$scope.responseInYes= false;
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
$scope.buttonClicked = false;
$scope.responseInYes= true;
}
});
};
I guess you are looking for something like this.
Consider using ng-class instead of class.
For example
You could also do this using objects, and based on your edit it could be something like:
Updating the HTML
<div data-id="{{mydiv.mydiv_id}}" ng-class="conditions[mydiv.mydiv_id] ? 'green' : 'red'">
And in your controller $scope.conditions = {}; and just set it to true or false in your success and error like : $scope.conditions[e] = true /* or false */;
Note. If you want the default to be green just set the condition to true on init or do the validations and settings assuming the expected to be a negative value.
Try updating a property inside mydiv:
<div class="{{mydiv._class}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm(mydiv)">
Wykonane
</button>
</div>
Then, in your function:
$scope.showConfirm = function(e) {
// your popup window and some more code ...
e._class = 'yellow'; // class for fecthing data (waiting server json result)
$http.get(URL).success(function(data) {
e._class = 'green'; // class for success
}).error(function() {
e._class = 'red'; // class for error
});
};
Use ng-class
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
Check this out.
In your case i suggest to do :
$scope.isGreen = false;
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
$scope.isGreen = true;
})
.error(function(){
})
In your Html file add this:
ng-class="{'class-green': isGreen, 'class-red': !isGreen}"
I have attached an onclick event on my glyphicon pencil icon provide by bootstrap, which then should fire up a modal popup. This happens however it seems to close the modal straight after I click on the pencil.
$('.overlayed').on('click', '.glyphicon-pencil', function (e) {
//hold the overlayed element for later use
var chartID = $(this).parent().prev().prop('id');;
$('#editWidgetModal').modal('toggle');
//check for onclick event for the save button
$('#edit-widget').on('click', null, function (event) {
//Now assign all textboxes and create an object to pass into the lineBasedChart mutator
var chartEditOptions = {
title: $('#chart-title').val(),
subtitle: $('#chart-subtitle').val(),
yAxis: $('#chart-yAxis').val(),
tooltip: $('#chart-tooltip').val(),
lineWidth: $('#chart-lineWidth').val() == "" ? "" : parseInt($('#chart-lineWidth').val()),
timeWindow: $('#chart-timeWindow').val() == "" ? "" : parseInt($('#chart-timeWindow').val()),
refreshCycle: $('#chart-refreshCycle').val() == "" ? "" : parseInt($('#chart-refreshCycle').val())
};
//set renderTo data attribute to the widgets created element
//overlayedData.data("data-render", chartID);
chart[chartID].SetNewOptions(chartEditOptions);
$('#editWidgetModal').modal('hide');
});
});
I want to get the console.log to output true or false on click of .icons div.
Here is some live code: codepen
I have a model called navigation
$scope.navigation = {
status: false;
}
And a big object that will toggle the ui
$scope.toggle = {
menu: function() {
$scope.navigation.status = !$scope.navigation.status;
alert($scope.navigation.status);
}
};
The trigger is an ng-click="open.menu()" :
<div class="icons " ng-repeat="(key, val) in squares" ng-style="perspective" ng-click="toggle.menu()">
Try:
toggle.menu()
instead of
open.menu()
I want one button to toggle two methods in backbone but I'm having issues. I'm pretty much new to JS in general.
If you click on a button:
I want to show a hidden div
change the text of the button clicked
Then, if you click the button again (which has the new text and the hidden div is shown)
Change the text
Hide the shown div
The second method of .hide is not being fired? I'm wondering if this is because .hide is not in the DOM initially, because it's being added on the show method. Just a guess and maybe there's a better way to toggle methods on one class?
Here's my JS
'touchstart .share-btn' : 'show',
'touchstart .hide' : 'hide'
'show' : function (e) {
var view = this;
$(e.currentTarget).closest('.tile').find('.share-tools').fadeIn('fast');
$(e.currentTarget).addClass('hide');
if ($(e.currentTarget).hasClass('hide')){
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('close');
}
},
'hide' : function (e) {
var view = this;
if($(e.currentTarget).hasClass('hide')) {
$('.share-tools').fadeOut('fast');
$(e.currentTarget).removeClass('hide');
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('share');
}
},
Maybe reworking your code a bit will help. I've created a working jsfiddle based on what I think you're trying to accomplish.
Here is the relevant view code:
var View = Backbone.View.extend({
...
// Make it clear that these are the same element.
// Ensure they will not both fire by making them exclusive.
events: {
'mousedown .share-btn:not(.hide)' : 'show',
'mousedown .share-btn.hide' : 'hide'
},
'show' : function (e) {
console.log('show');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeIn('fast', function () {
$e.addClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('close');
},
'hide' : function (e) {
console.log('hide');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeOut('fast', function () {
$e.removeClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('share');
}
});
You can find the working jsfiddle here: http://jsfiddle.net/somethingkindawierd/7rfs9/
Try to return false in your event listener to prevent call both methods on first click.
I'm struggling to get the below piece of code working. The problem is that when I wrap the two functions in the editItems property inside the parenthesis (), the code behaves strangely and assigns display: none inline css property to the edit button.
If I don't wrap the two functions inside the parenthesis, I get a javascript syntax error function statement requires a name.
var shoppingList = {
// Some code ...
'init' : function() {
// Capture toggle event on Edit Items button
(shoppingList.$editButton).toggle(shoppingList.editItems);
},
'editItems' : function() {
(function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}), (function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
}
}
$(document).ready(shoppingList.init);
However, if I invoke the toggle event "directly" like this, it works:
var shoppingList = {
// Some code ...
'init' : function() {
// Toggle event on Edit Items button
(shoppingList.$editButton).toggle(
function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}, function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
});
}
};
$(document).ready(shoppingList.init);
Is there a way I could store the toggle event inside the editItems object literal and still have it working as expected?
editItems function looks really odd. I guess you just need to define 2 functions: startEdit and endEdit. And bind them on even and odd clicks using toggle.
var shoppingList = {
// Some code ...
init : function() {
// Bind on edit button click
this.$editButton.toggle(this.startEdit, this.endEdit);
},
startEdit : function() {
$(this).attr('value', 'Finish editing');
shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
}),
endEdit: function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
};
$($.proxy(shoppingList, 'init'));