I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers
You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");
In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");
Related
I am a novice.I have a line of code like this that was written for me.
<a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a>
Which works perfectly (it adds the widget which is a box element to the page). The function is defined in the controller DashboarCtrl like this
$scope.addWidget = function() {
$scope.dashboard.widgets.push({
name: "New Widget",
sizeX: 1,
sizeY: 1
});
};
How do invoke that same function in the console? I have tried
angular.element('#DashboardCtrl').scope().addWidget();
Lets just say that your add Widget link has an id (add_widget). Then you can find the element by id and click it.
<a id="add_widget" class="pull-right btn btn-primary" ng-click="addWidget()">
<i class="glyphicon glyphicon-plus"></i> Add Widget
</a>
angular.element('#add_widget').click();
I am trying to change or add: data-dismiss="modal" to the innerHTMl of a button from within a <script type="text/javascript">.
<button type="button" id="verifyButton" name="verifyButton" data-dismiss="" onclick="VerifyMembership()" class="btn btn-primary" >Verify Membership #</button>
The first time the button is clicked it goes to the onclick function
function VerifyMembership() {
document.getElementById("verifyButton").className = "btn btn-success";
document.getElementById("verifyButton").innerHTML = ('Continue <i class="fa fa-check"></i>');
Im wondering how to change or add data-dismiss="modal"to the innerHTML ?
The 2nd time the button is clicked it changes to a "continue" then needs to close a "modal" alert.
You can set attribute as document.getElementById("verifyButton").setAttribute("data-dismiss", "modal"); or may be document.getElementById('verifyButton').dataset.dismiss = "modal" works
document.getElementById("verifyButton").setAttribute("data-dismiss", "Modal-or-anything");
I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.
To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
How do I make a Bootstrap dropdown appear when an ajacent button is pressed?
I have tried every combination of:
$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()
But I can't get it to work.
My html is:
<div class="btn-group">
<button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
<button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="branchFilter" class="dropdown-menu" role="menu">
<?PHP foreach ($branchList as $branchData) { ?>
<li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><?PHP echo $branchData->name;?></li>
<?PHP } ?>
</ul>
</div>
To clarify, I want the list to show if the "Branch" button is pressed, just like it would if I clicked the normal trigger button.
If you want the drop-down to open only on click of the "Branch" button, do something like this
$('#activeBranchFilterBtn').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
If you would like to get the drop-down when clicked anywhere on the complete block(either of the buttons), do this
$('.btn-group').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
I guess the second one is what you need.
UPDATE: class="open" will be toggled on your .btn-group when a dropdown trigger is given from the button with data-toggle="dropdown" attribute. just add this attribute to the first button(Branch) and you will be good to go. Check this fiddle. Hope this helps.
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red