problem in ajaxx request when i click on button then nothing happen - javascript

hello every one please help me to solve this problem
js file code
$(document).on('click', '.retweet-it', function(){
var comment = $('.retweetMsg').val();
$.post('http://localhost/tweet/core/ajax/retweet.php', {retweet:$tweet_id,user_id:$user_id,comment:comment}, function(){
$('.retweet-popup').hide();
$count++;
$counter.text($count);
$button.removeClass('retweet').addClass('retweeted');
});
});
retweet.php code
if(isset($_POST['showPopup']) && !empty($_POST['showPopup'])){
$tid = $_POST['showPopup'];
$get_id = $_POST['user_id'];
$tweet = $getFromU->getPopupTweet($tid);
?>
<div class="retweet-popup">
<div class="wrap5">
<div class="retweet-popup-body-wrap">
<div class="retweet-popup-heading">
<h3>Retweet this to followers?</h3>
<span><button class="close-retweet-popup"><i class="fa fa-times" aria-hidden="true"></i>
</button></span>
</div>
<div class="retweet-popup-input">
<div class="retweet-popup-input-inner">
<input class="retweetMsg" type="text" placeholder="Add a comment.."/>
</div>
</div>
<div class="retweet-popup-inner-body">
<div class="retweet-popup-inner-body-inner">
<div class="retweet-popup-comment-wrap">
<div class="retweet-popup-comment-head">
<img src="<?php echo BASE_URL.$tweet->Pimg;?>"/>
</div>
<div class="retweet-popup-comment-right-wrap">
<div class="retweet-popup-comment-headline">
<a><?php echo $tweet->screnname;?> </a><span>‏#<?php echo $tweet->uname;?> <?
php echo $tweet->postedon;?></span>
</div>
<div class="retweet-popup-comment-body">
<?php echo $tweet->status;?> | <?php echo $tweet->timg;?>
</div>
</div>
</div>
</div>
</div>
<div class="retweet-popup-footer">
<div class="retweet-popup-footer-right">
<button class="retweet-it" type="submit"><i class="fa fa-retweet" aria-hidden="true">
</i>Retweet</button>
</div>
</div>
</div>
</div>
</div><!-- Retweet PopUp ends-->
<?php
}
?>
this is my whole code when i click on retweet-it class button then my ajax code is not work plese help me to solve this problem its most important for me . Please help me to solve this problem

Related

how to send data-id to another page

im trying to send the id of the product selected in portfolio.php page to the page portfolio-detail.php and display the information from database according to the selected id
this is portfolio.php page
<ul class="portfolio-area da-thumbs">
<?php foreach ($product as $value): ?>
<li class="portfolio-item" data-id="id-0" data-type="web">
<div class="span3">
<div class="thumbnail">
<div class="image-wrapp">
<img src="<?php echo $target_dir.'/'.$value['product_pic']; ?>" alt="Portfolio name" title="" />
<article class="da-animate da-slideFromRight">
<a class="zoom" data-pretty="prettyPhoto" href="<?php echo $target_dir.'/'.$value['product_pic']; ?>">
<i class="icon-zoom-in icon-rounded icon-48 active"></i>
</a>
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
<i class="icon-link icon-rounded icon-48 active"></i>
</a>
<div class="hidden-tablet">
<p>
<?php echo $value['product_name']; ?>
</p>
</div>
</article>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
and this is portfolio-detail.php page
<section id="<?php echo $product['id']; ?>">
<div class="container">
<div class="row">
<div class="span12">
<article>
<div class="heading">
<h4><?php echo $product['product_name']; ?></h4>
</div>
<div class="clearfix">
</div>
<div class="row">
<div class="span8">
<!-- start flexslider -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="<?php echo $target_dir.'/'.$product['product_pic']; ?>" alt="" />
</li>
</ul>
</div>
<!-- end flexslider -->
<p>
<?php echo $product['product_desc']; ?>
</p>
</div>
<div class="span4">
<aside>
<div class="widget">
<div class="project-widget">
<h4 class="rheading">Portfolio detail<span></span></h4>
<ul class="project-detail">
<li><label>Project name :</label> <?php echo $product['product_name']; ?></li>
<li><label>Category :</label> <?php echo $product['product_code']; ?></li>
<li><label>Project date :</label> 12 Apr 2013</li>
<li><label>Project link :</label>www.somelink.com</li>
</ul>
</div>
</div>
</aside>
</div>
</div>
</article>
<!-- end article full post -->
</div>
</div>
</div>
</section>
how to show the details of a product according to the one selected ?
Here's a solution:
In portfolio.php
Change:
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
To:
<a href="portfolio-detail.php?data-id=<?php echo $value['id']; ?>">
Top of portfolio-detail.php add:
$id = $_GET['data-id'];
Do your DB query with $id
$product = {db stuff here};
Of course all proper validation will need to get added.

