We Keep Coding

clear out the complete signature in one click

I am using jSignature on my web page. This jquery plugin deletes one stroke at a time. I want behavior of "Undo last stroke" to clear out the complete signature in one click.
I have changed the style of "Undo last stroke" to style of close button. So in my jSignature.UndoButton.js, the style code of "Undo last stroke" button is like below:
var undoButtonSytle = 'position:relative;display:none;float: right;margin-right: 5px;outline:0;cursor: pointer;color: rgb(218, 216, 217);font-size: 1.5em;'
, $undoButton = $('<i class="fa fa-window-close" style="'+undoButtonSytle+'" aria-hidden="true"></i>').append('<link rel="stylesheet" href="../../css/font-awesome.css" type="text/css" />')
.appendTo(this.$controlbarLower)
Undo function from jSignature.UndoButton.js (there is more code in this file)
function attachHandlers(buttonRenderer, apinamespace, extensionName) {
var $undoButton = buttonRenderer.call(this)
;(function(jSignatureInstance, $undoButton, apinamespace) {
jSignatureInstance.events.subscribe(
apinamespace + '.change'
, function(){
if (jSignatureInstance.dataEngine.data.length) {
$undoButton.show()
} else {
$undoButton.hide()
}
}
)
})( this, $undoButton, apinamespace )
;(function(jSignatureInstance, $undoButton, apinamespace) {
var eventName = apinamespace + '.undo'
$undoButton.bind('click', function(){
jSignatureInstance.events.publish(eventName)
})
// This one creates new "undo" event listener to jSignature instance
// It handles the actual undo-ing.
jSignatureInstance.events.subscribe(
eventName
, function(){
var data = jSignatureInstance.dataEngine.data
if (data.length) {
data.pop()
jSignatureInstance.resetCanvas(data)
}
}
)
})(
this
, $undoButton
, this.events.topics.hasOwnProperty( apinamespace + '.undo' ) ?
// oops, seems some other plugin or code has already claimed "jSignature.undo" event
// we will use this extension's name for event name prefix
extensionName :
// Great! we will use 'jSignature' for event name prefix.
apinamespace
)
}
I am not very known with Jquery. Can anyone please tell me how should I should I achieve clearing sign in one stroke?

Can be used in this way.
<button id="clear">Clear</button>
$('#clear').click(function () {
$('#signature').jSignature("reset");
});

