I have multipul input fields on a page, a few of them are type="textfield"
and some of those textfields i want to group,
so that if i type something into one of them it propergates to the rest within that group.
I have tried using the same name as radio buttons work like this, but that doesn't seem to work.
i have looked around the net but cannot find any examples.
does anyone know how to do this, or anywhere which tells you how?
Regards
chris
I don't think it's possible with pure html, have you tried using JavaScript? I would look into jQuery to set up event handlers for that.
$('textbox1').change(function(o) {
$('textbox2').val($(o).val());
}
Will react to all changes of textbox1 and replicate the value to textbox2. Untested code, only an approach.
jQuery since version 1.7 offers a convenient way to handle several events by using the .on() handler - method:
$(document).ready(function() {
$('#textbox1').on('keypress keyup change', function(event) {
$('#textbox2').val(event.target.value);
});
});
Related
I am using a paper-dropdown-menu and at present have an on-iron-select in the paper-dropdown-menu. I need a way to have this only fire when the user makes a selection and not when the selected item in the embeded paper-listbox changes. Is this possible or is there a way to distinguish the event?
The paper-dropdown-menu is dynamically created so i cannot bind a static variable to it and use an observer on that.
Any help would be appreciated.
Thanks
Well I have bad news for you. You can´t know if this event was trigged by User or Polymer. The event you recive is the same for both cases. But there might be a solution. If you have a paper-listbox as child of the dropdown, you can use its selected property to see whats selected. So now add a simple observer on the property which is bound to the selected attribute. This observer gets always the old and new val so if the old val was undefined you know this was trigged by polymer. I know not a nice solution but yeah this is just how polymer works
_selectedChanged: function(newVal, oldVal){
if(oldVal !== undefined) {
//do something
}
}
I have added an on-tap listener to the paper-item as a work around and that seems to do the trick in my case.
I have a button instance named "instructionButton" and I'm trying to trace "Clicked." to the output when it is clicked as a test but I haven' been successful thus far. Is there something I'm missing?
I'm using code in Flash Pro 6
import flash.events.MouseEvent;
var clickedVar:String = "Clicked.";
var runVar:String = "mice running...";
trace(runVar);
function instructionOpen(event:MouseEvent):void
{
trace(clickedVar);
gotoAndPlay(255);
}
instructionsButton.addEventListener (MouseEvent.CLICK, instructionOpen);
And of course if there's a more simple way to approach this, all knowledge will be helpful.
Check instance name is provided or not in the property window for the button (click the button and go to menu 'Window->Properties' to open property window)
What name is mentioned in the property window for the button, should use the same instance name in action script coding. Ensure the spelling from both script(code) and property window instance name.
I don't really see anything wrong with your button code, but here's how i do mine in AS3, it may help :) Creating a simple function within the event listener, I use stopPropgation to prevent my button from clicking anything that may be below it in the flash file. ( say you have two buttons on top of one another, you'll click both instead of one)
instructionsButton.addEventListener(MouseEvent.CLICK, function(e){
e.stopPropagation();
trace("Clicked.");
gotoAndPlay(255);
});
This is one button, if you need say fifteen, let me know as I have a code sample I'll give you that i use to create a limitless amount of buttons and eventlistners using switch/case which has been a huge help to me :)
The only way this will not work is if you are not reaching this frame.
Try add this code on your first frame and tell me if this helping.
I'm trying to figure out how to transition from one page to the next using jQuery mobile. I have a JSON callback function, and once that function returns a value (say YES or NO), then I either want to transition to a specific page or display an error message. Could somebody provide some sample code on how to write this transition?
I get that the href should look something like this:
Next page
But how do I call this from within a javascript callback function? Thanks!
Invoking changePage from your callback should accomplish what you are trying to do.
Your_Callback(){
if(YES) {
changePage("nextPage.html");
} else if(NO){
changePage("errorPage.html");
}
}
Would it be possible to share the JS code that's not working for you?
There is a method for this purpose:
$.mobile.changePage('nextPage.html')
Check de documentation to see the parameter it accepts
Did you consider writing the page in PHP to create a session cookie?
`session_start();
$url = $_SESSION['back'];'
in the jquery you would use:
window.location ="'.$url.'";
or
maybe try location.href = "myPage.html"
Is it possible to extend the addEvent function in mootools to do something and also calls the normal addEvent method? Or if someone has a better way to do what I need I'm all years.
I have different 'click' handlers depending on which page I'm on the site. Also, there might be more than one on each page. I want to have every click on the page execute a piece of code, besides doing whatever that click listener will do. Adding that two lines on each of the handlers, would be a PITA to say the least, so I thought about overriding the addEvent that every time I add a 'click' listener it will create a new function executing the code and then calling the function.
Any idea how I could do it?
Whereas this is not impossible, it's a questionable practice--changing mootools internal apis. Unless you are well versed with mootools and follow dev direction on github and know your change won't break future compatibility, I would recommend against it.
The way I see it, you have two routes:
make a new Element method via implement that does your logic. eg: Element.addMyEvent that does your thing, then calls the normal element.addEvent after. this is preferable and has no real adverse effects (see above)
change the prototype directly. means you don't get to refactor any code and it will just work. this can mean others that get to work with your code will have difficulties following it as well as difficulties tracing/troubleshooting- think, somebody who knows mootools and the standard addEvent behaviour won't even think to check the prototypes if they get problems.
mootools 2.0 coming will likely INVALIDATE method 2 above if mootools moves away from Element.prototype modification in favour of a wrapper (for compatibility with other frameworks). Go back to method 1 :)
I think solution 1 is better and obvious.
as for 2: http://jsfiddle.net/dimitar/aTukP/
(function() {
// setup a proxy via the Element prototype.
var oldProto = Element.prototype.addEvent;
// you really need [Element, Document, Window] but this is fine.
Element.prototype.addEvent = function(type, fn, internal){
console.log("added " + type, this); // add new logic here. 'this' == element.
oldProto.apply(this, arguments);
};
})();
document.id("foo").addEvent("click", function(e) {
e.stop();
console.log("clicked");
console.log(e);
});
it is that simple. keep in mind Element.events also should go to document and window. also, this won't change the Events class mixin, for that you need to refactor Events.addEvent instead.
Currently I am using Form.Validator from Mootools 1.2.5 and Mootools-More 1.2.5, but i am having a hard time validating an Element's input when dynamically injected into the DOM after ondomready. I was wonder if there's a way to attach Form.Validator's functionalities to the newly inject Elements?
UPDATE:
Using what #Dimitar suggested i was able to fix the issue. I use the build in function getFields to repopulate/attach events to the dynamic Elements. formValidatorObj.watchFields(formValidatorObj.getFields()); Hope this will help some Mootooler's in the future!
i am not a big -more users but looking at the source code on github, this seems like a good guess:
https://github.com/mootools/mootools-more/blob/master/Source/Forms/Form.Validator.js#L161
i guess you can pass any element - dynamically created or otherwise.
formValidatorObj.watchFields([someElsCollection]); // or from form.getElements or whatever.
// dynamically add a new field...
formValidatorObj.watchFields([new Element("input.required[value=John]").inject(formValidatorObj.element, "top")]);