How to reset an existing palette?

[kostis]

Hi,
I am creating some html inputs dynamically in javascript and assigning
dynamically created palettes...every time user selects a value from a
dropdownlist, I remove all the inputs from the page and recreate new
ones with palettes that contain colors I want from a web service.
The problem is that when palettes are recreated, I can see the
previous palette still showing up under the new one...

How could I get rid of this...?Why the palette isn't drop itself after
removing its corresponding input?
Is there a remove function for each palette?

Thanks,
Kostis

[wonderingwout]

Hi Kostis,

In the next big release of Q.js there is a destroy finction to remove
the palette's instance.
But this release is not ready for production.
In the meantime you could delete the palette's holde by doing
something like this:

// initialize palette
var palette = new Q.Palette({...});

// do your stuff
...

// when you delete the input...
input.remove();

// ... you should remove the palette element as well
palette.holder.remove();


Success!
Wout

[Kostas Tsimirikas]

I am sorry but I wasn't able to remove the palette so far...

Below is the code I use to create dynamically the palette via javascript:

 var qPalleteInput = document.createElement("input");

            qPalleteInput.id = "qPal_L1";

            qPalleteInput.readonly = "readonly";

            qPalleteInput.style.width = "150px";

            qPalleteInput.type = "text";

            tdinput.appendChild(qPalleteInput);

What should I do recreate just the palettes but leave the inputs as is?

And what the code "palette.holder.remove();" means?

Kostas

2010/11/30 wonderingwout <boysa...@googlemail.com>

[wonderingwout]

Well, the "palette.holder.remove();" simply removes the palette from
the DOM.
So it is gone and you can regenerate it when you want it.

On Dec 7, 3:51 pm, Kostas Tsimirikas <kostas...@gmail.com> wrote:
> I am sorry but I wasn't able to remove the palette so far...
>
> Below is the code I use to create dynamically the palette via javascript:
>

> * var qPalleteInput = document.createElement("input");*
> *            qPalleteInput.id = "qPal_L1";*
> *            qPalleteInput.readonly = "readonly";*
> *            qPalleteInput.style.width = "150px";*
> *            qPalleteInput.type = "text";*
> *            tdinput.appendChild(qPalleteInput);*
> *
> *

> What should I do recreate just the palettes but leave the inputs as is?
> And what the code "palette.holder.remove();" means?
>
> Kostas
>

> 2010/11/30 wonderingwout <boysabr...@googlemail.com>

[Kostas Tsimirikas]

Ok, but how can I get the "palette" object?Can I simply call document.getElementById()?Also, what is the "holder" object?

Could you please provide me with a quick example?

2010/12/7 wonderingwout <boysa...@googlemail.com>

[wonderingwout]

What do you mean by the palette 'object'?
There are the 'Class instance' and the 'Element'.

The class instance is the part that generates the element and controls
it.
You generate it like this:

var palette = new Q.Palette("id_of_the_input", { colors:
['#31332E','#585C53','#868C7F','#E0E3DC'] });

The class instance is now saved in the variable 'palette'.
And by creating an instance of Q.Palette the Element is generated by
the class.

Now if you delete the input from the dom you will break the link
between the class instance and the input forever.
This means that if you want to re-create an input you will need to
create a new class instance which will on it's turn create a new
Element.

You can probably see it coming.
If you do this a few times you will have multiple unused class
instances and element lying around.

So I suggest that if you want to dynamically generate and delete an
input with a palette attached you create a controller class.
Something like this:

// your controller class
var PaletteGenerator = Class.create({
initialize: function(inputId, tdinput) {
// generate input
this.qPalleteInput = new Element("input", { id: inputId, readonly:
'readonly' });
this.qPalleteInput.setStyle({ width: '150px' });
tdinput.insert(this.qPalleteInput);

// create palette instance
this.palette = new Q.Palette(inputId);
},

destroy: function() {
this.qPalleteInput.remove();
this.palette.holder.remove();
this.palette = null;
}
});

// create instance 1
var instance1 = new PaletteGenerator('qPal_L1', tdinput);

// create instance 2
var instance2 = new PaletteGenerator('qPal_L2', tdinput);

// create instance 3
var instance3 = new PaletteGenerator('qPal_L3', tdinput);



// delete instance 2 for example
instance2.destroy();

// delete instance 3
instance3.destroy();



Hope this helps.
Wout

On Dec 7, 11:25 pm, Kostas Tsimirikas <kostas...@gmail.com> wrote:
> Ok, but how can I get the "palette" object?Can I simply call
> document.getElementById()?Also, what is the "holder" object?
> Could you please provide me with a quick example?
>

> 2010/12/7 wonderingwout <boysabr...@googlemail.com>

[Kostas Tsimirikas]

Hi,

thanks for this useful answer...

I am almost at the end...one little help though...

I need these PaletteGenerator instances's variable name to be dynamic 

ie. var instance + i + "_" + line 

where i, line are some indeces that I need to distinguish them in the dom...

So, I haven't yet found a way to traverse these instances dynamically...

What I did, but does not work, is the following:

var PalleteHolder = new Array();

 function myPalette(holder, line, index) {

        this.Holder = holder;

        this.Line = line;

        this.Index = index;

    }

var holder = new Q.Palette("qPal_L" + whichLine + "_" + i, { colors: colArray,

               onChange: function OnColorChanged(hexValue, pickerInstance) {

               

                    //some lines of code here

                }

            });

            

            PalleteHolder[r++] = new myPalette(holder, whichLine, i);

So when I try to remove only the palette, I do :

if (PalleteHolder[i] != null) {

                if (PalleteHolder[i].Line == whichLine && PalleteHolder[i].Index == i)

                    PalleteHolder[i].Holder.holder.remove();

            }

However, I am ending up to have also the previous palette...

I understand not that this specific is not your's palette problem but how I can go through and get the specific line,i palette object to remove its palette...

Do you have any idea...?

Thanks again,

Kostas.

2010/12/8 wonderingwout <boysa...@googlemail.com>

[Kostas Tsimirikas]

.....I need to keep the input textbox but replace the popup palette itself....

2010/12/16 Kostas Tsimirikas <kost...@gmail.com>