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");
Related
I'm a newbie in web development and am now starting a project using bootstrap and jquery as a start.
I might be mistaken in my understanding of web development, but I'll try asking this anyway:
I have a list-group of cards. Each card as an item (just li, not using list-group-item to preserve card style).
I want to be able to dynamically insert new cards. Currently I'm manually adding the HTML code using js/jquery. For example:
let card_class = document.createElement("div");
card_class.setAttribute("class", "card mx-3 my-5");
card_class.setAttribute("name", "card-class");
let row_class = document.createElement("div");
row_class.setAttribute("class", "row no-gutters bg-dark text-white-50");
row_class.setAttribute("name", "row-class");
let profile_class = '<div class="col-auto">'+
'<img src="profile.jpg" style="height:50px;" class="img-fluid" alt=""></img></div>';
let col_class = document.createElement("div");
col_class.setAttribute("class", "col");
col_class.setAttribute("name", "col-class");
let card_col_class = document.createElement("div");
card_col_class.setAttribute("class", "card-block px-2");
card_col_class.setAttribute("name", "card-col-class");
let card_footer = '<div class="card-footer"><span class="btn-toolbar btn-group-sm px-5">'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="fas fa-retweet"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-heart"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-share-square"></i></button></span></div>';
//get the tweet info (object parameter) and put it in the header and body of the card.
let username = tweet_info.username;
let tweet = tweet_info.tweet;
let card_header = '<div class="card-header">#'+username+'</div>';
let card_body = '<div class="card-body" style="white-space: pre-wrap;" onclick="setInfo(this)" type="button"'+
'data-toggle="modal" data-target="#tweet-id">'+tweet+"</div>";
//now actually add the card to the html.
$("div[name='main-content'").prepend(card_class);
$("div[name='card-class']").append(row_class);
$("div[name='row-class']").append(profile_class);
$("div[name='row-class']").append(col_class);
$("div[name='col-class']").append(card_col_class);
$("div[name='card-col-class']").append(card_header);
$("div[name='card-col-class']").append(card_body);
$("div[name='card-col-class']"]).append(card_footer);
What I wondered is, how can I simplify my code.
I thought, is it possible to for example take an li item, duplicate it and just change it a bit?
Edit:
For example, the HTML code to duplicate (same as the js code):
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>
You can use .clone() to clone your html element then use .find() to change any element inside this cloned element and finally append same to your ul using appendTo method.
Demo Code :
$("#cloned").on("click", function() {
var cln = $("ul li:first").clone() //cloned first li
cln.find(".link").text("something") //use find and change username
cln.find(".card-body").text("something something...") //use find and change content
$(cln).appendTo($("ul")) //append to ul
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<button id="cloned">Clone Me</button>
In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
I have used boostrap modal.in that we need to use scroll to specific element. i tried by using below code.but doesn't works
$('#centralModalLg').on('show.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
Updated:
when i open modal window at first time and scroll to the specific area.look at the below the screen shot
when open modal second time. the scoll should go the top but i got where i stoped last time.
Html:
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
<!--Content-->
<div class="modal-content" *ngIf="productDetails">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>{{productDetails?.productName}}
<span>
<img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
</span>
<span>
<img *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
</span>
</h4>
<div id="elementId" class="over-flow-md">
<img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- <hr /> -->
<p class="small pt-2">
{{ productDetails?.productDesc }}
</p>
<hr />
<div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
<h5 class="bg-light">{{addonCate.CategoryType}}</h5>
<div class="row pb-1">
<div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
<span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
<div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>
</div>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
<li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<label class="checkbox-inline checkbox">
<input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue" type="checkbox" value="option1" >
<span class="checkmark"></span>
<div class="checkbox-text">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
</div>
</label>
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
<li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
<input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-2">
<input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
</div>
<hr />
<div class="row addprice">
<div class="price col-sm-7">Choose Quantity</div>
<div class="text-right col-sm-2 ">
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
<ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
</strong>
</div>
<div class="text-right col-sm-3 ">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
<input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
</div>
</div>
</div>
<div class="bg-light p-0 pb-2">
<div class="row">
<div class="col-md-6">
<div class="mt-3 pl-3">
<span class="pr-1">Total:</span>
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
<ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
</strong>
</div>
</div>
<div class="col-md-6">
<button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
<span *ngIf="add_cart_loading != 'adding'">
<ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
<ng-container *ngIf="update_product_status">Update</ng-container>
</span>
<span *ngIf="add_cart_loading == 'adding'">
<ng-container *ngIf="!update_product_status">Adding</ng-container>
<ng-container *ngIf="update_product_status">Updating</ng-container>
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
How i can achieve this
Thanks in advance
Change "show" to "shown" when did you use bootstrap 3 or 4
$('#centralModalLg').on('shown.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
check that Bootstrap 3 codepen example
check that Bootstrap 4 codepen example
$('#centralModalLg').on('shown.bs.modal', function() {
$('#elementId').scrollTop(0);
});
A Fiddle with your code.
EDIT:
The issue is caused by the event listener, should be shown.bs.modal instead of show.bs.modal, updated the fiddle as well.
jQuery.scrollTop() could be conflicting if the event is started but not yet completed as of Bootstrap's official documentation :
the infinitive (ex. show) is triggered at the start of an event, and
its past participle form (ex. shown) is triggered on the completion of
an action.
try this:
$('#centralModalLg').on('show.bs.modal', function() {
setTimeout(function() {
var $elem = $('#scrollto') // add this ID to an element you want scroll to
var $container = $("#elementId")
$container.scrollTop(0) // edge case - reset scroll in case it is reopened
var t = $container.offset().top
$container.scrollTop($elem.position().top - t);
}, 500) // run after modal animation
});
It is based on this answer: https://stackoverflow.com/a/21179878/8164758
Here is working jsfiddle example: https://jsfiddle.net/954jnt2y/1/
So what I'm trying to do is, load a payment modal (which will have a payment/credit card form), and dynamically load the "selected plan" into the modal.
Below is the "Choose a Plan" HTML - what I'm trying to do/need help with is a jQuery function that opens the modal and loads "You selected this plan".
PS. Here is a fiddle if it's easier http://jsfiddle.net/9xyJn/
This is what I have on the JS side so far:
$(".planSelector").click(function() {
console.log("got that clcik.");
var selectedPlan = //Get the selected plan
$("#paymentModal").modal("show");
});
HTML:
<div class="container">
<div class="row">
<hr>
<div class="span12 pick-plan-intro">
<h2>Great sales teams come in all sizes</h2>
<h6>All plans are including all features</h6>
</div>
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="freePlan">Free</h4>
<p>Free</p>
<p>Up to 5 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="smallPlan">Small</h4>
<p>$99</p>
<p>Up to 15 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="mediumPlan">Medium</h4>
<p>$199</p>
<p>Up to 30 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
</div>
</div>
I have modified your code a little and added id to your <a> attributes.
Here's the jsfiddle update: http://jsfiddle.net/saurabhsharma/9xyJn/1/
So I have a block of HTML, and what I want to do is generate a modal based on which "plan" a user picked. Everything is working except the planPrice variable. I can't seem to pull it frmo the HTML.
I'm certain this is the line that is wrong, but can't seem to get the sytnax right, I am thinking I need to use "this" in some way?
Here is a fiddle, and the goal is to get the planPrice to alert. http://jsfiddle.net/6xD7D/
var planPrice = $(".span3 p.planPrice").val(); //Doesn't work.
jQuery:
$(".planSelector").click(function() {
var selectedPlan = this.id;
console.log("You've selected " + selectedPlan);
$('#passedSelectedValue').val(selectedPlan);
var planPrice = $(".span3 p.planPrice").val(); // This line not working
$('#planPrice').val(planPrice);
$('#paymentModal').modal('show');
});
HTML :
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="1">Free</h4>
<p class="planPrice">Free</p>
<p>Up to 5 users</p>
<a id="1" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="2">Small</h4>
<p class="planPrice">$99 / month</p>
<p>Up to 15 users</p>
<a id="2" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="3">Medium</h4>
<p class="planPrice">$199 / month</p>
<p>Up to 30 users</p>
<a id="3" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
You need to use .siblings() or combination of .closest() and .find()
Use
var planPrice = $(this).siblings(" p.planPrice").text();
OR
var planPrice = $(this).closest('.span3').find(" p.planPrice").text();
DEMO