I have a Handlerbar that has a button, like this:
<button id="addLine" type="image" class="AddButtonClass" title="Add New Line" onclick = "addNewBlock('{{blockId}}');"></button>
I then use this template to create objects dynamically, like this:
var template = window.app.getTemplate('myHandlebar');
var budgetBlock = $(template({blockId: guid}));
$("#BudgetTable tbody").append(budgetBlock);
I then have a function like this:
addNewBlock: function(getId){
alert(getId);
},
The problem is that the button on the Handlebar event never fires. Instead, I get an error "Uncaught ReferenceError: addNewBlock is not defined "
Why cant I assign an onclick event to a button in the handlebars? Is there a way to add an event to a button, dynamically, when the template is created?
thanks
try this instead:
<button id="addLine" type="image" class="AddButtonClass" title="Add New Line" data-id="{{blockId}}"></button>
and in your backbone for example in your initialize function:
$('#addLine').click(function(){
alert($(this).data('id'));
});
or you can create an event in backbone
events: {
'click #addLine' : 'addNewBlock'
},
addNewBlock: function(e){
console.log( $(e.currentTarget).data("id"));
}
Related
I am facing an issue while dynamically creating Button element in Typescript.
I am reading the properties from external config and accordingly creating buttons.
The buttons appear on the screen. Only the 'click' functionality doesn't get applied. i tried giving alert on button click, which does not appear on clicking the buttons. No error , no output.
Following is my code snippet:
for(var i=0; i< myArr.length; i++)
{
var button1 = document.createElement('button');
button1.textContent = "Connect To button " + [i];
button1.click = function()
{
alert("inside btn click function ");
}
docContent.appendChild(button1);
};
Can anyone help figure out what needs to be changed?
You would have to attach an click event listener to you button like so :
button1.addEventListener('click',()=>{
//This would be your callback function for the click event on button
})
The default event listener is "onclick", not "click". Just to:
button1.onclick = function() {alert('Clicked!');}
Working fiddle here.
How can I enable or disable ckeditor.inline on a div based on a click of a button/link.
This is how I would achieve it in jquery but can't figure it out using angular.
$('.toggle-edit').click(function(e){
var id_editedDiv = $(this).data('editTarget');
var editedDiv = '#' + id_editedDiv;
if( $(editedDiv).attr('contenteditable') == 'true' )
{
$(editedDiv).attr('contenteditable','false');
CKEDITOR.instances.id_editedDiv.destroy();
$(this).text('Start Editing');
}
else
{
$(editedDiv).attr('contenteditable','true');
CKEDITOR.inline( id_editedDiv );
$(this).text('Finish Editing');
}
});
This is how I achieved the result.
https://plnkr.co/edit/YUOYGa?p=preview
But now I need to figure out how to bind the model to the CKEditor so that my changes are updated in the model when I hit save.
Destroys the editor instance, releasing all resources used by it. If the editor replaced an element, the element will be recovered.
In your controller:
alert( CKEDITOR.instances.editor1 ); // e.g. object
CKEDITOR.instances.editor1.destroy();
alert( CKEDITOR.instances.editor1 ); // undefined
More detail
You can use button with ng-click attribute for example:
<button type="button" class="inlineEditButton"
ng-controller="CKEditorController"
ng-click="changeInlineEditindState()"
</button>
in CKEditorController you should define method:
$scope.changeInlineEditindState = function() {
// your code
}
You can do something like:
var content = '';
After instances creation add listener:
ck.on('instanceReady', function () {
ck.setData(content);
});
On save button click:
content = ck.getData();
This is a Backbone project written in Typescript. I am unable to launch a click event for a checkbox with BackboneJS. Here's the code:
//backbone code
events = {
"click .add-new-question-box": "clickEvent"
};
clickEvent(){
console.log(this.model.get("question"))
alert(this.model.get("question"));
}
//html template
<input id="<%= typeId %>" type="checkbox" class = "add-new-question-box">
The template renders just fine, but when I click the checkbox, I dont see the event getting called.
**
Update
**
I've replicated this problem in another instance where I'm using lambda, but its still nt working. Here's the full code:
function getNewDiv(id:string){
return "<div id = \"" + id + "\"></div>"
}
class TestView extends Backbone.View{
events = {
"click #testDiv" : "start"
}
start = ()=>{
console.log(this.model.get("question"))
alert(this.model.get("question"));
}
constructor(options?){
super(options);
}
render(){
$root.html(getNewDiv("testDiv"));
$("#testDiv").css("height", 100).css("width", 100).css("background-color", "blue");
console.log("Rendered");
return this;
}
}
new TestView().render();
The rendering happens just fine. The click handler is still not being called. Here is the console output.
Rendered
One thing to consider is this might be incorrect. Try using a lambda:
clickEvent = ()=>{
console.log(this.model.get("question"))
alert(this.model.get("question"));
}
In my router I require a view like this:
require(['views/business-detail-view'],
function(BusinessDetailView) {
var businessDetailView = new BusinessDetailView({collection: businessOverviewCollection.models[id], id: id});
businessDetailView.render();
}
);
and in the view I'm binding events like this:
events: {
'click #about-btn' : 'aboutHandler',
'click #contact-btn' : 'contactHandler',
'click #deals-btn' : 'dealsHandler',
'click #map-btn' : 'mapHandler'
},
Now the issue is that if the view gets rendered the first times the callbacks are invoked ones. But if the view needs to be rendered again in some other place the callbacks are invoked twice and so on.
How can I prevent this or am I doing something wrong?
UPDATE:
In the meantime I have changed the code in my router to:
if ( !businessDetailView ) {
require(['views/business-detail-view'],
function(BusinessDetailView) {
businessDetailView = new BusinessDetailView({collection: businessOverviewCollection.models[id]});
businessDetailView.render();
}
);
}
else {
businessDetailView.collection = businessOverviewCollection.models[id];
businessDetailView.render();
}
which seem to solve the issue, but I'm still to new to backbone this know whether this is a valid pattern.
At some point in your view you probably clear out the existing HTML on the page and replace it with new HTML. When you clear out old HTML you should also clear out old event handlers so they aren't laying around. For example, in your view when you want to render your newHtml you could do:
#$el.off().html(newHtml)
Creating a calculator-like dialog, I noticed that quickly clicking on a button in IE will not fire the click event twice (Chrome/FF work as expected), but rather throws the click event, then a double-click event. Experimenting with some simple code, I essentially want to duplicate this behavior:
<script language=javascript>
function minus(num)
{
var i = document.getElementById('0001');
if (i.value > 1)
{
i.value -= num;
return true;
}
}
</script>
<input type="button" onclick="minus(1);" ondblclick="minus(1);" value="minus">
<input type="text" id="0001" name="0001" value=10>
I need to do this in ExtJS 3.1, but my efforts have been stymied. Here is the code I have tried:
Button btn = new Ext.Button(new ButtonConfig()
.text(text)
.tooltip(tooltip)
.tooltipType("title")
.scope(this)
.handler(delgateFunction)
.x(x)
.y(y)
.tabIndex(_tabIndex++)
.width(width).height(height)
.ToDictionary());
btn.addListener("mouseenter", new EventHandler(mouseHandler));
btn.addListener("mouseover", new EventHandler(mouseHandler));
btn.addListener("mouseout", new EventHandler(mouseLeave));
if (Ext.isIE)
{
//btn.on("dblclick", new EventHandler(DoubleClick));
//btn.addListener("dblclick", new EventHandler(DoubleClick));
//btn.addListener("ondblclick", new EventHandler(DoubleClick));
}
None of those three lines seemed to work. Any suggestions?
try the following after the button is rendered:
btn.el.on("dblclick", new EventHandler(DoubleClick));
Ext.Button itself hasn't the "dblclick" event (check the api) while its underlying el(Ext.Element) has.
Complete Sample:
new Ext.Button({id:'btn', text:'dblclick', renderTo:Ext.getBody() });
Ext.getCmp('btn').el.on('dblclick', function(){alert('db click');});
Mr. Zhu led me to the correct answer:
Events.AddEvent(_zeroBtn.getEl().dom, "dblclick", DoubleClickZero);