textInput with autoUpdate when mouse moved out ?

hi,
I am wondering if Seaside + Scriptaculous has the following feature ready.

html textInput value: callback:   should be updated without submitButton or similar mechansim.

The update must be triggered by mouse movement, I mean when mouse is moved out of the input form, it should be updated.

For example, there is a gadget (ToDoList) at http://www.labpixies.com/gadget_page.php?ID=33

You click on an item and when you move out, its updated (This has been incorporated into iGoogle as well and the contents are not only stored in browser but also externally)

I know we can achieve this using SUInplaceEditor. But, there again, we have Ok and Cancel to trigger.

Has something similar done in Scriptaculous or can it be done by tweaking controlsJs in Scriptaculous.


Hoping to find some help.

Rajeev

--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> html textInput value: callback:   should be updated without submitButton or
> similar mechansim.
>
> The update must be triggered by mouse movement, I mean when mouse is moved
> out of the input form, it should be updated.

Sure, instead of the #onClick: event of the button you assign the
update action to the #onMouseOut: event on any DOM element.

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hi Lukas,
I tried to do it by myself. I did the following changes as suggested by you

createForm: function() {
    this.form = document.createElement("form");
    this.form.id = this.options.formId;
    Element.addClassName(this.form, this.options.formClassName)
    this.mouseoutListener = this.form.submit();   // Added this Line

    this.form.onsubmit = this.onSubmit.bind(this);

    this.createEditField();
    if (this.options.textarea) {
      var br = document.createElement ("br");
      this.form.appendChild(br);
    }
...............
..............
..............
}

When I tried to execute it. I was rendered with inplaceEditor without OK Button and Cancel Link (Which I expected). When I edit anything and move the mouse out of the form. It is supposed to update. Till now, I have not been able to achieve it. When I hit Enter (Return) key on my board, it is updated.

I have a sortable(Scriptaculous) with each listItem being an InplaceEditor. Just in case, to avoid any problem due to coupling, I removed the sortList code and tried on a simple orderedList, yet no Progress for me.

Please help me out if the changes I have made are inappropriate. I also went through wiki at Scriptaculou for Inplace.., couldn't find anything of use to me.

If at all it is not possible for submission using onMouseOut event, how about having a mechanism to trigger the submit, when we click on anywhere else on Canvas or any button/link/form other the edit form we are working on.

Thanks again,
Rajeev





--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

>     this.mouseoutListener = this.form.submit();   // Added this Line

There are two problems here:

1. this.form.submit() assigns the result of evaluating the method
submit. I assume you would like to assign the function (without
brakets):

     this.mouseoutListener = this.form.submit;

2. The line above won't assign an event handler. For now you just
defined the alias this.mouseoutListener for this.form.submit. Check
out the Prototype document to see how to register for DOM events:

     http://www.prototypejs.org/api/event/observe

> I have a sortable(Scriptaculous) with each listItem being an InplaceEditor.
> Just in case, to avoid any problem due to coupling, I removed the sortList
> code and tried on a simple orderedList, yet no Progress for me.

Yes, this is usually a good strategy.

> Please help me out if the changes I have made are inappropriate. I also went
> through wiki at Scriptaculou for Inplace.., couldn't find anything of use to
> me.

In my first mail I was not talking about SUInPlaceEditor, but just
about using a plain textInput as it generated by WAInputTag.

> If at all it is not possible for submission using onMouseOut event, how
> about having a mechanism to trigger the submit, when we click on anywhere
> else on Canvas or any button/link/form other the edit form we are working
> on.

Sure, form submission is possible from any kind of event.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hi,
I tried to implement what you hinted at. I had edited just one line of controlsJs. I got rid of the extra set of brackets in

this.mouseoutListener = this.form.submit();

Event.observe is done as it was earlier done. I have cropped only that part for your reference.


this.onclickListener = this.enterEditMode.bindAsEventListener(this);
    this.mouseoverListener = this.enterHover.bindAsEventListener(this);
    //this.mouseoutListener = this.leaveHover.bindAsEventListener(this);Commented(not used)
    Event.observe (this.element, ''click'', this.onclickListener);
    Event.observe(this.element, ''mouseover'', this.mouseoverListener);
    Event.observe(this.element, ''mouseout'', this.mouseoutListener);
...................
....................
....................
 createForm: function() {
    this.form = document.createElement("form");
    this.form.id = this.options.formId;
    Element.addClassName(this.form, this.options.formClassName)
    this.mouseoutListener = this.form.submit;  // Added this Line

    this.form.onsubmit = this.onSubmit.bind(this);

    this.createEditField();
    if (this.options.textarea) {
      var br = document.createElement("br");
      this.form.appendChild (br);
    }
   
    if (this.options.textBeforeControls)
      this.form.appendChild(document.createTextNode(this.options.textBeforeControls));

    if (this.options.okButton) {
      var okButton = document.createElement("input");
      okButton.type = "submit";
      okButton.value = this.options.okText;
      okButton.className = ''editor_ok_button'';
      this.form.appendChild (okButton);
    }
   
    if (this.options.okLink) {
      var okLink = document.createElement("a");
      okLink.href = "#";
      okLink.appendChild(document.createTextNode(this.options.okText ));
      okLink.onclick = this.onSubmit.bind(this);
      okLink.className = ''editor_ok_link'';
      this.form.appendChild(okLink);
    }
   
    if (this.options.textBetweenControls &&
      (this.options.okLink || this.options.okButton) &&
      (this.options.cancelLink || this.options.cancelButton))
      this.form.appendChild(document.createTextNode(this.options.textBetweenControls ));
     
    if (this.options.cancelButton) {
      var cancelButton = document.createElement("input");
      cancelButton.type = "submit";
      cancelButton.value = this.options.cancelText ;
      cancelButton.onclick = this.onclickCancel.bind(this);
      cancelButton.className = ''editor_cancel_button'';
      this.form.appendChild(cancelButton);
    }

    if (this.options.cancelLink ) {
      var cancelLink = document.createElement("a");
      cancelLink.href = "#";
      cancelLink.appendChild(document.createTextNode(this.options.cancelText));
      cancelLink.onclick = this.onclickCancel.bind(this);
      cancelLink.className = ''editor_cancel editor_cancel_link'';     
      this.form.appendChild(cancelLink);
    }
   
    if (this.options.textAfterControls )
      this.form.appendChild(document.createTextNode(this.options.textAfterControls));
  },

*******************
*******************
*******************

Throughout controlsJs, I have made only two changes as indicated above. It is still not updating when I move out of the form. Am I going wrong anywhere.

In your first mail, you had mentioned to achieve this using normal WAInput tag. How can this be achieved ?

Say I have the following form

html form:[html textinput value: self model title;
callback:[:value|self model title: value]]

Where do I add onMouseOut method in the above form. Should my form have an id so that onMouseOut, the form is submitted ??

Thanks again in advance,
Rajeev







--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside