We Keep Coding

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.

How can i use i tag as input tag?

I want to replace input with i tag: it's original code
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">
<form id="myform" action='model/excel.php' method='post'>
<input type='submit' name='export_excel' value='Export To Excel' class='btn btn-default btn-sm'/>
</form>
</span>
</a>

Sounds like you want to use a Font Awesome Excel icon in your button for submission. In that case, I would switch to a button and place the icon inside of it:
<button type="submit" name="export_excel" class="btn btn-default btn-sm">
<i class="fa fa-fw fa-file-excel-o"></i>
</button>

How to change bootstrap modal body content dynamically

I created a bootstrap modal, I am looking for possible solution to make my modal content change dynamically.. here is my modal
<div class="modal fade" id="signupmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Sign up or log in</h4>
</div>
<div class="modal-body">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
<a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
</div>
</div><!--modalcontent-->
</div><!--modaldialog-->
</div><!--modalfade -->`
when i click the log in button i want to change my modal-body content to this login form
<form>
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class = "form-control" type="email" id="inputEmail"placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class = "form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
THANK YOU SO MUCH!

Just look at the code and you will know the solution .
Just remember that it is not necessary that things you don't see on browser can't be there. For example, in your case what you want to do is to click on login and code from some where else should be loaded to your modal-body div where in this case it is not necessary to do so rather then you can do what i have show in snippet.
<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/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal-body">
<div id="initial-content">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg" onclick="$('#login-content').show();$('#initial-content').hide();">LOG IN</a>
<a class="btn btn-success btn-lg" type="button" class="btn btn-link btn-md" data-toggle="modal">Create Account</a>
</div>
<div id="login-content" style="display :none;">
<a class="btn btn-success btn-lg" onclick="$('#login-content').hide();$('#initial-content').show();$('#form-id').trigger('reset');"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
<form id="form-id">
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class="form-control" type="email" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
</div>
</div>
And as suggested by others use bootstrap dialog. But in that case also looking at your requirement your code will also remain same until and unless you want to show login button somewhere rather then modal-body. No doubt that plugin will make you code way more easy to understand and edit then ever before.

You can:
Put the form HTML into a Javascript variable or into a hidden div
Make a jQuery function and on click of the Login button load the output of the form HTML.

I suggest trying bootstrap-dialog, it's a great tool that simplifies the work to do for displaying dialogs.
See the Manipulating Dialog Message section for how to change your dialog content dynamically, there is a setMessage functionality:
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Message 1',
action: function(dialog) {
dialog.setMessage('Message 1');
}
}, {
label: 'Message 2',
action: function(dialog) {
dialog.setMessage('Message 2');
}
}]
});

removeClass("disabled") in JQuery doesn't work correct

I have buttons:
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class" onclick="remove_disabled();">
remove
</button>
And js function:
function remove_disabled(){
$("#add_argument_button").removeClass("disabled);
}
It works and when I click on second button the first button is not de facto disabled and I can click on it. But view of button and cursor stay as disabled. I think, that I need reload first button. Why we can resolve this problem?

You are missing double quotes at the end of your removeClass statement.
$("#add_argument_button").removeClass("disabled");

Maybe you need to disable the first button?
function remove_disabled(){
$("#add_argument_button").removeClass('disabled');
$("#add_argument_button").prop("disabled", true);
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class" onclick="remove_disabled();">
remove
</button>
<script type="text/javascript">
</script>
</body>
</html>

Try this code, Its working
<body>
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class">
remove
</button>
<div id="logbefore"></div>
<div id="logafter"></div>
</body>
// Add your javascript here
$(function() {
$("#logbefore").text($("#add_argument_button").attr('class'));
$("#add_argument_button").removeClass("disabled");
$("#logafter").text($("#add_argument_button").attr('class'));
});

Change text of element that contains other elements

I have markup like this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
I want to change the text "random text" to "something else".
I am able to find the text node:
$li.find('button').first().contents().filter(function() {
return this.nodeType == 3;
}).text();
But how can I change the text? When I pass an argument to text like text('something else'), nothing changes.

I would probably put the text in its own container like
<div id='changeableText'>Random Text</div>
and then just access it directly with
$('#changeableText').text('New text!');
to accomplish this.

Updated
You can select Just the text() of the button and change it.
Note: This will not work if more that one non marked up texts exists. E.g.
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
another random text
</button>
</li>
Otherwise her is a
working demo:
var getNonMarkedUpText = $('button').text().replace(/^\s+|\s+$|\s+(?=\s)/g, "");
$('button').html($('button').html().replace(getNonMarkedUpText, 'something else'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>

Try this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span id="txt1">random text</span>
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
That way, you can go:
document.getElementById("txt1").innerText = "txet modnar";
Or
$("#txt1").text("tandom rext");