I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.
I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.
Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.
I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.
Anybody on this?
Lille
Triggering 'focusout' event formats the field. Triggering 'change' does not work in the most recent version (1.7.4).
$('input.money').autoNumeric({aNeg: '-'}).trigger('focusout');
autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:
$('input.money').autoNumeric({aNeg: '-'}).trigger('change');
Hope this helps!
I just ran into this problem myself. I had to make it more general, but this worked for me:
$('input.auto-numeric').ready(function(){
var format_options = {
aSign: '$'
};
$('input.auto-numeric').each(function(){
$(this).autoNumeric(format_options);
if($(this).attr('id')){
$(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
}
});
});
This should work.
jQuery(function($) {
$('input.auto').ready(function(){
$('input.auto').autoNumeric();
var inputID = uniqueID; // use the jQuery.get() function to retrieve data
var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
if(jQuery().autoNumeric){
$('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
}
else{
alert('plugin not available');
}
});
});
Bob
This is what I eventually did:
$(document).ready(function(){
$('input.auto').autoNumeric();
$('input.auto').each(function(){
var element = this
if(element.value !=""){
$('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
}
}
);
});
Another way of forcing formatting is using 'update' like
$(".input-numeric").autoNumeric('update');
In the current version 2.* and onward, this is done by default thanks to the formatOnPageLoad option that is set to true.
It's that simple ;)
Related
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.
I am trying to implement CKEditor 4 into an ASP NET website that I am working on, but I cannot figure out how I would save the edited material from the inline editor I know how to do it with the the old version, but I just don't understand the process for this.
I have looked in the forums... There is not v4 forum.
I looked in for the documentation.... Couldn't find it.
I have a feeling that this is a simple task, but I just don't know how.
You can get your data with CKEDITOR.instances.editor1.getData(). Then you can send it via AJAX or store it as a value of some input field. To do this periodically, follow this method:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable' );
var savedData, newData;
function saveEditorData() {
setTimeout( function() {
newData = editor.getData();
if ( newData !== savedData ) {
savedData = newData;
// Send it with jQuery Ajax
$.ajax({
url: 'yourUrl',
data: savedData
});
// Or store it anywhere...
// ...
// ...
}
saveEditorData();
}, 500 );
};
// Start observing the data.
saveEditorData();
You can also observe the submit event and update some (hidden) form field with your data.
Have fun!
Are you trying to get it with AJAX or send with a form? The value of for example the top right inline editor area with Lorem Ipsum can be gotten like in the older version with simply
CKEDITOR.instances.editor1.getData().
In the XHTML output example they have a simple form that seems to work and I believe that using an (static) inline editor is just the same.
If you transform elements into editors inline dynamically, I would try to bind to the submit event and before submitting loop through all CKEDITOR.instances, get their data into hidden from fields. As for the hidden field naming or identifying which hidden field corresponds to which dynamic editor you'll have to figure out yourself :)
I apologize if this has been asked before but, is there a way to add an event listener/handler to a Javascript object? Preferably using JQuery.
Such as:
var foo;
$(foo).bind('change', function() {
alert("Foo has changed!");
});
I have tried this, but nothing seems to happen. Does this only work with DOM elements?
EDIT:
I need an event fired every time that the audio or video tags throw an error. Originally, I was using an interval to check whether or not the error, 'media.error', object was null, but this uses excess processing power and I would like to avoid it.
EDIT 2: Apparently I was going about it wrong, easiest way I found was to add the "onerror" property to the video/audio tag.
I agree with Cheeso that it's more important for you to state what you actually want to do, however one workaround for your specific question could be to store your variable within an object and only provide access through getter / setter, then you can do what you want in the setter. e.g.
function data() {
var foo = 0;
this.setFoo = function(newVal) {
foo = newVal;
alert(foo);
};
}
var theData = new data();
theData.setFoo(5);
Yes, that's correct. You cannot make a "variable watcher". There is no event fired for variables when they are changed.
What are you really trying to do?
You could try:
http://higginsforpresident.net/js/static/jq.pubsub.js
See
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events
Or use a framework like backbone/underscore or knockout.js.
HTML/Elements/audio
var foo;
$(foo).bind('error', function() {
//your code here
});
I want to have the actual idtab button aswell as a link/button within the tab able to change tabs via JavaScript.
Is this possible if so how?
Thanks
after looking through the examples again I have re-used the bulk of it and I have come up with the following
function switchTab(ActiveTab) {
var set = $('.idtabs').html();
$("a", set).removeClass("selected")
.filter("[href='" + ActiveTab + "']", set).addClass("selected");
$.each($("a", set), function (key, value) {
$($(value).attr("href")).hide();
});
$(ActiveTab).show();}
I have just stumbled through your post after a google search. In case anyone else arrives here through the same way, I'll let an advice.
Instead of...
$("a", set).removeClass("selected")
...and...
$.each($("a", set), function (key, value) {
...one should use:
$("yourMenu#IdOrHTMLTag a")
It will prevent the code from calling jQuery's .hide() and .removeClass at all links of the page, which would raise an error.
You can achieve what you want just triggering the link's click event:
function switchTab(ActiveTab) {
$("a[href'"+ActiveTab+"']").click();
}
I want to take advantage of the sortableRows property of the jqGrid. How do I detect when a row has been moved. I have studied the documentation and looked for examples but haven't found much. I do believe it is something like
jQuery("#grid").sortableRows({connectWith:'#gird',
ondrop: function(){ alert("row moved") }});
but that does not work. I can move the rows, but don't seemed to have trapped the event. Is there something wrong with my syntax or my approach in general.
Basically, I need to know that the rows have been rearranged so I can be sure they get saved with their new order.
Thanks
jqGrid uses the ui-sortable plugin to sort rows: http://jqueryui.com/demos/sortable/.
In
jQuery("#grid").sortableRows( options )
"options" is the passed to the sortable plugin.
options = { update : function(e,ui){} }
is what you want.
Attach the sortstop event handler to your grid:
jQuery("#grid").bind('sortstop', function(event, ui) { alert("row moved") });
I did a quick test and that worked for me.
jQuery('#'+grid_id).jqGrid('sortableRows', {
update: function (event, ui) {
var newOrder = $('#'+grid_id).jqGrid("getDataIDs");
//do whatever you want with new roworder
//please keep in mind this will give only page visible rows
}
});