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"));
Related
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.
Hi I need a bit of help modifying my script. What I want to do:
I have a small and easy script. It changes the class of an container so I have influence on the behaviour and looking of the container. In my scenario the buttons open a div with a music player.
My problem is that I need to declare all buttons as a script. The button ID is in my case the onclick function (see code).
So when I have 10 or twenty links I need also everytime to modify the script. My idea is to have a script wich gets feed their variables by id's and classes of containers. So I need not to modify the script file.
// JavaScript Document
function AudioFF() {
var FFplayer = document.getElementById(x);
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
};
dbbtn.onclick = function() {
x = "deepblue";
AudioFF();
};
swbtn.onclick = function() {
x = "spacewalk";
AudioFF();
};
fbtn.onclick = function() {
x = "forest";
AudioFF();
};
drbtn.onclick = function() {
x = "dreamrhythm";
AudioFF();
};
My idea was to use the same class of a button as an id for the container who needs to fade in with a string. The button has e.g. the class btn_a, btn_b … etc. The containers has the id btn_a, btn_b … I wanted the script to catch the class of the button and use this classname as a variable for getElementById. The closebutton is also using the same script to close the container. Thanks for help :-)
I will recommend to use data attribute instead
example like this:
//register listener like this
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//your function
console.log(this.dataset.music);
})
})
<!--your links-->
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<!--just add data-music attribute make it the same with your div id and all set-->
<button data-music="m1">play m1</button>
<button data-music="m2">play m2</button>
<button data-music="m3">play m3</button>
You should be able to set a data tag attribute to the buttons and just read the variable from that:
<button id="myButton" data="variableForMyButton" />
document.getElementById(myButton).onClick = function(e){
x = e.target.getAttribute('data')
}
If multiple params are required you add additional data tags:
<button id="myButton" data="variableForMyButton" data-action="someSweetAction" />
Thanks guys, that was what I was looking for. My function is now like this:
The play button and closebutton are working.
<button data-music="m1">Deep Blue</button>
<div id="m1">Container Content</div>
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//function
var FFplayer = document.getElementById((this.dataset.music));
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
})
})
And here in jquery. Thanks to you all. You show me the way :-)
jQuery (document).ready(function($){
var btns = $('[data-music]');
$(btns).each(function() {
$('[data-music]').on('click', function(e) {
var FFplayer = $(this).data('music');
$("#" + FFplayer).toggleClass("audio-hidden audio-shown");
});
});
})
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 am just building a small snippet to hide a div checkout my snippet :
var Modal = function(){
Modal.prototype.hide = function(elem){
return elem.hide();
// i basically want to change the above line to this.hide();
}
}
$(document).ready(function(){
var _str = new Modal();
var div = $('#mydiv');
_str['hide'](div);
});
now , the reason i built this snippet is because i wanted to understand the code in modal.js and how it works , lets checkout the code in modal.js .
checkout this line :
data[option](_relatedTarget)
data is basically an instance of Modal
[option] is basically Modal.prototype.toggle(param)
and (_relatedTarget) is basically the parameter being passed .
so basically whats happening on that line is , the following function is being called .
hide(_relatedtarget).
I console.logged _relatedtarget and found out , it is basically an HTML element , looks something like below :
<a data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">
if you have a look at the toggle function , it looks something like below :
Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}
so bascially we are passing the following parameter in the above function :
<a data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">
and it all works fine .
Now , lets review th hide function in my code :
Modal.prototype.hide = function(elem){
return elem.hide();
}
see how my hide function differs in the sense that, i am using the following syntax to hide my code :
elem.hide();
whereas the code in modal.js uses the following syntax :
this.hide()
but if i use the above syntax and run my code , the code does't work and the element is not hidden.
so my question is, how can i change the syntax in my code to :
this.hide() and make my code work, Fiddle of my example is here .
Thank you .
Alexander.
For this function to work without a parameter, the div needs to be known by the Modal. You could do it by passing the container's selector to your constructor, like so:
var _str = new Modal('#modal-container');
And assigning it as a property of Modal. Example code:
var Modal = function(containerSelector) {
this.container = $(containerSelector);
Modal.prototype.hide = function() {
return this.container.hide();
}
}
// Using a setTimeout for the demo, so you can see it first
setTimeout(function() {
var _str = new Modal('#modal-container');
_str['hide']();
},1000);
#modal-container {
height: 100px;
width: 100px;
background: #aaa;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This div will hide after 1 second:</p>
<div id="modal-container"></div>
Edit: don't confuse jQuery's hide() function (called on DOM elements) with your own (called on a Modal object). Check this fiddle, it implements a toggle() function just like you have at line 48.
I have a TinyMCE 4.x instance where the text should be in read only mode. But I still have some buttons that I want to have enabled. For example, one button could provide a character count for the part of the text I've selected.
But when I turn on read only mode for TinyMCE all buttons are disabled. Can I enable just my buttons while still retaining read only mode?
It's probably too late for you but other people may pass by here.
I came up by writing this function
function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
var htmlEditorDiv = document.getElementById(editorId).previousSibling;
var editor = tinymce.get(editorId);
var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
buttonDiv.removeAttribute('aria-disabled');
buttonDiv.firstChild.onclick = function () {
editor.execCommand(commandName);
};
}
It does the trick in 2 steps:
make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
assign the good command to the click event
And in my editor init event I call the function.
editor.on('init', function () {
if (readOnly) {
editor.setMode('readonly');
enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
}
});
Current version of TinyMCE for which I wrote this code is 4.4.3. It may break in a future version, specifically about the selectors to get and modify the good HTML elements.
Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js
Here is a simple way to enable your custom toolbar button and attach a click event handler inside a read only TinyMCE editor using JQUERY:
//Initialize read only Tinymce editor so that Lock button is also disabled
function initReadOnlyTinyMCE() {
tinymce.init({
selector: '#main'
, toolbar: 'myLockButton'
, body_class: 'main-div'
, content_css: 'stylesheets/index.css'
, readonly: true
, setup: function (readOnlyMain) {
readOnlyMain.addButton('myLockButton', { //Lock button is disabled because readonly is set to true
image: 'images/lock.png'
, tooltip: 'Lock Editor'
});
}
});
}
function displayReadOnlyTinyMCEwithLockButtonEnabled() {
var edContent = $('main').html();
$("#main").empty();
initReadOnlyTinyMCE(true);
tinyMCE.activeEditor.setContent(edContent);
//enable the lock button and attach a click event handler
$('[aria-label="Lock Editor"]').removeClass("mce-disabled");
$('[aria-label="Lock Editor"]').removeAttr("aria-disabled");
$('[aria-label="Lock Editor"]').attr("onclick", "LockEditor()");
}
function LockEditor() {
alert("Tiny mce editor is locked by the current user!!");
//Write your logic to lock the editor...
}
I couldn't find an easy way to do this. The simplest way is to remove the contenteditable attribute from the iframe body instead and substitute a read only toolbar set. It also means that people will still be able to copy content from the editor.
$("iframe").contents().find("body").removeAttr("contenteditable");
How about this :
editor.addButton('yourButton', {
title: 'One can Enable/disable TinyMCE',
text: "Disable",
onclick: function (ee) {
editor.setMode('readonly');
if($(ee.target).text() == "Disable"){
var theEle = $(ee.target).toggle();
var edit = editor;
var newBut = "<input type='button' style='opacity:1;color:white; background-color:orange;' value='Enable'/>";
$(newBut).prependTo($(theEle).closest("div")).click(function(e){
edit.setMode('design');
$(e.target).remove();
$(theEle).toggle();
});
}
}
});
You can try to run the code below:
$("#tinymce").contentEditable="false";
if you have more than one editors, you can use their id like below
$("#tinymce[data-id='idOfTheEditor']").contentEditable="false";