Bootstrap switch doesn´t works - javascript

I am starting with Bootstrap switch.
I have used the demos from http://www.jque.re/plugins/version3/bootstrap.switch/
The problem is that the switch doesn´t shows. It shows only a standard checkbox.
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked>
</div>
I also have included the css and js staff.
JSFiddle:
http://jsfiddle.net/crtLwdg4/
What am I missing here?

I just added this to the fiddle and it seems the appearance has changed.
$(function() {
$('.make-switch').bootstrapSwitch();
});
It seems you need to initialize the switch manually. I have only taken a glance at the docs but this actually changed the appearance of the checkbox.
UPDATE
I was able to get it working by adding a name property to the input and changing the jquery accordingly. see this updated fiddle.

Related

onchange event crashes entire page

I am Trying to add an onchange function to three separate elements that will rebuild the calendar if the user changes day, month, or year. The page loads and works fine until I change one of the three values, then it returns only the basic calendar with no css formatting, and all of the other elements from the page are gone. No errors are shown in developer tools.
I have looked at many examples online and I think my syntax is correct. I am calling the function initially on page load, which works fine.
<div id="bottomleft">
<script type="text/javascript" onload="buildCalendar();">
</script>
</div>
I am then calling it on change for each of the three elements as shown below.
<input type="number" min="1" max="31" step="1" id="myday" onchange="buildCalendar();">
<select id="mymonth" onchange="buildCalendar();">
<input type="number" min="100" max="2016" id="myyear" onchange="buildCalendar();">
My full CODEPEN is here: http://codepen.io/anon/pen/qbEXpJ however for some reason the calendar is not displaying here, although it works fine in chrome.
Please let me know if you see any errors.
When you are doing:
document.write("foo")
You are actually overriding the entire page, that's why you are getting everything without css format in the OnChange events. Sounds weird that it actually works with the onload, but you can see in CodePen it won't work there. Try to set up a div and write on it:
$("#myDiv").html("foo")

Display a div based on a checkboxes' value

