Suppose i've many input type="text" all over a page.
I would like to erase the content of an input whenever i click into it. If i'll change the content, it will save it. If not, it will restore the original value.
I would like to assign this kind of function automatically (on document ready) to all of the input within the page.
Thanks!!!
Simple solution, uses event delegation where parent element (document.body) monitors childrens (all inputs of type text) for events:
focus ( it is triggered when the user focuses on an element )
blur ( event occurs when an element loses focus )
window.addEvent('domready', function() {
document.body.addEvents({
'focus:relay(input[type=text])': function(event, target) {
this.original = this.get( 'value' );
this.set( 'value', '' );
},
'blur:relay(input[type=text])': function(event, target) {
if ( !this.get( 'value' ) ) this.set( 'value', this.original );
}
});
});
Related
Trying:
this.viewer.addEventListener("selection", ( args )=>{
if( condition )
return false;
});
But it not works.
Does it possible to prevent selection by some conditions?
To completely cancel the selection use this:
this.viewer.addEventListener(
Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
if(condition) {
this.viewer.clearSelection()
}
})
To control what components are selectable, this is a harder topic, see that article: Controlling components selection in the Viewer
I have a form, containing a <select> element containing options which are changing according to another field value.
So, when the <select> item gains focus if the other field value is not set blur event is triggered on the previous, and focus is triggered on the latter.
Here's a simplified version of my code:
$(document).on('focus', '#requiresOuterValue',
function() {
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
}
});
The code works fine (dropdown content disappears, #outerValue gains focus) in Firefox but not in chrome, where #outerValue gains focus, but the <select> item contents are displayed as well.
Mmm.. Did you tried to use the native 'focus' method instead the 'focus' jquery event?
$('#outerValue')[0].focus();
I'm not sure that triggering jQuery events have implicit browser native behaviours.
Well, I came up with a solution.
Your problem is that the closure of a select is not standard in all browsers. the only way I found to simulate the closure is to re-render the select.
Here is the code:
$(document).on('focus', '#requiresOuterValue', function() {
var requiresOuterValue = $("#requiresOuterValue").clone();
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
$("#requiresOuterValue").replaceWith(requiresOuterValue);
}
});
EDIT: fiddle here http://jsfiddle.net/JonnyMe/C9rKL/1/
jQuery plugin implementation
You can even implement a jQuery plugin to achieve the goal:
$.fn.closeSelect = function() {
if($(this).is("select")){
var fakeSelect = $(this).clone();
$(this).replaceWith(fakeSelect);
}
};
And then use it this way:
$(document).on('focus', '#requiresOuterValue', function() {
if( isNaN(parseInt( $('#outerValue').val() )) )
{
$('#outerValue').trigger('focus');
$("#requiresOuterValue").closeSelect();
}
});
How can I bind an observable to an editable div text content?
You will need to modify the default "text" binding so that it is able to write the content of the edited div back to the observable. A simple custom binding handler for this task can look like this:
ko.bindingHandlers.editableText = {
init: function(element, valueAccessor) {
$(element).on('blur', function() {
var observable = valueAccessor();
observable( $(this).text() );
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).text(value);
}
};
But please note that this example code requires jQuery.
Usage is as simple as this:
<div contentEditable="true" data-bind="editableText: foo"></div>
Here is an example (written in CoffeeScript): http://jsfiddle.net/aBUEu/1/
You can't do that by default, because changing text in editable div won't raise any event that would update the value in your model.
You will need a custom binding for this. You can read about it here: http://knockoutjs.com/documentation/custom-bindings.html
I'm using the Spark's TextArea that contains links like this:
#hashtag
As you can see, this is a link to the Twitter search page for the specific hashtag. The hash-sign must be escaped in the query string. But, I have a problem here: when I click the link, the '%' symbol gets escaped automatically and the URL becomes corrupted (...search?q=%2523hashtag). Can I turn off this automatic escaping?
The '#' sign, if used in the URL, does not become escaped, and therefore the Twitter page does not open correctly in this case. So I cannot use neither '#' nor '%23' in the URL.
I would appreciate any solution for this.
Thank you.
Ok... so far, I couldn't find a way to turn off the automatic escaping of the URL when it's clicked. But I've found the workaround instead.
Basically, I add a custom click handler to all the link elements inside the TextFlow and open the links manually when clicked (instead of a built-in TLF behavior). Like this:
public function addLinkHandler( textFlowOrGroupElement: FlowGroupElement ): void
{
// scan the flow elements
for ( var f1: int = 0; f1 < textFlowOrGroupElement.numChildren; f1 ++ ) {
// found element
var curFlowGroupElement: FlowElement = textFlowOrGroupElement.getChildAt( f1 );
// if this is the link element, add the click event listener
if ( curFlowGroupElement is LinkElement ) {
( curFlowGroupElement as LinkElement ).addEventListener( FlowElementMouseEvent.CLICK, onLinkClick );
}
// if this is another flow group
else if ( curFlowGroupElement is FlowGroupElement ) {
// scan this group in turn, recursively
addLinkHandler( curFlowGroupElement as FlowGroupElement );
}
}
}
and here is the click handler for the links:
public function onLinkClick( e: FlowElementMouseEvent ): void
{
e.stopImmediatePropagation();
e.preventDefault();
var linkElement: LinkElement = e.flowElement as LinkElement;
navigateToURL( new URLRequest( linkElement.href ), '_blank' );
}
So in the end to make the Twitter-hashtag links work correctly in the TextArea, I do this:
addLinkHandler( textArea.textFlow );
P.S. The algorithm of adding the click handlers is based on this post, but optimized.
I am attempting to update the div of my dialog with new content from a json array and am encountering issues and am requesting some guidance.
I output a json array which has labels for a 'Name' and a 'Definition'. A user is presented with a list of radio buttons. When a user clicks a radio button which has the following structure:
<input type="radio" value="23" name="statistic" id="stat-23" />
I take the value of the radio button and use this to identify which 'Name' 'Definition' pair I am referring to from my json array.
I then use the 'Name' 'Definition' pair to populate a div which typically updates dynamically. To accomplish this I use the following code:
$('input[type=radio]').live( 'change', function(){
if ( ! $(this).is(':checked') )
return false;
var stat_id = $(this).attr( 'id' ).replace( /stat-/, '' );
refreshDefinition( stat_id );
} );
function refreshDefinition( stat_id ) {
var definition = definitions[ stat_id ];
var div = $("<div id='definition'>"+definition.name+": "+definition.definition+"</div>");
$('#definition').replaceWith( div );
}
This works fine without a dialog (it updates just fine as is), however, it would look a lot better if there were some way to incorporate a dialog so that when a user clicks a button, the dialog will appear and they can see the 'Name' 'Definition' pair and then can exit out of it when they are satisfied.
$('#definition').dialog();
I would like the above code to show the updated data, but it does not appear to allow it.
If you have any guidance on how I could go about solving this problem or any alternative approaches, I would really appreciate it!
Thanks.
Have you tried updating the dialogs content?
$('#definition').html(definition.name+": "+definition.definition);
Here's an example.
EDIT:
unnecessary .dialog('widget') made this answer wrong.