Start Free Trial

asked on

textarea inside a Popup and after entering value in textarea inside popup should save in main textarea

Opening a textarea for each link and Putting its value in another Textarea!

I am almost done with my work, I have a Code, where i click a link, it opens a POPUP just underneath it with the textarea inside it, i enter the value in the textarea nd on the close of the textarea which is in popup i want to make the values enter into the main textarea.

Please note the the main textareas name is dynamic i mean it is nested and name is dynamic,

Trying like this!

Created a Span used its rel attribute and had named it as contact-txtbox, but the id of the each textarea which is in popup is exacly the same as the mainb textarea, but only the names differ i mean liik ethis

main textarea ID - value_#start#

Nested textarea ID - valuenested_#start#

My try is quite Complex This:

1. Textarea Box above with unique name suppose values_#dynamic#
2. Now here is the link Edit, which has a unique id names as edit_#dynamic# and it is declared inside a Span tag, a Div tag can also be used, but just for sake i used span.
3. Now clicking on the Edit will open a POPUP just underneath the link and values it will start entring, it will 3 buttons, Save will close the popup, value get tranferred to the textarea main one and the popup will close.
4. Other buttons are rest & close which will do a cancel and resting,
5. The structure of the dynamic can be like this

Textarea
Level 1 Textarea
Level2 Textarea
Level3 textarea

and under each textarea, there will be a link, which will open its own popup and fll values inside which will be transferred to the main textarea on its closure, it is dynamic purely

Michel Plungjan

Could you post your code, please?

And please tell us if by "popup" you mean window.open or simply showing a dialog like jquery ui dialog

the question you posted is really vague... do you have any code or test link? which part is working/failing? Do you want us to write all the code :) we are here to help...

ASKER

I have a Textarea which is linked with each textbox such as:

<cfloop from="1" to="5" index="dynamicvalue">
<input type="text" name="input_#dynamicvalue#" id="input_#dynamicvalue#">
Now a Textarea linked to this
<textarea name="mytextarea_#dynamicvalue#" id="mytextarea_#dynamicvalue#"><br>
<span class="commentBox" id="capture_#dynamicvalue#">Edit</span>

<div class="comment-box">
<textarea name="comment-box" name="input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue#" id="input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue#">
<input type="button" onClick="Close" value="Close>
</div>
</cfloop>

In the above as you see i just wanted to click on the Edit which will be made as a link and onClicking of that link, a POPUP like DIV will open just underneath it and the div will have the textaea inside that like the above

I have named the textresa which will be inside the comment box div as input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue# to help you understand experts that value i should enter in the textarea onclose should get tranfer into the main textarea for which the popup like DIV has ben opened!

I had coded a bit and it is quite messy like

var hidden = this.id.replace("input_here_then_tranfer_to_main_textarea_while_closing_","mytextarea_");
capture the hidden and put # against the replace code
var newhidden ="#" + hidden;
var cvalue = ($newhidden).val();

so this is not a comple code but a start which might help guiding me experts!

ASKER

i am using common textarea inside the div class="comment-box" with name="box"

as<textarea name="anything" id="box"></textarea>

and using the span ID for fetching the values in every hidden field and tranfer to textarea:

<span class="comment" id="input_here_then_tranfer_to_main_textarea_while_closing_##" rel="see-com">Edit</span>

Michel Plungjan

Please try this:

http://jqueryui.com/demos/dialog/#modal-form

perhaps without the modal

ASKER

This is somewhat similar, but

my implementation is like this!

Textarea
edit link - Click on this a Div will open underneath it and the div will have a textarea inside it, its name can be any which can be used later

now i entered some value in the div textarea and then clicked close, the div got closed and value gets tranferred into the textareaabove the edit link!

The same way it should work for every textarea,

the name and id of each main textarea is different from the other

will you plan to open multiple dialog or just use one edit dialog or div?

ASKER

i will open one div for all the links it will handle all the edits of the separate textarea

take a look at this sample
is it something close to what you want?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
var ix
function edit(n, a){
  //$("#divEdit").move();
  $("#divEdit").show();
  $("#taEdit").val("");
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

just one piece is missing, which is to move the dialog under edit link!
I passed the link to edit function as parameter and we need to use that parameter to move the dialog under that...

i just dont understand why you use textarea in another dialog to replace the text in a textarea :) does not make sense... user can change the text directly without clicking edit... do i miss something or you hide something :)

