I just wanted to know how I could get the page scrolled to top when checkbox is selected using jQuery or JavaScript, knowing that there is some Angular JS code in there.
<div class="checkbox-list">
<div class="checkbox box-collapse-color" ng-repeat="Type in Types">
<span class="count pull-right">{{Type.count}}</span>
<input type="checkbox"
ng-click="addCompanyType(Type.ac)"
id="checkbox1-c-{{$index}}" />
<label class="check" for="checkbox1-c-{{$index}}">
<span>{{Type.ac}}</span>
</label>
</div>
</div>
Thanks in advance.
The easiest way is the following:
$window.scrollTo(0, 0);
It seems the code should be placed into your addCompanyType function, but I can't say definitely. I'd suggest looking at Angular JS ng-checked directive. Do not forget to inject $window.
Related
I am trying to get the label for a checkbox using jQuery. Here is my HTML:
<div class="checkbox">
<label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label>
</div>
I have tried:
$("label[for=:checkbox[value='sold']]");
I know that this works:
$(":checkbox[value='sold']");
Any ideas on how I can get this work?
You basically had it. Just needed the parent.
console.log($(":checkbox[value='sold']").parent());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label>
</div>
Please, refer this post
jQuery selector for the label of a checkbox
label-of-a-checkbox
you have to have a
your label tag doesnt have explicit for attribute but use the nested tags.
I'm writing a website where the user would hit a button to start.
Depending on which button they push, a new section on the page will appear.
More buttons in this section - hit one of those buttons and one of a few sections will appear.
I have code which is starting to get really long and messy.
So I was looking for a cleaner/better way of managing what needs to be visible at any one time.
I want to avoid installing something like angular/react/knockout - because it seems like a lot of overhead for just 1 page on a large(ish) website. So ideally just naked javascript or jquery.
But i'd also like to avoid pages and pages of javascript full of $('div1').show(); $('div2').hide();
etc
And it is becoming difficult to manage them all.
I've created a fiddle so hopefully you can see what I am trying to accomplish (it's only about 1/5 complete but already looking a mess):
https://jsfiddle.net/6w4mfndf/
But basically it's looking like this at the moment:
<div name="Group1">
<input name="group1" type="radio" id="btn1" />
<span>1</span>
<input name="group1" type="radio" id="btn2" />
<span>2</span>
<div>
<div name="group2">
<div id="div_btn1" style="display:none">
<input name="group2" type="radio" id="btn1_1" />
<span>1_1</span>
<input name="group2" type="radio" id="btn1_2" />
<span>1_1</span>
</div>
</div>
<script>
$(function () {
$('#btn1').change(function() {
if ($('#btn1').is(':checked')) {
$('#div_btn1').show();
$('#div_btn1_1').hide();
}
});
</script>
I am working with MVC if there is any kind of way that can be used to help model the data out. (Unlikely I'd guess, but just throwing it out there).
Any solutions I am missing?
Why not try to have a class that is shared by all the buttons which triggers the js and a data attribute that informs the js as to which div of content to show?
Something along these lines for example:
<div class="content-block" id="content1">
Content 1
</div>
<div class="content-block" id="content2">
Content 2
</div>
<button class="content-button" data-content-block="content1" value="content 1"></button>
<button class="content-button" data-content-block="content2" value="content 2"></button>
<script>
$(function () {
$(".content-block").hide();
$(".content-button").click(function() {
$(".content-block").hide();
var contentBlock = $(this).attr("data-content-block");
$("#" + contentBlock).show();
});
});
</script>
I have this html:
And I want to create dynamically ng-models for these inputs:
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="model$index" />{{$index}} please check
</div>
and it's not working.
I there a way to dynamically create ng-model in a input, inside a ng-repeat?
EDIT:
The final result is:
<input type="checkbox" ng-model="model$index" />0 please check
My expected result is:
<input type="checkbox" ng-model="model0" />0 please check
The way you are trying to do its not appropriate, creating separate
variable for each element, that will make more maintenance sort of
work.
Also this will become messy to when you apply any filter on ng-repeat. Instead of that you could place that model value inside the ng-repeat element which is order here order.
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="order.value" />{{$index}} please check
</div>
I've previously used popups with JQueryMobile 1.3 and older without problem. With the new 1.4 RC1 I'm finding my popups don't update when I select a different item.
You can see an example here with JQueryMobile 1.3
http://jsfiddle.net/vinomarky/56hQ9/
And another here using JQueryMobile 1.4RC1 - identical code, but the select box no longer updates when different options are chosen;
http://jsfiddle.net/vinomarky/B9TqL/1/
Any ideas of what to try? the code is as follows;
Lognormal
<div data-role="popup" id="popupBasic16">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="updown" id="updown46" value="Lognormal" checked="checked" />
<label for="updown46">Lognormal</label>
<input type="radio" name="updown" id="updown47" value="Normal" />
<label for="updown47">Normal</label>
</fieldset>
</div>
</div>
And Javascript
$('select').selectmenu();
$('#updown46').click(function () {
$('#log_or_norm .ui-btn-text').html('Lognormal');
$('#popupBasic16-screen').click();
document.select_choices.log_or_norm.value = "Lognormal";
$('select').selectmenu('refresh');
});
$('#updown47').click(function () {
$('#log_or_norm .ui-btn-text').html('Normal');
$('#popupBasic16-screen').click();
document.select_choices.log_or_norm.value = "Normal";
$('select').selectmenu('refresh');
});
Two methods
$('#log_or_norm').text('Normal');
Another
$('#log_or_norm ').empty().append('Lognormal');
Fiddle
http://jsfiddle.net/B9TqL/3/
Your Javascript has some errors as document.select_choices is not defined. If you want to update the value of your button use jQuery:
$('#log_or_norm').text("Lognormal");
It seems that in jQuery 1.4 they changed the HTML structure of the buttons, that's why your code $('#log_or_norm .ui-btn-text').html('Lognormal'); doesn't work. Check the full page of changes here.
Demo here.
I am building a set of radio buttons using the ngRepeat directive and I need to make it horizontal. I'm not sure it's possible to do that with ngRepeat, since each instance gets its own scope. The below structure creates a new div for each item in the options array and they're displayed vertically.
<div ng-repeat="option in options">
<input type="radio" role="radio" />
<span>label</span>
</div>
Does anyone know any tricks for creating horizontal radio buttons?
Angular doesn't really affect style in this way. Give your div float:left or display:inline-block in its style.
It should be noted that AngularJS from version 1.1.6 up allows one to do this much more cleanly:
Assume
$scope.data = [{val:0,txt:'Foo'},{val:1,txt:'Bar'},{val:2,txt:'Baz'}];
then you can use repeat-start and repeat-end like this:
<input ng-repeat-start="item in data" type="radio" value="{{item.val}}">
<span ng-repeat-end>{{item.txt}}</span>
Demo here: http://jsfiddle.net/rWLfZ/