I am trying to write a HTML code to be able to reply to comments. The issue I'm having in the code below is when I click the reply button it appends the reply text area to both comment 1 and comment 2. What can I do to make it only append the text area to only the relevant comment.
<script>
function reply2comment() {
$("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
}
</script>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div>
<div class="userName_mP">Tim</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 1</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div>
<div class="userName_mP">David</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 2</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
You have 2 divs with the same id "reply". This makes your $("div#reply").html(... command append it to the both of them.
IDs should be unique. You shouldn't have more than 1 element with the same ID attribute.
If a jQuery selector matches more than one element, it will call the html( methon on both of them.
Here is what something you could do.
$(document).ready(function() {
$(".reply").bind("click",
function reply2comment(event) {
var $replyContainer = $(event.currentTarget).siblings("#reply");
$replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' +
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/yy.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">Tim</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 1</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/xx.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">David</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 2</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
I modified you user_reviews markup to group the reply div and the reviews together.
And changed the event handlers from markup to script, just to make it easier to bind events.
Related
I'm making a feedback popup. I want to make sure that the text in the input can come to my email when users press the submit button. I tried it in the way below, but the text in the input doesn't come to me by e-mail.
<div class="popup" style="z-index: 10">
<div class="contentBox">
<!--close_btn=======-->
<button id="close">X</button>
<div class="feedbackBox" style="padding-top: 3px">
<strong>Give feedback</strong>
<p style="margin: 10.96px">
Таны үлдээсэн сэтгэгдэл бидэнд маш их тус болох болно.
</p>
</div>
<!--emojies========-->
<div class="emojiBox">
<div class="emoji" style="margin-left: 56.81px">
<img src="icons/face emoji/smiling-face-with-heart-eyes.png" alt="" />
<p>Best</p>
</div>
<div class="emoji">
<img src="icons/face emoji/happy-face-with-enlarged-eyes.png" alt="" />
<p>Good</p>
</div>
<div class="emoji">
<img src="icons/face emoji/expressionless-face.png" alt="" />
<p>Bad</p>
</div>
<div class="emoji">
<img src="icons/face emoji/face-with-steam-from-nose.png" alt="" />
<p>Terrible</p>
</div>
</div>
<!--feedback-write==-->
<div class="wrie_feedback">
<p>Үлдэхийг хүссэн санал бодол, сэтгэгдлээ доор үлдээнэ үү.</p>
<input type="text" maxlength="200" required />
</div>
<!--send-btn========-->
<button id="send_feedback">Явуулах</button>
</div>
</div>
I have an unusual case and can't find a solution for this.
I'm trying to get the length of an column "Kontrolle".
The yellow background is the leader and is always on the first position and is duplicated from an other column.
This is the html code:
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
// and so on....
</div>
</div>
if i check the length of this column i'm getting a wrong length.On the first photo there are 4 elements and i'm getting 3.
this is the jquery snippet:
var $abtLength = $('.abt-kontrolle .panel-name').length;
console.log($abtLength);
the length property is not counting the duplicate element.
if i check the childElementCount i get a correct length:
but when i console.log it i'm getting still wrong length.
var $childDepartmentNodes = $('.abt-kontrolle')[0].childElementCount;
console.log($childDepartmentNodes);
i'm getting also 3.
UPDATE 1
$("div[data-name='"+$name+"']")
.not(".duplicate")
.clone()
.prependTo(".abt-"+ $belongsToDepartment + ":first")
.attr("data-status", "leader")
.removeClass(function(index, element) {
return (element.match (/\bpanel-\S+/g) || []).join(' ');
})
.addClass("panel-name panel-" + $belongsToDepartment + " duplicate");
this is where i clone the leader from a column to another column
maybe your cloning/duplicating is not completely done at the moment when your log happens.
whats the count if you copy this
$('.abt-kontrolle .panel-name').length;
into dev console after everything is done?
Your code works, you can check attached snippet, but we need toi know how you duplicate the div maybe you get the size before duplacting the element
var len = $(".abt-kontrolle>.panel-name").length;
alert(len)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
</div>
I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010
The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>
Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>
Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
New to javascript, trying to create a simple program that scrolls to the div when navigation item is clicked. However, its not working, I can't figure out why.
Here is the snippet :
$(document).ready(function() {
alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
})
}
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
At first I thought the problem was with my jquery, however its working fine. The links to javascript is correct too. I've tried rechecking the animate function but I can't pin point the issue. Any ideas?
$("html body") has to be replaced by $("html,body") for the scroll to trigger.
You also had an error in your javascript, one more '})'at the end.
Now that's fine. Check your console for such errors, or use snippets, as in your question.
$(document).ready(function() {
// alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
var sectionID = e.currentTarget.id + "Section";
// alert('button id ' + sectionID+ $("#" + sectionID).offset().top);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="javascript:;">Delivery</a></li>
<li><a id="about" href="javascript:;">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
Try this one, for the scrolling.
$('#your_image_for_the_scroll').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
});
This image could appear after user does scroll down a bit:
$(window).scroll(function () {
if ($(this).scrollTop() >= 20) { // If page is scrolled more than 20px
$('#your_image_for_the_scroll').fadeIn(200);
} else {
$('#your_image_for_the_scroll').fadeOut(200);
}
});
Mostly it is because of the typo. There is an extra ) & } at the end of the function
I Have created a JSFIDDLE and it is working here
As pointed by OP It's working without javascript. We all should have been more clever about this, as anchors are common.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.