How to toolbar`s button to be focused in ExtJS 4.2?

There is application in ExtJS and I am endeavouring to manage application without mouse. Some things is done, but I have no idea with toolbars button. Toolbars button cannot be focused. Although in application enabled Ext.FocusManager
Ext.FocusManager.enable(true);
What have to do to fix this problem?
var nav3 = Ext.create('Ext.util.KeyNav', Ext.getBody(), {
"enter" : function(){
var el = Ext.FocusManager.focusedCmp;
if( el.getXType() == 'menuToolbar' ){
console.log(el.items.items[0]);
el.items.items[0].focus();
}
},
scope : this
});

There are several problems in your code. First of all, Ext.create takes two arguments, you pass three. Thus the class created cannot work.
el.items.items[0] cannot work. Rather use el.down('button') to tell what component you want to select.
Your code should probably look like this
var nav3 = Ext.create('Ext.util.KeyNav', {
target: Ext.getBody(),
enter: function(){
var el = Ext.FocusManager.focusedCmp;
if( el.getXType() == 'menuToolbar' ){
console.log(el.down('button'));
el.down('button') .focus();
}
},
scope: this
});

JavaScript ignores bool

i try to do something like a status-check to enable/ disable settings.
// file 1
function settings( valStatus ){
var status = valStatus;
this.getStatus = function(){
return status;
}
this.setStatus = function( valStatus ){
status = valStatus;
}
}
calling this function here:
// file 2
$settings = new settings( false );
$(document).ready(function() {
$( '#openSettings' ).on('click', function() {
$settings.setStatus( true );
enableSettings();
});
$('#save').on('click', function(){
$settings.setStatus( false );
closeSettings();
});
});
// file 1
enableSettings = function() {
if( $settings.getStatus() === true ){
//toggle emptyLink
$('.myButton').on('click', function(){
alert($settings.getStatus());
});
}
}
So as startup while clicking on "myButton" nothing happens.
After Clicking on "openSettings" and then on "myButton" i get the alert "true";
After clicking on "save" and then on "myButton" again, i get the alert "false", but it does not even trigger, because i checked it befere.... can somebody help me please?
Where is my mistake?

I think you probably want to put the check for status inside the .myButton click handler instead of outside. That way you only need to apply the handler once and it will either work or not depending on the value of status.
$(document).ready(function() {
var $settings = new settings( false ); // keep out of global scope
$( '#openSettings' ).on('click', function() {
$settings.setStatus( true );
});
$('#save').on('click', function(){
$settings.setStatus( false );
});
$('.myButton').on('click', function(){
if ($settings.getStatus()) {
alert($settings.getStatus());
}
});
});

First of all, you can write JavaScript with less code than e.g. Java. You don't need the getter and setter methods since there is no package visibility. Since you do nothing with the setters you can access your fields directly. This is less code to read and less code where you can have errors. So get rid of useless code (remember this is not the request do code one-liners). Search the internet for "clean code".
Since you are in JavaScript you can do better than that. A smaller approach to store your information.
var mySetting = {};
mySetting.status = true
console.log( mySetting.status );
mySetting.status = false;
console.log( mySetting.status );
Remember to keep your global space clean! Search the internet for "javascript global scope pollution". So do this within your scope.
Your main problem is, that you are using closures. You probably don't want to use it in your case. Search the internet for "javascript closure tutorial". There are a lot of good ones out there.
Since you are using the Jquery, you can use the .data() function to store your information.
See http://api.jquery.com/jquery.data/
$(function(){
$( '#openSettings' ).on('click', function() {
$('#settings').data( "status", true );
enableSettings();
});
$('#save').on('click', function(){
$('#settings').data( "status", false );
closeSettings();
});
$('.myButton').on('click', function(){
alert($('#settings').data());
});
});
Or within the HTML itself. See http://api.jquery.com/attr/
$('#settings').attr( "status", true );
console.log( $('#settings').attr( "status" ) );
Or as switches.
$('#settings').addClass( "settingsEnabled" );
$('#settings').removeClass( "settingsEnabled" );
console.log($('#settings').hasClass('settingsEnabled'));
Use .data() if you want to store object references and HTML for simple information like switches etc. The benefit is, that you can reach that information even with CSS.
And please get rid of the $ prefix in your own code since it has no meaning. If you use frameworks like angular it will help you to identify the origin or like the $$ the ("don't") use of it.

Redefining a jQuery dialog button

In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.
Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.
So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?
My code so far:
function OverrideDialogButtonCallbacks(sDialogInstance) {
oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
console.log(oButtons); // logs the buttons correctly
if(sDialogInstance == 'TestInstance') {
oButtons.Save = function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
}
}
}

$('#dialog').dialog({
'buttons' : {
'Save' : {
id:"btn-save", // provide the id, if you want to apply a callback based on id selector
click: function() {
//
},
},
}
});
Did you try this? to override button's callback based on the need.

No need to re-assign at all. Try this.
function OverrideDialogButtonCallbacks(dialogSelector) {
var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
.find("button:contains('Save')");
button.unbind("click").on("click", function() {
alert("save overriden!");
});
}
Call it like OverrideDialogButtonCallbacks("#dialog");
Working fiddle: http://jsfiddle.net/codovations/yzfVT/

You can get the buttons using $(..).dialog('option', 'buttons'). This returns an array of objects that you can then rewire by searching through them and adjusting the click event:
// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };
See this fiddle for an example: http://jsfiddle.net/z4TTH/2/
If necessary, you can check the text of the button using button[i].text.
UPDATE:
The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:
// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };
$('#dialog').dialog('option', 'buttons', buttons);
See this fiddle: http://jsfiddle.net/z4TTH/3/

Can you try binding your new function code with Click event of Save?
if(sDialogInstance == 'TestInstance') {
$('#'+savebtn_id).click(function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
});
}

Meteor: Update across all browsers

I'm working on my first Meteor app, but I can't figure out how I can update something across all browsers.
This is the situation: When one person is typing, I want to display "typing..." across all browsers (so to each user), but I can't figure out how to do that.
This is my code so far:
Messages = new Meteor.Collection("messages");
if( Meteor.isClient ) {
// Templating
Template.messages.entries = function() {
return Messages.find();
};
// Events
Template.messages.events({
'click #new_post' : function() {
var new_message = document.getElementById("new_message").value;
if( new_message.length > 0 ) {
Messages.insert({ text: new_message });
document.getElementById("new_message").value = "";
}
},
'focus #new_message' : function() {
// Say "typing..."
},
'blur #new_message' : function() {
// Say nothing
}
});
}
As you can see, I want to say: typing when a textfield is focussed. Now I tried this before (but it didn't work out):
'focus #new_message' : function() {
// Say "typing..."
Template.messages.typing = function() {
return "typing...";
};
},
But it didn't update my HTML. I got the {{typing}} tag in my template and it's the template messages, so that's right. But it won't update..
You guys have a clue?

only Collections are synced across browsers with publish/subscribe in Meteor.
Maybe you can have something like a Users collection with an is_typing field and create a reactive template helper with it?
Very basic example:
Template.messages.is_typing = function() {
return Users.find({is_typing:true}).count() > 0
};
and in the template
<template name="messages">
{{#if is_typing}}
typing
{{else}}
idle
{{/if}}
</template>