Data table action buttons are not getting disabled - javascript

I am trying to disable some action buttons using jquery with css classes. It's working in normal pages, but it's not working for datatables.
I don't know why, I got really stuck. I am showing my code below.
If anybody knows, please help me
$(document).ready(function(){
$("a.button").addClass('btn disabled');
$("a.remove").addClass('ui-state-disabled'); // this is my datatable remove button with class remove
$("a.button").css("margin-top", "-5px");
$("a.button").css("pointer-events", "none");
$('[type=file]').attr('disabled', 'disabled');
})

Have you, by any chance, examined this article?
Because, $('{myButtonSelector}').prop('disabled', true) works perfectly on my DataTables

Related

Insert selected item into text area jquery

Im creating a form where you can add/create standard and custom comments. I've got it already working bout inserting it blablabla. Now im trying to add a select box with 6-7 standard comments. I got that working and I can also log that in to the console which is selected.
Now I'm trying to insert that selected comment into my redactor. The internet can't help me so far yet and I have no clue what to do left. Can you guys help me a little bit or give me tips on how to do it.
Comment Choice is my selector. Editor is my redactor. Here is what I've tried:
$('.commentChoice').change(function(){
//Logging to see what i selected with my .commentChoice
console.log($(this).val());
//Trying to add the value of the .commentChoice to the .editor class.
$('.editor').val($(this).val());
});
Thanks in advance.

Bootstrap datepicker with button only

I am trying to use the bootstrap-datepicker plugin to allow the user to click a button and then choose a date on the calendar. I am having trouble getting the calendar to appear on button click:
<button class="glyphicon glyphicon-calendar"></button>
$(document).ready(function(){
$("button").datepicker();
})
$("button").click(function(){
$("button").datepicker('show');
})
Here's a codepen: http://codepen.io/cavanflynn/pen/RWxmdK
Unless I am misreading the documentation, this should make it appear. Any help would be appreciated. Thanks
You are including the items in the wrong order, include jQuery first and then the library as it depends on jQuery (also as mentioned used a stable version of jQuery).
http://codepen.io/anon/pen/avEgOz
[first] https://code.jquery.com/jquery-2.1.4.min.js
[second] https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js

Customize a CSS/HTML circular menu

I found a circular menu on the web that I'm struggling to customize since I don't know much about jQuery.
I made this fiddle : https://jsfiddle.net/zv5dr670/4/
If you click to the big blue button, it's working fine and all items are toggling and vanishing.
What I want is to make work this button with an other button ( click2 button here).
<button class ="mycbutton">Click2</button>
It's almost working but the Menu9 is still here while the other items are gone.
Any advice ?
Thanks,
you need to use
$('.mycbutton').click(function(e) {
toggleOptions($(this).prev('.selector'));
});
cause your .mycbutton button not a parent of .selector so you need to use .prev()
DEMO HERE

jquery selectize error: issue with adding new select fields and combox-ifying them

I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.

Creating a dynamic form

I need to create a form which has 2(Yes/NO) options and if the user clicks one of the option then he should get a collapsing subform with more specifics regarding to that particular selection. If he selects other option then he should get another collapsing subform with related info. I know that we have to use JavaScript or Jquery(to get the collapsing effect), but I am new to both. Any simple tutorials or info for beginners is greatly appreciated.
PS: I have seen many questions for this requirement but the fact is me being a beginner makes it tough to understand them.
Thanks,
Basically, you are going to need to wrap the two different subforms in divs and then use the jQuery .show() and .hide() functions to show and hide them when the right radio button is clicked.
Here is a useful tutorial on showing and hiding: http://papermashup.com/simple-jquery-showhide-div/
EDIT: More specific answer for user..
$(document).ready(function(){
$("#check-box").click( function(){
if( $(this).is(':checked')) {
$('#div1').show();
} else {
$('#div1').hide();
}
});
});
You have to render the entire form and hide all the subforms, each with a different ID. Depending on the button/choice pressed, you call $.show() on the corresponding div with code like this:
$("#choice1_subform").click(function(){
$("#div1").show();
});

Categories