We Keep Coding

onclick with same class

I have Div1 and Div2 inside this divs i have multiple inputs.
The goal is when i click on div 1 btn edit it shows the inputs inside div 1 and the same to div2
My html
My 1º Div
<div class="col-lg-6 col-md-6 xxx">
<div class="row form-group ">
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 1</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My 2º div
<div class="row form-group " >
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 2</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My jquery code:
$("body").on("click", ".xxx",function(){
$(this).parent().find(".edit_xxx").toggle();
});
The final goal is when click inside .xxx it opens the input id click again closes the input from DIV1 the same if click on div2
Thanks for the help, i realy suck with jquery.

The answer!
$("body").on("click", "#edit",function(){
$(this).parents(".xxx").children("#edit_xxx").toggle();
});

Insert Before Last Child jQuery

I have a page with posts, comments and replies. Posts can have many comments, and each comment can have many replies - similar to the way Facebook works.
I am adding these dynamically via an ajax call to each post.
At the end of each list of replies there is a reply form. The problem I am having is when a new reply is added to a comment, I am unable to insert the reply before the reply form - which is the last child of the li.
Here is my js:
var $div = $('.js-post-show');
function _addComment(comment) {
var tplText = $('#js-comment-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find('.js-comment-list')
.append($.parseHTML(html));
}
function _addReply(reply, commentId) {
var tplText = $('#js-reply-template').html();
var tpl = _.template(tplText);
var html = tpl(reply);
$div.find("li[data-comment-id='" + commentId + "']")
.append($.parseHTML(html));
}
function _loadReplyForm(comment) {
var tplText = $('#js-reply-form-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find("li[data-comment-id='" + comment.id + "']")
.append($.parseHTML(html));
}
And here is my HTML:
<li class="list-group-item py-4 comment-list" data-comment-id="871">
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">John Doe</span>
</div>
<p>
Comment here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-871" data-toggle="collapse" aria-expanded="true" aria-controls="create-reply-871">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-comment" data-url="/api/comments/871/toggle-comment-like" data-is-liked="1">
<span class="fas fa-thumbs-up"></span>
<span class="js-like-comment-count">1</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Jane Doe</span>
</div>
<p>
Reply here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-24" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-24">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/24/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">RS</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Rob Smith</span>
</div>
<p>
Another reply
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-25" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-25">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/25/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media js-create-reply collapse show" id="create-reply-871" style="">
<div class="media-body">
<form method="post" class="card-body js-create-reply-form needs-validation" novalidate="novalidate" data-url="/api/replies/871">
<div class="form-group"><textarea id="reply" name="reply" required="required" class="from-control-lg js-create-reply-textarea form-control" rows="4" placeholder="Type your reply here"></textarea></div>
<div class="d-flex align-items-center">
<button type="submit" class="btn btn-success mr-3 js-create-reply-button">Submit your reply</button>
Cancel
</div>
</form>
</div>
</div>
</li>
I have tried insertBefore() but without success, any advice would be greatly appreciated.

You can use insertAfter() jquery function : http://api.jquery.com/insertafter/
also you target the last reply using :last in your selector like
$(replyHtml).insertAfter("#js-reply-template li:last");

More boostrap modal form, submit not working properly

I have two problems!
1st: On my page there are more bootstrap form (loginFrom, signUpForm,...), if I click on the submit button the loginForm submitted, but the signUpForm NOT, and the submit() function for signUpForm not called at all.
The structure is same, so I dont know why? What could be the problem?
Most of the content is in PHP file, because I include them into each other. (multi-page website)
modal.php
<form id="loginModal" method="post" name="loginModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div id="loginModalDiv" class="modal-content">
<!--Header-->
<div class="modal-header myModalHeader">
<h4 class="title"><i class="fa fa-user-lg"></i> Login:</h4>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="logF_email" name="email" class="form-control">
<label for="logF_email">E-mail address:</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="logF_passw" name="password" class="form-control">
<label for="logF_passw ">Password:</label>
</div>
<div class="text-center mt-2">
<div id="errorLogin"></div>
<button id="btnLogin" type="submit" name="submitLogin" class="btn btn-default myModalBtn">Login <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div id="footerLogin" class="modal-footer">
<div class="options text-center text-md-center mt-1">
<p>You don't have an account? <a class="loginToSignUp myGreenClass" data-toggle="modal" href="#"> Sign up!</a></p>
<p>Forget <a class="forgetPassword myGreenClass" data-toggle="modal" href="#"> password?</a></p>
</div>
<button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</form>
<form id="signUpModal" method="post" name="signUpModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div id="signUpModalDiv" class="modal-content">
<!--Header-->
<div class="modal-header myModalHeader">
<h4 class="title"><i class="fa fa-user-plus"></i> Sign up:</h4>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="regF_email" name="email" class="form-control">
<label for="regF_email">E-mail address:</label>
</div>
<div class="row mx-auto" style="width: 50%;">
<span id="passLED1" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">a-z</span>
<span id="passLED2" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">A-Z</span>
<span id="passLED3" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">0-9</span>
<span id="passLED4" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">[0]</span>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="regF_passw" name="passwordReg" class="form-control">
<label for="regF_passw">Password:</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="regF_passwConf" name="passwordRegConfirmation" class="form-control">
<label for="regF_passwConf">Confirmation password:</label>
</div>
<div class="text-center mt-2">
<div id="errorSignUp"></div>
<button id="btnSignUp" type="submit" name="submitSignUp" class="btn btn-default myModalBtn">Sign up!<i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div id="footerSignUp" class="modal-footer">
<div class="options text-center text-md-center mt-1">
<p>Do you have an account? <a class="signUpToLogin myGreenClass"href="#"><br>Log in!!</a></p>
</div>
<button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</form>
validation.js
//Login form
$("#loginModal").submit(function(){ // OK
console.log('fut');
var errorMsg = "";
errorMsg += checkEmailField('#logF_email');
errorMsg += checkPasswordField('#logF_passw');
if (errorMsg == "") { $('#errorLogin').html('<div class="alert alert-success" role="alert">Please wait...</div>');
$('#loginModalDiv *').prop('disabled',true); $('#footerLogin').hide();
return true;}
else {$('#errorLogin').html('<div class="alert alert-danger" role="alert"><big>An error occurred while logging in!</big>' + errorMsg + '</div>'); return false;}
});
//Sign-up Form
// check the fields when the button is clicked!
// $(document).on('click', '#btnSignUp', function(event){
$("#signUpModal").submit(function(){
console.log('fut');
var errorMsg = "";
errorMsg += checkEmailField('#regF_email');
errorMsg += checkPasswordField('#regF_passw', 'regF_passwConf');
if (errorMsg == "") { $('#errorSignUp').html('<div class="alert alert-success" role="alert">Please wait...</div>');
$('#signUpModalDiv *').prop('disabled',true); $('#footerSignUp').hide();
return true;}
else {$('#errorSignUp').html('<div class="alert alert-danger" role="alert"><big>An error occurred while sending request!</big>' + errorMsg + '</div>'); return false;}
});
2nd: After I click on the submit button (LoginForm), the page is refreshing but I can't extract any data from the '$_post' variable.
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$mail = $_POST['email'];
$password = $_POST['password'];
...
or
if ( $_POST ){
or
if (!empty($_POST)){
I've tried many variation without any solution. Pls, help!

Add dynamically wysiwyg with textAngular

I try to add a WYSIWYG textAngular dynamically, but when I click on my button "Add description", I can't click on my second textarea (WYSIWYG with textAngular)
index.html
<div id="product-{{ product.country.code }}" class="app-product" ng-repeat="product in products">
<div class="form-group" ng-repeat="description in product.description">
<label class="col-lg-2 control-label">Description {{ $index + 1 }}</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarProductTextAngular" name="product-{{ product.country.code }}-description-{{ $index + 1 }}" ng-model="description.description" placeholder="Enter description {{ $index + 1 }}" ng-required="$index > 0" ></text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-success" ng-click="addDescription(product)">
<i class="glyphicons glyphicons-plus"></i> Add description
</button>
<button type="button" class="btn btn-danger">
<i class="glyphicons glyphicons-remove-2"></i> Remove
</button>
<button type="button" class="btn btn-primary">
<i class="glyphicons glyphicons-new-window"></i> Clone
</button>
</div>
</div>
</div>
</div>
my Toolbar
$rootScope.toolbarProductTextAngular = [['bold','italics','underline', 'insertLink', 'html'],['wordcount','charcount']];
When I click on "Add description", the push it's ok, but I would like to know why the textarea and the toolbar are disabled ? I can't click on this...
description 2 code generated
<div class="form-group ng-scope" ng-repeat="description in product.description">
<label class="col-lg-2 control-label ng-binding">Description 2</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarCampaignTextAngular" name="product-au-description-2" ng-model="description.description" placeholder="Enter description 2" ng-required="$index > 0" class="ng-pristine ng-untouched ng-isolate-scope ta-root ng-empty ng-invalid ng-invalid-required" required="required">
<div text-angular-toolbar="" name="textAngularToolbar4837089965543664" ta-toolbar="toolbarCampaignTextAngular" class="ng-scope ng-isolate-scope ta-toolbar btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default ng-scope" name="bold" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Bold" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-bold"></i></button><button type="button" class="btn btn-default ng-scope" name="italics" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Italic" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-italic"></i></button><button type="button" class="btn btn-default ng-scope" name="underline" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Underline" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-text-underline"></i></button><button type="button" class="btn btn-default ng-scope" name="insertLink" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Insert / edit link" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-link"></i></button><button type="button" class="btn btn-default ng-scope" name="html" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Toggle html / Rich Text" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-embed-close"></i></button></div>
<div class="btn-group">
<div id="toolbarWC" style="display:block; min-width:100px;" class="btn btn-default ng-scope" name="wordcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Words: <span ng-bind="wordcount" class="ng-binding">0</span></div>
<div id="toolbarCC" style="display:block; min-width:120px;" class="btn btn-default ng-scope" name="charcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Characters: <span ng-bind="charcount" class="ng-binding">0</span></div>
</div>
</div>
<div class="ta-scroll-window ng-scope ta-text ta-editor form-control" ng-hide="showHtml">
<div class="popover fade bottom" style="max-width: none; width: 305px;">
<div class="arproduct"></div>
<div class="popover-content"></div>
</div>
<div class="ta-resizer-handle-overlay">
<div class="ta-resizer-handle-background"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tr"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-bl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-br"></div>
<div class="ta-resizer-handle-info"></div>
</div>
<div id="taTextElement4837089965543664" contenteditable="true" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ta-bind ng-empty placeholder-text">
<p><br></p>
</div>
</div>
<textarea id="taHtmlElement4837089965543664" ng-show="showHtml" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ng-scope ta-bind ta-html ta-editor form-control ng-empty ng-hide"></textarea>
<input type="hidden" tabindex="-1" style="display: none;" name="product-au-description-2" value="">
</text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
I don't see the place holder
I can't click on the textarea (disable)

As I reported here the placeholder HTML attribute breaks the WYSIWYG. You have to remove it.

Jquery u-i sortable scrolls to bottom

I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>