How to get data from a form using JS/JQuery and pass info to a controller using yii2?

Im trying the following:
I have a form where some columns are created dynamically depending on the length of a certain array as follows:
<div class="row box-table">
<div class="col-sm-12">
<div class="panel-heading bold panel-title">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> text-center">
<span><?= Yii::t('app', 'Referral Code') ?></span>
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFillers[0]['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<span><?= $key ?></span>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<span><?= Yii::t('app', 'Actions') ?></span>
</div>
<!-- Actions -->
</div>
<!--<div data-key="%{id}" class="hidden row-model">-->
<div data-key="%{id}" class="row-model">
<div class="table row-type edit-model">
<!--<form id="%{id}" method="post">-->
<form id="formulario" method="post">
<?php foreach ($hbwellMarginsDataFillers as $hbwellMarginsDataFiller): ?>
<div class="row">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> <?= $style ?> text-center">
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[referralCode]" data-original="%{referralCode}"><?= $hbwellMarginsDataFiller['referralCode'] ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-referralCode"><input type="text" id="hbwell-margins-referralCode" name="HbwellMargins[referralCode]" value="<?= $hbwellMarginsDataFiller['referralCode'] ?>" class="form-control"></div>
</span>
<!-- ORIGINAL -->
<?/*= $hbwellMarginsDataFiller['referralCode'] */?>
<!-- ORIGINAL -->
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFiller['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<?php if($value === null): ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}">null</span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span>null</span>-->
<!-- ORIGINAL -->
<?php else: ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}"><?= $value ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="<?= $value ?>" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span><?/*= $value */?></span>-->
<!-- ORIGINAL -->
<?php endif ?>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<!--<div class="col-xs-<?/*= $widthActionsColumn */?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button"><span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span></a>
<button data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept"><span class="glyphicon glyphicon-ok"></span></button>
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>-->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button">
<span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span>
</a>
<!--<button data-editable = "true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept" type="submit" onclick="return epaCuliao();">
<span class="glyphicon glyphicon-ok"></span>
</button>-->
<a id="submitChanges" type="submit" onclick="return epaCuliao();" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request accept">
<span class="glyphicon glyphicon-ok"></span>
</a>
<!--<button id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class=" btn btn-sm btn-request cancel">
<span class="glyphicon glyphicon-remove"></span>
</button>-->
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<!-- Actions -->
</div>
<?php endforeach ?>
</form>
</div>
</div>
</div>
</div>
When pencil icon is clicked form can be edited.
Well my problem is how to get all the information from that form and pass it to a function (actionEditHbwellMargins) in a controller (ClinicController).
I started using JS/JQuery copying code from other parts of my project, but I dont know how to get a solution in this case:
$(document).ready(function () {
var editable_fields = {
'referralCode': 'HbwellMargins[referralCode]',
'payMethods': 'HbwellMargins[payMethods]',
};
document.getElementById('submitChanges').onclick = function() {
edit();
}
function edit() {
alert("Epa culiao");
var el = $(this);
var container = el.closest('.row-type.edit');
var form = container.find("form");
var id = form.attr('id');
var values = {};
var params = 'id='+encodeURI(id);
$.each(editable_fields, function(key,key2){
var input = container.find("[name=\""+key2+"\"]");
var val = input.val();
values[key2] = val;
//para generar la url
params += "&"+key+"="+encodeURI(val);
});
var thisapp = this;
axios.post('/clinic/edit-hbwell-margins?'+params)
.then(function (response) {
$.each(values,function(key,val){
container.find("span[data-id=\""+key+"\"]")
.text(val)
.attr('data-original', val);
container.find("[name=\""+key+"\"]").val(val);
});
container.removeClass('editable');
})
.catch(function (error) {
console.log(error);
edit_cancel();
});
}
}
'payMethods': 'HbwellMargins[payMethods]' will be an array with variable length.
Please would you be so kind to help me or giving me some hint to achieve a solution? I'm desperate to find out a solution.
Thank you!

Get multiple checkbox values in Yii

I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.

Using $_POST or $_GET with Modal, Refresh based on ID

Here is the html that generates an array of 6 objects called from the DB (this is working fine), and prints them to a bootstrap row.
<div class="row products">
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<div class="col-md-2 col-sm-6">
<div class="product">
<div class="image">
<img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive">
<div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
</div>
<div class="text">
<h3> <?= $product["manufacturer"]; ?></h3>
<p class="price">$<?= $product["rrp"]; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
Here is the Jquery to generate the modal
<script>
function quickModal(recid) {
alert(recid)// checked it was receiving ID
// setting an id object as recid from db
var data = {"id" : recid};
jQuery.ajax({
url : '/MagV4(Final)/includes/quickModal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#product-quick-view-modal').modal('toggle');
},
error: function(){
alert("something wrong");
}
});
}
</script>
Here is the modal code, Now I know the ID is being passed (alert from Modal) but the modal doesn't generate new content after the first modal is loaded, (there are 6 different mag wheels) so if for example I load the modal for the first mag with id 1, the second mag which is id 7 also creates a modal for id 1.
Using $_POST['id'] doesn't work in the modal for some reason.
<?php
require_once '../core/dbcon.php';
if(isset($_GET['id'])) {
$id = $_GET['id'];
$id = (int)$id;
}
echo $id;
$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
$sql = ""
?>
<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<div class="row quick-view product-main">
<div class="col-sm-6">
<div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>
<!-- Ribbons
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">SALE</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon
<div class="ribbon ribbon-quick-view new">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon-->
<div class="row thumbs">
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
</div>
</div>
<div class="col-sm-6">
<h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
<p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
<div class="box">
<form action="add_cart.php" method="post">
<p class="price"><?= $product['rrp']; ?></p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="modal_size">Choose your size</label>
<select id="modal_size" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
<p>Current Stock: 3</p>
<div class="form-group">
<label for="modal_quantity">Quantity</label>
<input type="number" value="1" id="modal_quantity" class="form-control">
</div>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add to cart</button>
<button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
</p>
</form>
</div>
<!-- /.box-->
<div class="quick-view-social">
<h4>Show it to your friends</h4>
<p><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i><i class="fa fa-twitter"></i><i class="fa fa-envelope"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>
added in the new script but now the modals after the first just flash and then disappear with the same information.
<script>
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#quick-view-button').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#product-quick-view-modal').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});​
</script>
After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.
Meanwhile, this jQuery will patch up the problem*:
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#myModalLabel').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#utility_body').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});​
Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*
So, in your case, you'd also edit the calling button from <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> to Quick view. FWIW, I favor this "link invokes modal" approach (vs "button invokes modal") because this also allows the user to right-click the link and open the modal's contents in a new browser tab, should they so-choose. So think through the implications of that UX.
*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.