ha ha, this was easy to move the div under a :)

$("#divEdit").remove().insertAfter(a);

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
var ix
function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val("");
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

Michel Plungjan

HainKurt: do yourself a favour and change

<a href="#" onClick="edit(1,this)">Edit</a>

to

<a href="#" onClick="return edit(1,this)">Edit</a>

and add
return false
to the end of function edit

ASKER

well apparently i hide something as this is an requirement

ASKER

well we are quite near!

1. It should open as a separate div because it is currently making the design distorted.
2. Also adding value startight in textarea [main] should get copied to the child textarea if there is any for the related parent.
3. can we apply count for texts entered and measure it if already entered.

I know i might be asking more than expected but this is a start for a very nice feature i have not seen on google and i really want to learn jquery.

Today i have purchased "Jquery in Action 2nd Book" for Study!

Thanks a Lot for giving me a good start

:)

mplungjan, I did not use this format

<a href="javascript:edit()">Edit</a>

but used this format

<a href="#" onClick="edit()">Edit</a>

I could not get it :) page does not go anywhere onClick!

2

function edit(n, a){
$("#divEdit").remove().insertAfter(a);
$("#divEdit").show();
$("#taEdit").val($("#ta"+n).val());
ix = n;
}

I could not get 3
here is 1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val($("#ta"+n).val());
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

ASKER

wow! :)

awesome Dude, appreciating for the stuff you just created, i was banging my head for the last couple of hours on this! really i started doubt on me regarding jquery + javascript!

So powerfiul.

oops, just comment out this line

//$("#divEdit").remove().insertAfter(a);

and add background-color to div to remove transparency (could not get why it is transparent :)

...
<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
...

and give me the points :) then read the book and complete your project :)

ASKER

well for the 3 we can use the simple javascript function like this:!

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}

and for the div which is opening in the middle of the page

we can use the onkeypress event as

onKeyDown="textCounter(this.form.message,this.form.remLen,125);" onKeyUp="textCounter(this.form.message,this.form.remLen,125);"

<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>

and measure the comment.length of each textarea nd then deduct it from the remainng if it has value otherwise it shows enter 125 characters

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

HainKurt - please do it anyway. there are browsers that invisibly unloads some of the page.
Always return false onclick of a link that does not leave the page

ASKER

Thanks, u are counting the words, i am doing with characters, wel that i can change thanks for the guidence!

Cheers

ASKER

awesome

per request :) return false is added to edit function, word count bug is fixed on opening bla bla bla...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n){
  $("#divEdit").show();
  var txt = $("#ta"+n).val();
  $("#taEdit").val(txt);
  ix = n;
  setWordCount(txt);
  return false;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});

function wordCount(v){
	return v.split(/[\s\.\?]+/).length;
}

function setWordCount(v){
	$('#total_words').html(wordCount(v));
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="return edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="return edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="return edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="return edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="return edit(5,this)">Edit</a><hr>

<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit onKeyPress="setWordCount(this.value)"></textarea><br>
Total words: <span id="total_words"></span><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

and with char count

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n){
  $("#divEdit").show();
  var txt = $("#ta"+n).val();
  $("#taEdit").val(txt);
  ix = n;
  setCount(txt);
  return false;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});

function wordCount(v){
	return v.split(/[\s\.\?]+/).length;
}

function charCount(v){
	return v.length;
}

function setCount(v){
	//$('#total_words').html(wordCount(v));
	$('#total_words').html(charCount(v));
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="return edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="return edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="return edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="return edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="return edit(5,this)">Edit</a><hr>

<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit onKeyPress="setCount(this.value)"></textarea><br>
Total words: <span id="total_words"></span><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

ASKER

ok, this function

$.fn.center = function () {
this.css("position","absolute");
this.css("top", ($(window).height() - this.height()) /16+$(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) /16+$(window).scrollLeft() + "px");
alert(this);
return this;
};

how to make it work to appear the textbox just under each link [edit]