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.
Related
Here is my code I pulled out from the internet which works fine in Online Snippets but when I copy and run it on my local computer , the tab stays same. Please help me
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<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>
<div class="well">
<div class="tab-content">
<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>
</div>
I would be very greatful, If anyone could help me what I am doing wrong. For reference, here is the original link to above bootstrap theme.
https://bootsnipp.com/snippets/featured/people-card-with-tabs
The reason is that you didn't include the bootstrap.min.js file, you only included the jQuery and the bootstrap.min.css file.
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<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>
<div class="well">
<div class="tab-content">
<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>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
My 2 cents:
You should try and be more careful.
You should try and debug the problem, starting always from the most obvious reasons first.
You just need to load your js at the end of the body.
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<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>
<div class="well">
<div class="tab-content">
<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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>
I tried some of the ways in other questions given for bootstrap modal but I am using bootstrap 3.3.7 this shouldn't be the issue ,but I have no idea why this is happening every time I click on button my jumbotron shrinks !!Any help would be appreciated.
My html code:
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="/uploads/text.png" style="height:40px;width:40px" />
</button>
</div>
</div>
My javascript function:
function erase(){
$('#post').empty();
$('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+
'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+
'<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+
'<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+
'</div>'+
'<div class="text-right">'+
'<button type="submit" id="sub"class="btn btn-primary">POST</button>'+
'</div>'+
'</form><div class="media-body"> <h5 class="media-heading" style="color:#3369e8"></h5>'+
'</div>'+
'</div>'+
'</div>'+'<div class="modal-footer">'+
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+
'</div>'+'</div>'+'</div>');
}
Here you go with a solution https://jsfiddle.net/qc9dgefg/2/
erase = function(){
$('#post').empty();
$('#post').html(
`<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>
</div>
<div class="modal-body">
<div class="media">
<div class="media-left">
<form action="porthome_.php" method="post" id="usrform" >
<div class="form-group">
<strong>
<span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span>
Write your post:
</strong>
<input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">
</div>
<div class="text-right">
<button type="submit" id="sub"class="btn btn-primary">POST</button>
</div>
</form>
<div class="media-body">
<h5 class="media-heading" style="color:#3369e8"></h5>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="jumbotron">
<div id="post"></div>
<div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()">
<button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px">
<img src="http://via.placeholder.com/350x150" style="height:40px;width:40px">
</button>
</div>
</div>
</div>
You were missing one of the closing div tag.
I have added the closing div tag along with that I also formatted the dynamic HTML in JavaScript.
one for add and the other for remove
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
how to make the button follow got hide when click, and then the unfollow will show up. the function of button unfollow is same like that
You can do it like below.
$("#follow, #unfollow").click(function () {
$("#follow, #unfollow").toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hidden">Unfollow Activities</button>
</div>
take 2 classes one for showing and another for hiding. Assign show class for the one you want to show by default and another will get hide class.
then your code will do rest of the work.
check the working example below
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
.show{
display:block;
}
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block show" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hide">Unfollow Activities</button>
</div>
Maybe this is better for you
$("#follow").click(function(){
$(this).html() == "Follow Activities" ? $(this).html("Unfollow Activities") : $(this).html("Follow Activities");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
</div>
The jQuery.toggle()-method changes the style="display:none;"-property of an element adding it or removing it if it exists, I think you just want to change the hidden-class you've added in your second button, then -to do this- you can use:
.toggleClass('hidden'); // instead of .toggle()
Hope it helps.
I used this code to make it so that, when you click Follow Activities that button is disabled and Unfollow Activities is enabled, and vice versa.
$("#unfollow").click(function() {
$("#unfollow").hide()
$("#follow").show();
});
$("#follow").click(function() {
$("#follow").hide()
$("#unfollow").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
If you wanted, you could also make it so that the Unfollow Activities button is disabled by default with $("#unfollow").hide() before both of those functions.
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/
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/