jQuery .next().slideToggle() not working

I have am creating my own comments system from scratch. The comments themselves are dynamically generated from those in the database and for each comment I am appending a reply textarea and button for the user to post a reply to someone's comment.
The problem is that when I click the reply link it opens a reply box for each comment not just for the comment the user wishes to reply to.
The HTML:
<a class="comment-reply">Reply</a>
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- reply input textarea -->
<div class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
</form>
</div>
<?php } ?>
</div>
And the jQuery:
<script>
$(document).ready(function(e) {
//hide reply box on page load
$('.reply-box').hide();
//show each individual reply box on click
$('.comment-reply').click(function() {
//$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
$(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
});
});
</script>
What am I doing wrong?
edit
Ok this is the full HTML:
<!--POSTED COMMENT-->
<div id="comment-<?php echo $comment_id; ?>" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;"><?php echo $c_member_username; ?><small> <?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
<?php if($signed_in && $username == $c_member_username) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
<?php } else if($signed_in) { ?>
<small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
<?php } else { ?>
<small class="floatL">Sign in to reply to this comment</small>
<?php } ?>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<?php if($signed_in) { ?>
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
<?php } ?>
</div>
<!--END REPLY BOX-->
don't mind the styling, I am still prototyping
edit - added rendered page
<!--POSTED COMMENT-->
<div id="comment-139" class="media">
<div class="pull-left">
<img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt="">
<div style="font-size:1.2em">
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-up"></span>
</a>
<a style="color: #888888;" href="#">
<span class="glyphicon glyphicon-thumbs-down"></span>
</a>
</div>
</div>
<div class="media-body">
<h5 style="margin: 0 0 5px 0;">nicklaw<small> 9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
<p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
<small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
<small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
</div>
</div>
<!--END POSTED COMMENT-->
<!--REPLY BOX -->
<div class="reply-box clearfix">
<!-- comment input textarea -->
<div id="comment-box" class="container">
<form id="reply-form">
<textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
<p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
<p style="color:red; padding-left: 140px;" id="error"></p>
</form>
</div>
</div>
<!--END REPLY BOX-->
Maybe the following code will help, I am using the parentElement of the current element and then get the textarea that is in the same group. When attaching the click handler I use a div with class comments-container and attach on click only for anchors (second parameter in the .on function).
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="comments-container">
<div class="comment">
Comment1
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment2
comment<br>
<textarea></textarea>
</div>
<div class="comment">
Comment3
comment<br>
<textarea></textarea>
</div>
</div>
<script>
$("textarea").hide();
$(".comments-container").on("click","a",function(e){
e.preventDefault();
$("textarea").hide();
$(this.parentElement.getElementsByTagName("textarea")[0])
.stop().slideToggle("fast");
});
</script>
</body>
</html>
The problem is that the .reply-box is not at the same level in the DOM as the .comment-reply link that is clicked (i.e. not a sibling). If you see the documentation for .click you will see that it only searches the siblings.
I think you want the .parents(".media").next(".reply-box")

Categories