The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 16, 2019, 05:18:20 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Javascript - new "control" effort, having trouble  (Read 3891 times)
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« on: April 15, 2009, 06:18:35 PM »

I'm trying to create my own HTML input controls and having just a titch of trouble, hoping someone might have an idea to push me in another direction.

For this example, I am creating a horizontal switch. It is a representation of on/off, with the value of 1/0 or true/false. It is analogous to the checked/unchecked state of a checkbox, but a different look for GUI reasons.

I have a hidden INPUT nestled in a DIV. The Input holds on to the current value, and since you can get/set the value like any other INPUT it's useable in a pretty generic situation. Right now I have an initSwitch(target, state) function that sets up the switch initially, then an onClick on the DIV responds to user selection and changes the state of both the underlying graphic and the value of the input within the div. It's all working wonderfully.

My problem is that I ONLY want to have to set the VALUE of the input, I don't want to have to call the initSwitch function. In other words, I want the to put an onChange event on the hidden div so that when I push a new value at it it fires it's own code - which would be used to changed the surrounding DIV's background image. The problem, of course, is that there is no onChange for a hidden INPUT, nor will pushing a new value at any INPUT fire the onChange event (in case I went with a text-style input that was simply not displayed).

So I'm looking for tricks/hacks/thoughts on how to fire some code off when I change the value of an input. I know, I should be happy simply calling the code manually when I want to change the state, but I'd really like to deal with the input as if there is no difference than any other input ... no additional code, no indication that it is anything other than a text field.

Thanks in advance for any thoughts,
/perk
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nop_90
Global Moderator
Lifer
*****
Offline Offline

Posts: 2203


View Profile
« Reply #1 on: April 16, 2009, 09:41:00 AM »

You want like a perl tie ?
in perl you can "tie" to a variable
so when the value in $A changes it notifies what ever else u want.

Why not make a custom event.
so when u click on the thing, it fires off its custom event and then all the other things which listen to it catch it
http://www.dustindiaz.com/custom-events/
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #2 on: April 16, 2009, 09:51:09 AM »

no, that's the problem - there's no clicking in this case. It's all dynamic setting of the variable ie:

document.getElementById('theSwitch').value = true;

(Note that when there IS clicking, I've got it handled, the event system does me fine. It's when there's no clicking that's the problem)

... when I do something like this, I'd like an onChange event to fire. The point here is that any code in a WebApp could then change the value of the switch without worrying about the code that should fire when it is changed.

If I was in a truly OO environment, I'd write a new class, inherited from the INPUT dom object (only if it was type=hidden) and then rewrite the onChange event or add new code tied to the value property. I've done an awful lot of Googling in the past few days and have found no help yet.

Given a wave of my wand, it'd be something like this:

<div class="hSwitch" onClick="toggleSwitch(this)"><input type="hidden" value="1" onChange="updateSwitch(this)"></div>

... where the onChange would recognize that there was a dynamic (read: coded) change to the input value, or if the outer DIV was clicked then it would know to toggle and change the value in the input. The DIV is sized/shaped/styled with a background so that it's handling the image of the switch.

My web apps are very objecty, and what I want to do is have one working entity be able to simply change the value of this input, rather than knowing what type it is and having to deal with the code to handle it. This actually leads to a whole suite of custom controls that I'd like to create - things that look and feel like normal FORM fields to the dom, but can be nicely custom looking and behaving for the user.

:sigh: A guy can dream, no?
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #3 on: April 16, 2009, 10:14:42 AM »

what about using a normal text field, but hidding it? since hidden is whats giving you problems?

Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: April 16, 2009, 10:23:56 AM »

normal text fields won't fire the onChange if you set the value dynamically either. Good eye, went that way as well, but no dice yet.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #5 on: April 16, 2009, 12:48:08 PM »

ah. hmm.
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
nop_90
Global Moderator
Lifer
*****
Offline Offline

Posts: 2203


View Profile
« Reply #6 on: April 16, 2009, 05:15:04 PM »

What you have to understand is that python and JS are very similar in design.
Object and Classes can be modified at runtime, as in you can add new methods etc.

In python you have properties as in
class A(object):
    def __init__(self):
        self._x = True
   
    def set_x(self,value):
        self._x = value
       
    def get_x(self):
        return self._x
   
    x = property(get_x,set_x)

so when you set the value of x as in
a = A()
a.x = 99 it will call the method set_x

in this case
document.getElementById('theSwitch')  is some sort of dom element
you can have a "cheat" add a special function to the element at runtime

document.getElementById('theSwitch').getValue = function(value) {}

check the number of args function has
if no args leave value alone just return setting
if there is an are set value to what you want.

Or according to mozilla docs
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
Javascript has getters and setters
overide the getter and setter with your own remembering to call the origionals

If you look inside Prototype and JSQuery you can see how they are modifying the  string class in JS (i am not sure if they are called classes in JS Smiley)

In python I have changed classes and objects at runtime, or in one case even defined a class at runtime.
You should only do it in very special circumstances. As in no other option. Probably same thing can happen in JS
Very nasty things can happen if u are not careful Smiley
So in your case I would not do it.





Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #7 on: April 16, 2009, 05:26:26 PM »

I am not afraid of modifying getters and setters Nop, and I completely forgot that you can add properties to JS objects on the fly... the notion of adding a new property that way is an excellent gear spinner. I don't know if I can override the setter for the value property on a DOM element, but I'm pretty durn sure I can add another on the fly. Then perhaps I change my programmatic MO to call *my* setter rather than the generic VALUE property, I might have a solution there.

I've also been toying with going a completely different direction, essentially an intermediary function like setValue(theID, theValue) which would interrogate the targeted object and do the correct code for updating the value. The net result is the same - the calling code needs have no understanding of the object it is modifying.

