I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!
Related
Hi i have modal popup have hidden input with id value from database.
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
I have javascript to call the hidden value below
$(document).ready(function(){
$(".btn").click(function(){
$("#no_id").val($(this).data('id'));
});
the problem is when the form submited, the hidden value not submited.
Any idea to solve this problems
thanks
.btn to call the modal is below, with data-id as value to hidden input
<a target="_blank" data-id="<? echo $no_id;?>" data-toggle="modal" href="#update_bayar" class="btn mini red"><i class="icon-exclamation-sign"></i></a>
Modal form is here
<form id="myForm" action="action.php" method="get" enctype="multipart/form-data">
<div class="modal fade" id="update_bayar" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Status Bayar</h4>
</div>
<div class="modal-body">
<div class="span12"><b>Pembayaran Langsung Ke Kas Negara</b>
<label class="control-label">Nomor NTPN</label>
<input name="no_ntpn" value="test value" type="text" placeholder="" class="m-wrap span12">
<label class="control-label">Tanggal NTPN</label>
<div class="controls">
<input name="tgl_ntpn" type="text" placeholder="" class="m-wrap span12 date-picker" value="test value">
</div><br>
<b>Pembayaran Ke Rekening Bendahara</b>
<label class="control-label">Nomor Rekening</label>
<div class="controls">
<input name="tanggal_bayar" value="test value" type="text" placeholder="" class="m-wrap span12">
</div>
<label class="control-label">Lampirkan Bukti Transfer/Rekening Koran</label>
<input type="file" name="file" />
</div>
<div id="output"></div>
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">Loading...</div ></div>
</div>
<div class="modal-footer">
<input id="no_id" name="no_id" type="hidden" value="<? echo $no_id;?>">
<button id="submit" name="submit_status_bayar" type="submit" class="btn green"><i class="icon-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</form>
got the answer after remove .btn submit class
I can not understand one thing, you have already given value to that hidden field using PHP code, and then on btn click, you are picking btn's data-id value and assigning it to the hidden field.
I think if the .btn is not having any value with its data-id attribute, then it will set hidden fields with blank.
That is the reason I can see, you are not getting its value in your PHP code.
I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.
You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
I have a modal which is supposed to pop up when I click the button. However, when I click the button; nothing happens:
Heres what I did:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class = "row text-center">
<input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">
<input class="btn btn-danger" id="reset-button" type="reset" value="Reset">
<div class="well well-large">
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add transaction</h3>
</div>
<div class="modal-body">
<form class="transaction" name="transaction">
<input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>
<label class="label" for="trans_payment_mode">Payment mode</label><br>
<select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
<option value="">Select</option>
<option value="cash">Cash</option>
</select><br>
<label class="label" for="trans_amt">Transaction amount</label><br>
<input type="text" name="trans_amt" class="input-xlarge"><br>
<label class="label" for="trans_details">Transaction details</label><br>
<textarea name="trans_details" class="input-xlarge"></textarea>
<input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
<input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit_trans">
Cancel
</div>
</div>
</div>
<div id="thanks">
<p><a data-toggle="modal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
</div>
</div>
</body>
I have the above modal containing add-transaction which will populate a modal. Please help.
CSS needs a bit work but you are missing a data_target class in your button. Add a div with an id and another div with the class modal-dialog.
Also change the line
<div id="form-content" class="modal hide fade in" style="display: none;">
to
<div id="modal-content">
Other code changes
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
...
<p><a data-toggle="modal" data-target="#myModal" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
You can see it in the fiddle below
https://jsfiddle.net/4peLpye5/1/
EDIT - There is no php in the JSFiddle
It's a combination of a few issues.
No need for the hide class on the modal
No need for the display:none style on the modal
Missing id of add-transaction on the modal
I wrote this
<form method="post" id="create">
<div class="panel panel-success">
<div class="panel-heading">
<p>Create a new Wall Post</p>
</div>
<div class="panel-body">
<textarea cols="80" id="text" name="text" rows="10" style="visibility: hidden; display: none;"></textarea>
<script>
$('#text').wysibb(options);
</script>
<div class="pull-right">
<br>
<button onclick="$('#text').val($('#text').htmlcode())" type="submit" name="create" class="btn btn-success">Post</button>
<button type="reset" name="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
</form>
<?php
if (isset($_REQUEST['create'])) {
$p = WallPostManager::createWallPost($user, UserManager::isLoggedIn(), $_POST['text']);
if ($p != false) {
Utils::alert("News Post created", false);
header('refresh: 1');
}
}
But for some reason, im getting the 'text' in bbcode when im specifying it to be on .htmlcode(), what could be happening? am i doing something wrong?
$('#text').htmlcode()
Doesn't work since that is not a jQuery function, as #nthall mentioned. Try changing it to
$('#text').html()
I have this http://jsfiddle.net/NgEpS/1/ basically, I am getting the value of a textarea on each form and the appending the value to a child div, everything works.perfect after the first submit, but if you submit more than once the same form, my script is cloning all the previous replies, wondering if there is any way to avoid this.
HTML:
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 1..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply">1</div>
</div>
</form>
</div>
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 2..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply hidden"></div>
</div>
</form>
</div>
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 3..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply">1</div>
<div class="post-dropdown-reply">2</div>
<div class="post-dropdown-reply">3</div>
<div class="post-dropdown-reply">4</div>
</div>
</form>
</div>
p
JavaScript:
function gettingReplyVal() {
$('.reply-form').submit(function(e) {
var post_clone = $('.post-dropdown-content').first().clone();
var textAreaValue = $(this).find('textarea').val();
$(post_clone).insertBefore($(this).f ind(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);
e.preventDefault();
});
}
gettingReplyVal();
On this line
$(post_clone).insertBefore($(this).find(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);
$(this).find(".post-dropdown-content") returns all the post-dropdown-content elements inside this. The first time you hit send, there is only one, so it behaves normally, but the second time it finds two, the third time it finds three, etc...
use $(this).find(".post-dropdown-content").first() instead
$(post_clone).insertBefore($(this).find(".post-dropdown-content").first()).find('.post-dropdown-reply').html(textAreaValue);