I have a div in a form (#sides) that I only want displayed when one checkbox (.opp-choice-checkbox) is not checked. Here's the code I have right now:
jQuery ->
if !$(".opp-choice-checkbox").checked
$("#sides").hide()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
A similar question is asked a lot, but the difference with my question is that when I go to edit the object the form is for, sometimes the checkbox is checked by default. In that situation, I want the div to be showing when the page is loaded. The code I have right now hides the div by default, regardless of whether or not the checkbox is checked
UPDATED
Your code working perfectly with the little update mentioned below, See Working fiddle for your code:
CoffeeScript :
You have just to add the else in your condition to show the div if the checkbox is checked :
jQuery ->
if !$(".opp-choice-checkbox").is(":checked")
$("#sides").hide()
else
$("#sides").show()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
If sometimes you have a chekcked checkbox by default, you have just to remove condition and replace your coofee code by the following :
jQuery ->
$(".opp-choice-checkbox").change ->
$("#sides").slideToggle()
See fiddle HERE.
I hope this will help.
$(".opp-choice-checkbox") doesn't have a checked property - that's a jQuery element. To get the regular DOM elem, use [0]
$(".opp-choice-checkbox")[0].checked
Or, use .is("checked")
$(".opp-choice-checkbox").is("checked")
If this is all attached to a change or click event, just run that event on load to trigger the behavior, ($(elem).change(function() { }).change())

Show one element in Angular based on select input

Hi I am trying in my AngularJS code, I am trying to show just the appropriate currency based on which currency is chosen from the select . I simplified my code down to just the barebones of what I accomplished so far. I appreciate the help. Thank you. See below http://jsbin.com/najih/1/edit
UPDATE: I have gotten the code to show one value but now the drop down doesn't update the list see the code. http://jsbin.com/najih/3/edit
UPDATE: Ok so I found that on my fiddle it works in IE and Firefox but not Chrome and Safari. Anyone know a reason why?
First you should use ng-options="rate.Name for rate in shots. Then attach a model on the select:
<select ng-model="rate" ng-options="rate.Name for rate in shots"></select>
Now you have the selected rate available and based on your question, which i dont realy understand from this point, you could create a radio button:
<label>
<input type="radio" ng-model="radiorate" ng-value="rate"> {{ radiorate.name }}
</label>
But this doesn't make much sense to me.

disable jquery-chosen dropdown

I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,
$('#foobar').disable()
or this
$('#foobar').prop('disabled', true)
I think you get the idea.
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.
Thanks for the help!
You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
$('#foobar').prop('disabled', true).trigger("liszt:updated");
//For non-older versions of chosen you would want to do:
$('#foobar').prop('disabled', true).trigger("chosen:updated");
I found the information here
Fiddle
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.
In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:
$(".chosen-select").attr('disabled', true).trigger("chosen:updated")
Here's a JSFiddle.
PSL was correct, but chosen has been updated since.
Put this after you do the disabling:
$("#your-select").trigger("chosen:updated");
$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!!
#chosen v1.3.0
You can try this:
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
$("chosen_one").chosen({
max_selected_options: -1
});
$(document).ready(function () {
$("#foobar").chosen().on('chosen:showing_dropdown',function() {
$('.chosen-select').attr('disabled', true).trigger('chosen:updated');
$('.chosen-select').attr('disabled', false).trigger('chosen:updated');
$('.search-choice-close').hide();
});
$('.search-choice-close').hide();
});

innerHTML ignores DOM changes for checkbox and radio input in IE8

I would like to get the updated DOM html string for the form elements (e.g. <input type="text">, <input type="radio">, <input type="radio">, <textarea>).
I found this question and I am trying to use the formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The problem is that it works in Firefox and Chrome but only works partially in IE8 (I have not tested other versions).
If you open the following page in IE8, you can see there is a text box, some checkboxes and radios. Try entering some text and check the checkboxes and radios.
http://jsfiddle.net/e9j6j/1/
Then click on the 'Click' button.
You can see that no matter I am retrieving the html string through the innerHTML property of a native DOM object or by using the formhtml() function of the plugin. The html returned only reflects the changes in the value attribute of the textbox, you can never see the checked="checked" attributes in <input type="radio"> and <input type="checkbox"> even you have already checked them before clicking the button.
Why is this happening, and how I can make it work in IE?
Thanks in advance.
EDIT:
I am sorry. I made some mistakes in my question, now it has been rewritten.
EDIT:
The sample codes were created to demonstrate my problem but I made some mistakes. Both IE7 and IE8 do give expected results (I also did the tests again).
In my original codes, I do not directly use formhtml() function on the $('#div1') but rather clone it before using formhtml() like this:
alert($('#div1').clone().formhtml());
And on IE8 with jQuery 1.3.2, the returned html does not reflect the checked states of those checkboxes and radios, I never thought it would be the problem of the clone() function that's why when I created the sample codes, I did not clone it and so the actual problem failed to be demonstrated.
The updated sample codes are here (with jQuery version changed to 1.3.2):
http://jsfiddle.net/e9j6j/4/
This may show the problem of the clone() function on IE8 (I don't have IE8 right now, I will test it when I am home, I will report later).
EDIT:
I have just did the test. It's really the problem of clone() function in jQuery 1.3.2 on IE8. It fails to copy the states of checkboxes and radios. After changing it to jQuery 1.5.1. It works perfectly.
I tried the test case at http://jsfiddle.net/e9j6j/1/ on IE8 and IE7 and they worked for me.
Steps to replicate problem:
Load http://jsfiddle.net/e9j6j/1/ in IE browser.
Enter text in the text field, check first radio button, check first checkbox.
Press 'Click' button.
Expected result:
Both alerts show value on text field and 'checked' state on first radio & first checkbox.
Actual result:
As expected. However, bear in mind that IE's representation of the DOM means that checked="checked" is actually reported as CHECKED but it is correct.
UPDATED:
Added a test to ensure that the checked state can be copied to a new dom node:
$('#btn1').click(function() {
alert($('#div1').formhtml());
alert(document.getElementById('div1').innerHTML);
var div1 = $('#div1');
div1.clone().insertAfter(div1);
});
This creates another set of fields which retain the original input state.
View on jsfiddle.

Categories