Nice one - thanks man.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nop_90
Global Moderator
Lifer
*****
Offline Offline

Posts: 2203


View Profile
« Reply #8 on: April 16, 2009, 06:16:16 PM »

I am not afraid of modifying getters and setters Nop, and I completely forgot that you can add properties to JS objects on the fly... the notion of adding a new property that way is an excellent gear spinner. I don't know if I can override the setter for the value property on a DOM element, but I'm pretty durn sure I can add another on the fly. Then perhaps I change my programmatic MO to call *my* setter rather than the generic VALUE property, I might have a solution there.
That is exactly what my origional problem when I first started using python was. For the first few years I was basically writting C++/Pascal in python.
In C++ etc classes are "dead" while in python/JS/lisp objects are live. Hard to wrap your head around that.

Really cool thing i did.
I wanted to pass a JS object over JSON bridge into python

So lets say it is document object. (object does not matter)
I then using the "in" function interegated the object. All the properties methods where stored in a dictionary. So lets say it was document object
{"title":"string","forms" : "array","links" : "array","getElementsByTagName" : "function"}

I then pass it over the bridge to python.

On the other end I unpacked the JSON hash
then I created the class at runtime on the python side.
So if it was a property like "title" it would add a title property to the class.
I then made a getter/setter for it which would then generate the appropriate JS code which I could send back over the bridge to so I could get the value or set the value of the property. Using similar technique I did same for functions.

So it did not matter what the JS object was I could always make a class for it. (I also would cache the class definition so next time same class came over bridge I did not have to make again, but that advanced Smiley)

If you where using a traditional language like C++ you would have to make a seperate class definition for each object/class
If it changes you are fucked you have to modify you definition.

Also you would have tons of code, while in python you can just do it with like 200 lines Smiley

Technically what I am doing is called metaclass
I never understood metaclasses because I was thinking from a C++/Delphi perspective.
But once i threw away that thinking, I just examined python objects/classes as what they are just Data it clicked into place.
Same holds true with JS

That is the real power behind scripting languages like Perl/Lua/JS/Python/Lisp/Ruby
You can do same thing in these other languages (I just do not know how to do in Lua and Perl Smiley)

Otherwise you are just writing C++/Delphi code with a different syntax
And to boot you are a lot slower Smiley


Basically my blog http://hidingwithcoding.blogspot.com/
It is not really for public consumption.
I make notes, but then they would get lost etc. Then I would want to do same thing later on, but then I would forget how, have to spend like 1 hour searching to figure out what i did like 6 months ago.

So I just basically shove all my notes on blog. That way I can remember
As a result they are kind of cryptic Cheesy
« Last Edit: April 16, 2009, 06:36:38 PM by nop_90 » Logged
Bompa
Administrator
Lifer
*****
Offline Offline

Posts: 564


Where does this show?


View Profile
« Reply #9 on: April 16, 2009, 06:45:43 PM »

Basically my blog http://hidingwithcoding.blogspot.com/
It is not really for public consumption.
I make notes, but then they would get lost etc. Then I would want to do same thing later on, but then I would forget how, have to spend like 1 hour searching to figure out what i did like 6 months ago.

I had that same problem, but not I keep a PERLSNIPPETS.txt file ALWAYS in one place,
but a blog is a good idea.




Logged

"The most beautiful and profound emotion we can experience is the sensation of the mystical..." - Albert Einstein
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #10 on: April 17, 2009, 12:22:41 PM »

@dynamic object creation - that's damn cool noppy, hadn't really ever thought of doing that (haven't had the need, but that's beside the point). Gonna have to give that a think and see where/if it might apply to some of my stuff.

@losing stuff: I decided on a forum Wink
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
nutballs
Administrator
Lifer
*****
Offline Offline

Posts: 5627


Back in my day we had 9 planets


View Profile
« Reply #11 on: April 17, 2009, 12:29:44 PM »

@losing stuff. I use gmail.
Logged

I could eat a bowl of Alphabet Soup and shit a better argument than that.
nop_90
Global Moderator
Lifer
*****
Offline Offline

Posts: 2203


View Profile
« Reply #12 on: April 17, 2009, 05:45:51 PM »

@dynamic object creation - that's damn cool noppy, hadn't really ever thought of doing that (haven't had the need, but that's beside the point). Gonna have to give that a think and see where/if it might apply to some of my stuff.

The correct name in python is metaclasses Smiley I just make up stupid terminolgy Smiley
Metaclass basically translates into a class the generates other classes
So just like a class creates an object, a metaclass generates a class

Classic example of use of metaclasses is sqlobject in python http://www.sqlobject.org/

Code:
>>> class Person(SQLObject):
...     fname = StringCol()
...     mi = StringCol(length=1, default=None)
...     lname = StringCol()

SQLObject is actually a metaclass
when the metaclass constructor is called (it is not really called a constructor Smiley)
It then creates the class Person and adds the properties fname,mi,lname etc into the class
All this magic is done behind the scenes

I use another lower level method to create classes at runtime.
In perl all classes ussually are hashes (theoretically in perl you can bless any data object) which are "blessed" to turn them into a class
So you could make a hash at runtime, then bless it into a class

With JS you could use the same technique with a little work i think
JS has the concept of closures. Basically a function that returns a function. You can do a lots with that. (functional programming Smiley)
Also the parent class of all JS classes is a hash (i use the old perl terminoly, hash = dictionary)
so you can access the property/method 2 ways. window["location"] = "http://www.google.com" and window.location

Again like all stuff metaclasses are great, when used in proper place.
Problem in python when metaclasses first came out, people where using them for all sorts of stuff. For simple reason a new toy to play with.
Logged
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!