• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 652
  • Last Modified:

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
0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 15
  • 11
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
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
0
 
HainKurtSr. System AnalystCommented:
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...
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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!
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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>
0
 
Michel PlungjanIT ExpertCommented:
Please try this:

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

perhaps without the modal
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
HainKurtSr. System AnalystCommented:
will you plan to open multiple dialog or just use one edit dialog or div?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i will open one div for all the links it will handle all the edits of the separate textarea
0
 
HainKurtSr. System AnalystCommented:
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

0
 
HainKurtSr. System AnalystCommented:
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...
0
 
HainKurtSr. System AnalystCommented:
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 :)
0
 
HainKurtSr. System AnalystCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
well apparently i hide something as this is an requirement
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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

:)
0
 
HainKurtSr. System AnalystCommented:
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!
0
 
HainKurtSr. System AnalystCommented:
2

function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val($("#ta"+n).val());
  ix = n;
}
0
 
HainKurtSr. System AnalystCommented:
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

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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.

0
 
HainKurtSr. System AnalystCommented:
oops, just comment out this line

  //$("#divEdit").remove().insertAfter(a);
0
 
HainKurtSr. System AnalystCommented:
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;">
...
0
 
HainKurtSr. System AnalystCommented:
and give me the points :) then read the book and complete your project :)
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
HainKurtSr. System AnalystCommented:
and word count added to dialog

you may need to clear it on open dialog function though...
<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();
});

function wordCount(v){
	return v.split(/[\s\.\?]+/).length;
}
</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="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit onKeyPress="$('#total_words').html(wordCount(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

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Thanks, u are counting the words, i am doing with characters, wel that i can change thanks for the guidence!

Cheers
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
awesome
0
 
HainKurtSr. System AnalystCommented:
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

0
 
HainKurtSr. System AnalystCommented:
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

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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]
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 15
  • 11
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now