Get multiple variables from HTML using jQuery - javascript

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

Related

Manipulating bootstrap tabs, removing and adding tabs with jquery and javascript

Im kind of new to this. I would like to add and remove buttons from a tab, however i can't do it properly. It seems fairly simple but i wont work with the new buttons created using javascript. Please help me. Thanks in advance
<div class="col-lg-6 col-sm-6">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..." id="dynagregarmarca">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
<div class='btn-group' role='group'>
<button type='button' id='following' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>
<div class='hidden-xs'>Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content" id="tabcontent">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class='tab-pane fade in' id='tab3'>
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
<input type="button" id="btnagregarmarcatab" value="Add tab" />
<input type="button" id="btneliminarmarcatab" value="remove Selected tab" />
<script>
$(document).on("click", ".btn-pref .btn", function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btnagregarmarcatab", function () {
var menu_html = "<div class='btn-group' role='group'>" +
"<button type='button' id='followings' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>" +
"<div class='hidden-xs'>Following</div>" +
"</button>" +
"</div>";
var content = "<div class='tab-pane fade in' id='tab3'>" +
"<h3>This is tab 3</h3>" +
"</div>";
$("#dynagregarmarca").append(menu_html);
$("#tabcontent").append(content);
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btneliminarmarcatab", function () {
let elementoprimary = $(".btn-primary");
$(elementoprimary).parent().remove();
});
</script>
It only works removing the default buttons, but it removes everything if I try to remove the created buttons. Please I need some help or advice. Thanks a lot in advance. I need to do it the simple way.
You haven't specified what parent should be removed. So instead of
$(elementoprimary).parent().remove();
you should use
elementoprimary.closest(".btn-group").remove();
You also should use closest instead of parent, because closest is much safer if your DOM layout changes.

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");

Modal window doesn’t seem to be working

Tried integrating the modal window here on the Lyric button: https://soundwhore.com/trance/tenishia-feat-adina-butar-dont-let-go/
However, nothing happens on click. Any idea, why this would not work?
Code here:
<p class="meta-data">
<a class="waves-effect waves-light btn-large red" href="#modal-lyric">
<i class="material-icons left">subject</i>Lyrics
</a>
<a class="waves-effect waves-light btn-large amber accent-4" href="https://itunes.apple.com/us/album/dont-let-go-feat.-adina-butar/id1054325261?i=1054325265" target="_blank" title="Go to https://itunes.apple.com/us/album/dont-let-go-feat.-adina-butar/id1054325261?i=1054325265">
<i class="material-icons left">shopping_cart</i>Buy now
</a>
</p>
<div class="modal" id="modal-lyric">
<div class="modal-content">
<h4>Lyrics</h4>
<p></p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-green btn-flat" href="#!">Done</a>
</div>
</div>
Source: http://materializecss.com/modals.html
I think you just forgot to add the listener:
<script>
$(document).ready(function() {
$(".modal").modal()
});
</script>

Read More in bootstrap panel using javascript

I am using bootstrap panel to display data and there is a description field which i am displaying in panel body
I want to implement read more and read less link for description field in panel body
Here is what i have done until now
function readmore(data){
if (data.length > 100) {
// truncate string
datacut = data.substring( 0, 50);
// make sure it ends in a word so assassinate doesn't become ass...
data2 = datacut + '<span id="restOfArticle" style="display:none">'+ data.substring( datacut.length, data.length);+'</span>' ;
return data2 + '<a onclick=showMoreOrLess(this,"restOfArticle") >..Read more</a>';
}
return data;
}
function showMoreOrLess(thisObj,bonusContent){
var caption = thisObj.innerHTML;
//alert(caption);
if ( caption == "..Read more" ) {
document.getElementById(bonusContent).style.display = "inline";
thisObj.innerHTML = "..Read less";
} else {
document.getElementById(bonusContent).style.display = "none";
thisObj.innerHTML = "..Read more";
}
}
Read more and read less is working fine but its not right after the hidden content is finished but its in new div and when i click on the read more it collapses the panel body
Here is how i display the html data using jquery and webservice
<div class="panel-group" id="accordion">
<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
<div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>
<div class="pull-right">
<button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
id="i5" class="glyphicon glyphicon-plus"></i> Check in
</button>
<span class="label label-default badge-round pull-right label-checkin">1 </span></div>
</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">
<div><p>test<strong> description</strong></p>
</div>
<div>
<button id="5" data-toggle="modal" data-target="#myModal" type="button"
class="btn btn-danger btn-sm location-btn center-block"><span
class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
Australia
</button>
</div>
</div>
</div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
id="panel1" aria-expanded="false">
<div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>
<div class="pull-right">
<button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
id="i10" class="glyphicon glyphicon-plus"></i> Check in
</button>
<span class="label label-default badge-round pull-right label-checkin">1 </span></div>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
</p>
<a onclick="showMoreOrLess(this,"restOfArticle")">..Read more</a></div>
<div>
<button id="10" data-toggle="modal" data-target="#myModal" type="button"
class="btn btn-danger btn-sm location-btn center-block"><span
class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
Australia
</button>
</div>
</div>
</div>
</div>
What should i do to keep that body open and display the data
Thank you
I'll provide a simple solution that you can adapt. Check this code one: http://jsfiddle.net/c7pcu5gy/

Load jQuery modal based on which div was clicked

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/

Categories