?
Solved

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

Posted on 2011-04-19
30
Medium Priority
?
637 Views
Last Modified: 2012-05-11
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
Comment
  • 15
  • 11
  • 4
30 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35427855
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35429882
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35430203
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35431440
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35431499
Please try this:

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

perhaps without the modal
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35431751
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35435885
will you plan to open multiple dialog or just use one edit dialog or div?
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35435907
i will open one div for all the links it will handle all the edits of the separate textarea
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35435945
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35435953
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35435970
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35435989
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35435994
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35435999
well apparently i hide something as this is an requirement
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35436098
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436105
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436150
2

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

Expert Comment

by:HainKurt
ID: 35436186
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35436190
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436202
oops, just comment out this line

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

Expert Comment

by:HainKurt
ID: 35436231
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436241
and give me the points :) then read the book and complete your project :)
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35436253
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
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 35436299
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35436316
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35436354
Thanks, u are counting the words, i am doing with characters, wel that i can change thanks for the guidence!

Cheers
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 35436358
awesome
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436361
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35436380
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35439707
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question