Smalltalk › Frameworks & Tools › Iliad

Referencing the selected text in a textarea

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

5 messages Options

Bernat Romagosa

Referencing the selected text in a textarea

Hi again list,

I have a textarea and a button, and I need the following to happen, in this order, on pressing the button:

Store the selected text in the textarea into a variable
Store the cursor position into another variable
Perform some actions using the variable holding the selected text
Re-render the widget, ajax-style

I know how to do all of those, but not together. I've tried mixing onBlur:, onClick: and action: methods, plus using some hidden inputs where I store the selected text and the cursor position, but then the action doesn't get executed. If I submit the form from within onClick:, then the whole page is re-rendered and the ajax feeling is lost...

Any ideas?

Thanks!

Bernat Romagosa.

Nicolas Petton

Re: Referencing the selected text in a textarea

Hi,

Le vendredi 25 février 2011 à 17:11 +0100, AxiNat a écrit :

> Hi again list,
>
>
> I have a textarea and a button, and I need the following to happen, in
> this order, on pressing the button:
> 1. Store the selected text in the textarea into a variable
> 2. Store the cursor position into another variable
> 3. Perform some actions using the variable holding the selected
> text
> 4. Re-render the widget, ajax-style
> I know how to do all of those, but not together. I've tried mixing
> onBlur:, onClick: and action: methods, plus using some hidden inputs
> where I store the selected text and the cursor position, but then the
> action doesn't get executed. If I submit the form from within
> onClick:, then the whole page is re-rendered and the ajax feeling is
> lost...

That's strange. Submitting the form on click should send an AJAX
request. Can you paste some code that would help us understand?

Cheers,
Nico

Bernat Romagosa

Re: Referencing the selected text in a textarea

Hi Nicolas,

I've decided to let this go for the moment, as it's not essential for my application. I'll attack it again in a couple of weeks when I'm more versed in the way Iliad works, and ask for help if I'm not successful :)

Thanks a lot!

2011/2/28 Nicolas Petton <[hidden email]>

Hi,

Le vendredi 25 février 2011 à 17:11 +0100, AxiNat a écrit :

> Hi again list,
>
>
> I have a textarea and a button, and I need the following to happen, in
> this order, on pressing the button:

> 1. Store the selected text in the textarea into a variable
> 2. Store the cursor position into another variable
> 3. Perform some actions using the variable holding the selected
> text
> 4. Re-render the widget, ajax-style

> I know how to do all of those, but not together. I've tried mixing
> onBlur:, onClick: and action: methods, plus using some hidden inputs
> where I store the selected text and the cursor position, but then the
> action doesn't get executed. If I submit the form from within
> onClick:, then the whole page is re-rendered and the ajax feeling is
> lost...

That's strange. Submitting the form on click should send an AJAX
request. Can you paste some code that would help us understand?

Cheers,
Nico

Bernat Romagosa

Re: Referencing the selected text in a textarea

Hi again,

I've been trying to work out this problem, and it doesn't seem easy to fix at all. Let me expose it, and excuse me in advance cos this is going to be a little bit of a long email:

I have two text areas, one for editing (a la workspace), one for showing notifications (a la transcript). Then I have two buttons, one for showing notifications (a la Transcript show: aNotification), one for doing stuff with the selected text in the editing box and printing the result in the same editing box (a la print it).

To get this to work I need to get the selected text and the position of the selection, which I accomplish by using a little JS snippet and two hidden inputs:

'function selectedText(input) {

var startPos = input.selectionStart;

var endPos = input.selectionEnd;

var doc = document.selection;

if (doc && doc.createRange().text.length != 0) {

document.getElementById(''hiddenText'').value = (doc.createRange().text);

} else if (!doc && input.value.substring(startPos,endPos).length != 0) {

document.getElementById(''hiddenText'').value = (input.value.substring(startPos,endPos));

}

document.getElementById(''hiddenSelectionPosition'').value = endPos;

When I call selectedText(theEditingTextAreaId), I get the hidden inputs filled with the values I need, and thus the variables holding the corresponding values. I confirmed that this is working by inspecting the instance of my widget and seeing how the instance variables were properly assigned the correct values.

The problem is that I can only get one of these two buttons to work at the same time, since only one of the buttons submits the form, when I click the other the value in the textarea is not read. I tried to fix it by getting both buttons to submit the form, but then I have to (I don't know why) click twice in the print-it-like button to get the correct answer.

I attach a very little demo to show what the problem is, and you can see it running at: http://seaside.citilab.eu:8888/demo (disregard the "seaside" part of the URL, that's just the name of our test server)

I hope you can help me with this... thank you very much! :)

Bernat Romagosa.

Demo.st (4K) Download Attachment

Nicolas Petton

Re: Referencing the selected text in a textarea

Le jeudi 03 mars 2011 à 14:20 +0100, AxiNat a écrit :
> The problem is that I can only get one of these two buttons to work at
> the same time, since only one of the buttons submits the form, when I
> click the other the value in the textarea is not read. I tried to fix
> it by getting both buttons to submit the form, but then I have to (I
> don't know why) click twice in the print-it-like button to get the
> correct answer.

Hi,

I tried your demo.

First, did you know that you can answer widgets instead of view blocks?
In you #index method, you can simply do:

index
^self demoWidget
Also, you can use #beSubmit on your button to make them both submit the
form.

myButtonBar
^ [:h |
h button text: 'Show a notification';
action: [notificationAreaContents := 'The contents in your box
are: ', textAreaContents. self markDirty];
beSubmit.
...

Another problem is the order of your form elements. Actions will be
evaluated in the exact same order. Here you build your hidden elements
at the end. To make them work, their actions must be evaluated *before*
other actions.

So, the last fix would be:

DemoWidget >> contents
contents
^[:h |
h form id: 'aForm';
script: self script;
build: self myTextArea;
build: self myHiddenInputs;
build: self myButtonBar;
build: self myNotificationArea]

HTH,
Nico