To change the text in Bootbox dialog, I use <span id='someID'></span> and then use jQuery as follow: $("#someID").text("The new Text");
The problem I am facing is how to change the dialog color?
Inside my dialog I have the following (to set the dialog color):
className: "modal-danger nonumpad",
I want to change the class name to modal-success nonumpad when an action takes place.
Here is my code:
callDialog = bootbox.dialog({
className: "modal-danger nonumpad", // the class I want to change
closeButton: false,
animate: true,
title: 'Making Call',
message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i><span id="test"> Waiting for Reply... </span></div>',
onEscape: null,
buttons: {
hangup: {
label: "<span id='hangup' <i class=\"fa fa-phone\"></i> Cancel </span>",
className: "btn-warning btn-lg pull-left",
callback: function(){
$("#dynamicMsg").text("This is dynamic msg");
return false;
}
}
}
});
callDialog.init(function(){
peer.on('connection', function(conn) {
conn.on('data', function(data){
// Will print 'hi!'
call = data;
console.log(call);
if(call == "ACCEPT"){
$("#test").text("This is dynamic msg");
$("#hangup").text("Hangup");
} else {
}
});
});
});
How can I change the className inside the init() function?
NOTE: <span id='someID'></span> doesn't work.
Since you have a reference to your dialog, something like this should work, using toggleClass:
callDialog.find('.modal-danger').toggleClass('modal-danger modal-success');
This will find the child element with the class modal-danger, and then remove it while adding the class modal-success.
Can you try:
$("#someID").removeClass('modal-danger').addClass('modal-success');
The someID will have to be the ID of your dialog. Or, if you have multiple or it's dynamic, reference a class name instead.
$(".someClass").removeClass('modal-danger').addClass('modal-success');
can you please guide what to replace someID with? because the way i am
creating the the dialog is different as it is shown in the question
with no ID
Answering your comment question, your should replace it with whatever individual selector you have for the element you want to change. If is just one element you sould think about giving it an ID. Depending on where you are calling that, you can define your selector by the event.currentTarget, or if at that moment there is only this element with those classes "modal-danger nonumpad", you can use it as a selector too.
Try this:
$(callDialog).removeClass('modal-danger').addClass('modal-success');
The $(callDialog) selects the variable that the bootbox dialog object was assigned to and turns it to a JQuery Object.
The .removeClass('modal-danger') is a JQuery method to remove the class passed as a parameter from the selected object.
The .addClass('modal-success') is also a JQuery method used to add the class passed as a parameter to the selected object.
Related
I am sending a Model to a View in MVC,
and for each "Person" in my Model, I want to create a button that says "Show Details", when the user clicks it, a div with more information about that person toggles.
I am generating a a href and div id assigned to each person ID like the following:
foreach (var person in Model.Persons)
{
<div>
Show Details
</div>
<div id="#Html.Raw("detailsDiv-" + #person.id)">
<!--Content Here -->
</div>
}
I want to create the javascript that toggles on a click event
So I want to write this script but with the unique id for each person:
I want to get the id of the div that needs to be toggled.
I tried writing the script inside the foreach loop so I can be able to read the #person.id value, but it didnt work:
<script>
$(document).ready(function () {
$("#showDetails-#person.id").click(function () {
$("#details-#person.id").toggle();
});
});
</script>
Can anyone help?
put a class to your links like class="showDetails".
Now you Can create a global Event for all that links:
$('.showDetails').click(function(e) {
var id = this.id // extract id.. split with '-' or whatever..
$('#details-' + id).toggle();
});
you could put the id in a tag like "person_id" and use a class to trigger the jquery event.
<div class="middle_right">
<a class="showDetails" href="#" person_id="#Html.Raw("showDetails-" + #person.id)">Show Details</a>
</div>
and in js
$(".showDetails").click(function () {
var person_id=$(this).attr("person_id")
});
I'm trying to figure out the best way to add a function to the existing ng-click function below that will add a class to the element upon execution.
$ctrl.next = function(id) {
$state.go('individual', {id : id}, {reload : true});
ga.track({
action:'Button click',
label:'Navigation Button Right',
category:'Button'
});
}
Basically this function triggers a state change to the next item in an array that comes from a database and tracks the element clicked.
Without a sample, I am not 100% clear on what you have. This plunker demo shows clicking a button, and changing it's class to make it blue.
JS
app.controller('ctrl',function($scope){
$scope.clickFunction = function(evt) {
angular.element(evt.srcElement).addClass('clicked-button');
}
});
HTML
<div ng-controller='ctrl'>
<button ng-click="clickFunction($event)">Click Me</button>
</div>
I've have code to add button via JQuery, It is used to remove row. Button working correctly, just It's without name like [], but should be like [X]. It looks like HTML code created as: <button class="removeRow"></button> instead of <button class="removeRow">X</button>
JQuery
$.fn.optionTest.defaults = {
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
};
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions));
removeRow = $($(removeRow).html());
row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
Where should I apped this X to achieve It?
If something unclear - just ask, if needed I can create JS fiddle.
Should be in this line ,when creating button:
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X"));
I am very new to meteor and it is possible that I am going about this entirely incorrectly.
I have a simple template that represents a menu bar. When the user clicks an Icon, the menu is supposed to appear. When they click it again, it is supposed to disappear.
Here is the markup:
<template name="menu">
<div class="menu">
<div class="toggler">
<i class="fa fa-bars fa-3x"></i>
</div>
<div class="menu-body">
<!-- ... -->
</div>
</div>
</template>
Here is the JS that I have:
Template.menu.helpers({
self: Template.instance(),
menu_body: self.find('.menu-body'),
toggler: self.find('.toggler'),
currently_open: false,
open: function() {
menu_body.style.display = 'flex';
},
close: function() {
menu_body.style.display = 'none';
},
toggle: function() {
if(currently_open) close();
else open();
}
});
Template.menu.events({
'click .toggler': function(event, template) {
console.log(template);
template.toggle();
}
});
I thought the template instance would have access to the helper functions, but according to the log statement, this is what the template instance consists of:
B…e.TemplateInstance {view: B…e.View, data: null, firstNode: div.menu, lastNode: div.menu, _allSubsReadyDep: T…r.Dependency…}
_allSubsReady: false
_allSubsReadyDep: Tracker.Dependency
_subscriptionHandles: Object
data: null
firstNode: div.menu
lastNode: div.menu
view: Blaze.View
__proto__: Blaze.TemplateInstance
Can someone point me in the right direction here. Please feel free to be scrutinous if I am going about it wrong.
Helpers are for functional calls - not event driven works.
Meteor has an events handle that you can use to track events like clicks. Also you can use your css classes to define the styles nicely without programatically overwriting them.
Template.name.events({
'click .menuToggler': function(event, template) {
event.preventDefault();
var menu = template.find('.menu-body'); //(make this in ID!)
if($(menu).hasClass('menuOpen')) {
$(menu).removeClass('menuOpen');
//menu.style.display = 'none';
} else {
$(menu).addClass('menuOpen');
//menu.style.display = 'flex'; Use css to define these on the menuOpen class
}
});
Some things to note: This event handle assumes that your menu-body class is available under the template called "name" in my example. So you will want this event handler at the most top level template you have. It also assumes.
If you want to share state between the various components of your template (helpers, event callbacks etc) it should be done by setting properties directly on the template instances.
This can be done through the onCreated() callback
As per the documentation:
Callbacks added with this method [are] called before your template's logic
is evaluated for the first time. Inside a callback, this is the new
template instance object. Properties you set on this object will be
visible from the callbacks added with onRendered and onDestroyed
methods and from event handlers.
These callbacks fire once and are the first group of callbacks to
fire. Handling the created event is a useful way to set up values on
template instance that are read from template helpers using
Template.instance().
So, to provide a more relevant and concise example than the one in my original question.
Template.menu.onCreated(function() {
this.items = [
{title: 'Home', icon: 'home'},
{title: 'Profile', icon: 'user'},
{title: 'Work', icon: 'line-chart'},
{title: 'Contact', icon: 'phone'}
];
});
Template.menu.helpers({
items: function() {
var self = Template.instance();
return self.items;
}
});
Template.menu.events({
'click .toggler': function(event, template) {
console.log(template.items); //[Object,Object,Object,Object]
//do something with items
}
});
That's actually funny but I created a mini package that helps you do just that: https://atmospherejs.com/voidale/helpers-everywhere
But in your case it's not the right way of doing it. I can you see you want to add an display either flex or none it's better add CSS element like active that hold display: flex and add active or remove it on click like this: $('').addClass('active') or $().removeClass('active')
one liner can also work here: $('.menu-body').toggleClass('active')
So here is my dilemma. Been trucking on this Jquery extreme code here and I need help telling if a certain link is showing or not. Here is what I have.
The toggles:
<span class="icon icon84"></span>
<span class="icon icon85"></span>
(notice the only thing that is different is the icon number) These need to toggle back and forth when someone clicks the #visbilitybutton. Not sure of the best way to do this and to capture what is selected as well.
The only code I have currently makes the toggle go one way, but doesn't go back when clicked again.
$(document).ready(function () {
$('#visbilitybutton').click(function() {
$(this).replaceWith('<span class="icon icon85"></span>');
});
});
First things first, you shouldn't have multiple identical id attributes on your page. Make visibilitybutton a class.
Anyways, you can use the jQuery toggle() function to specify what to do on each consecutive click:
$(".visibilitybutton").toggle(function(){
$(this)
.attr("title","Invisible")
.find("span").toggleClass("icon84 icon85");
}, function(){
$(this)
.attr("title","Visible")
.find("span").toggleClass("icon84 icon85");
});
If you want to be more efficient, you can do it all in one fell jQuery swoop like so, with some good techniques:
var vis = ["Invisible","Visible"];
$(".visibilitybutton").click(function(){
var i = 0;
$(this)
.attr("title",vis[i])
.find("span").toggleClass("icon84 icon85");
i = (i==0)?1:0;
});
Even more so would be to make a class that hides the element when added to it and shows it when you remove it (a classname with display:none applied in the CSS works fine):
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85");
});
You need to have unique ids; therefore, you should select the items by class. You can use toggle() to handle the consecutive clicks, and you can use toggleClass() to handle the swapping of classes.
HTML:
<span class="icon icon84"></span>
<span class="icon icon85"></span>
Javascript:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85', 'icon84');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84', 'icon85');
});
});
The id attribute is supposed to be unique to each element. Change the id attribute to the class attribute for each hyperlink.
Then, in your jQuery code, get the hyperlinks by their class name:
$('.visbilitybutton').click(function() {
// code goes here
});
In your event handler, you should use test the title attribute, like so:
$('.visibilitybutton').click(function() {
$this = $(this);
if ($this.attr("title") == "Visible")
$this.attr("title", "Invisible").find("span")
.removeClass("icon85").addClass("icon84");
else
$this.attr("title", "Visible").find("span")
.removeClass("icon84").addClass("icon85");
});