Bootstrap checkbuttons with icons does not works - javascript

I have the need to add checkbuttons to my table and I want use the Bootstrap Button for this.
I found a snippet on the web that combine icons with buttons and the JS code to define buttons behavior. Cause this code is with Glyphicons, in another discussion I asked for an alternative and I obtained it; now I'm using fontawesome.
So, I've done this steps:
Copy the folder with the min.css file in my app folder, under: src/main/webapp/static/font-awesome-css/font-awesome.min.css
Include the folder path in my home page with this syntax: <link href="../../static/font-awesome-css/font-awesome.min.css" rel="stylesheet" media="screen">
Use this snippet: BootStrap Checkbutton With Icons; in particular, I used only one button in my Data Table, this one:
{
"data": null,
"render": function ( data, type, full, meta ) {
return '<span class="button-checkbox"><button type="button" class="btn" data-color="primary">Select</button><input type="checkbox" style="display: none" checked /></span>';
}
},
while for the JS function i tried both an external file to include and to put directly inside the data table file.
Well, the problem is that when i load my app, the button does not have the icons, does not change after click and it's not selected: at start, this is the situation (the not working button is "Select"):
Can you see the grey buttn without icons? Well, after clicking the situation does not change.
What I am doing wrong?
UPDATE 01 Sept: seems that the problem is where the js code is putted.
As first try, I've putted it in the section where I define the table printing; the results are showed after a form interaction, so I've associted the code with the submit button behavior. The problem persist, but I've noticed a change: when the table appair, for 2 second the button are showed correctly and then they became grey.

My best guess whould be that the JS isn't implemented correctly since this is the part that does everything you want:
EDIT:
This might be more helpfull to post too, if you look at there source code they implemented the JS directly into there HTML with a script so I guess you also need to do this.
Source code: view-source:https://s.bootsnipp.com/iframe/7nQMK

Related

Issues with tinyMCE and 'mceAddEditor'

So I have a page that uses JavaScript to dynamicaly add <textarea>s. I need these text areas to use tinyMCE. I am using tinyMCE v4.
I have an init function for tinyMCE
function TinyMceEditConfig() {
tinymce.init({
selector: '.editor'
});
}
then i call the function
TinyMceEditConfig();
then i create dynamic text areas. Basically, someone selects they want to enter text from a drop down list. once they select it the text area is generated. when a user clicks the dropdown it calls a function that contains this code (my brackets may be messed up here...dont pay attention to that, lol, they are fine in my code, just look at the meat)
return $('<div>', {
'css': {'display': 'none'},
'html': [
$('<textarea>', {
'value': this.text_value,
'placeholder': this.placeholder_text,
'class': "editor"] });
};
so at this point, i can click the dropdown to generate the text area (plain text). if i refresh the page tinyMCE kicks in and everything is fine. looking around online the following code is supposed to fix my problem so that tinyMCE will show as soon as the field is added. this is in my code immidiatly after i call the last code snipit.
tinymce.EditorManager.execCommand('mceAddEditor', false, ".editor");
however, it does not.....any advice?
You can't call init() on a textarea until it exists on the page. If I understand your comments above you are first invoking your TinyMCE init() function and then later adding textarea elements to the page. This won't work as the init() will only handle things that already exist on the page.
When you dynamically add the new textarea to the page you then need to call tinymce.init() after the textarea is part of the DOM in order to have TinyMCE appear in place of the textarea.
It might help to create a TinyMCE Fiddle (or CodePen etc) to show what you are actually doing as that might help people see where things are failing.

jquery bootstrap selectpicker refreshing lists based upon previous list choice

I have three drop down lists, one list is populated on page load and doesn't change. The 2nd and 3rd lists may change depending on the selection. This functionality is working fine.
I have tried to add Bootstrap selectpicker to the selectors and I can see it is working - unfortunately the lists are not refreshing based upon the selection. I actually think "behind the scenes" they are as I can see the queries being passed but via the front end nothing happens.
Part of the HTML:
<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
The first two DDL's are created via php but are
<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>
I have the following Javascript:
$(document).ready(function() {
$(".selectpicker").selectpicker();
});
This is the point where I have discovered the problem, I am trying to implement this within the ajax on change functions without success - not even sure if it is correct.
$('.selectpicker').selectpicker('refresh');
I am pretty new to all of this so would like some help.
I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh'); exactly after adding items to my list did the job.
So you probably need to find the correct place to put it. Maybe in the success part of your ajax call.
What I understood from my experience with this so far -
If you are adding dynamically options to the dropdown then you must need to call below function just before adding option
$(".selectpicker").selectpicker();
Once you completed adding options then call below function (if you are using ajax to add option then put this function into success part as just answered Athina)
$('.selectpicker').selectpicker('refresh');
If you are facing any weird issue like showing dropdown not data or sometime dropdown not showing properly then definitely you must have made mistake in placing about function and nothing else.
if refresh method doesn't help, try adding some delay.
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
In my Ajax successCallBack I am trying to manipulate drop down list having id as reasonCode based on dynamicId (value get from server) as below:
$('#reasonCode option[value='+dynamicId+']').prop('selected', true);
but unfortunately this had not worked until I added another line after this as below:
$('#reasonCode').selectpicker('refresh');
Changing selectpicker class name when hidden:
<select name="key" class="selectpicker_oncreate">
When refreshing:
$('.selectpicker_oncreate').selectpicker('refresh');
I've added destroy before refresh, thats solved my issue.
// ... option:selected manipulation
$('.selectpicker').selectpicker('destroy');
$('.selectpicker').selectpicker('refresh');

tinyMCE setting not found (2 parts)

Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.
In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.

Twitter Typeahead not working with Bootstrap CSS

I can't manage to make this bootply work.
It consists of a bootstrap modal with a form containing two input fields in which I'd like to use typeahead. the second input field is also based on bootstrap-tagsinput which means the typeahead should aid in finding tags.
http://www.bootply.com/QdjImYdrJY
I forked your bootply and made it to work : http://www.bootply.com/5tVniXhbBg
You had two issues :
First one, your scripts load asynchronously, so you have to wait for them to be loaded to use their functions (i.e tagsinput and typeahead)
$.getScript(
'myscript' ,
function () {
// Callback function,
// Here you can use what the script you loaded provides.
}
);
Second one, you don't have to put the data-role="tagsinput" manually, it will be added by the plugin. If you specify it, the plugin won't process it as it thinks it already processed it!
Hope this helps,

How to remove upload button in nicEdit text editor

I am fine with all the buttons of nicedit for my website. But i would like to remove upload button of the editor in one of my website. I got an option of ppulating button list, but i am searching for setting like:
fullPanel: true, hideButton: 'upload'
Just put buttons that you need.
new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area1');
The plugin does not seem to have a hideButton option.
You can either have the full button list, or explicitely choose the buttons to show with the buttonList option.
Documentation
I was thinking that maybe you could hide it using CSS but the plugin does add any class or IDs to the buttons so it would make it pretty unreliable to target.
You can go to nicEdit.js try to find .. buttonList .. at there you can see button list.
Delete the ,upload
I've been extending and fixing the nicEdit plugin (added easy YouTube embedding and DragNDropz https://dragndropz.com image upload support) quite a bit lately, and I added an ignore buttons option as well to easily ignore specific buttons.
Source and updated version is here:
https://dev.x-null.net/own3mall/nic-edit/tree/yt-videos
Example of how to use it:
myNicEditor = new nicEditor({fullPanel : true, buttonIgnoreList: new Array('upload', 'youtube')}).panelInstance('go_nicedit',{hasPanel : true});

Categories