HTML
I am trying to create a todolist application. I wanted to make each task list to be removed with faded transition. I achieved it already but the problem with my code is that it only hide the first div area.
<div id="task">
<input type="checkbox" id="completed">
<h2>Buy some fruits</h2>
</div>
<div id="task">
<input type="checkbox" id="completed">
<h2>Buy some fruits</h2>
</div>
JQuery
$("#completed").change(function(){$("#item").fadeToggle("fast", "linear")});
Dont use mutipple id's on same page use class instead
<div class="task">
<input type="checkbox" class="completed">
<h2>Buy some fruits</h2>
</div>
<div class="task">
<input type="checkbox" class="completed">
<h2>Buy some fruits</h2>
</div>
$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")});
// same apply to your #item
You should not have multiple elements with the same id. The whole point of this attribute is to uniquely identify an element.
Replace it with something like:
<input type="checkbox" class="completed">
And your javascript accordingly:
$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")});
This should sort your problem out.
Try this:
<div>
<input type="checkbox" class="checkbox">
<h2>Buy some fruits</h2>
</div>
<div>
<input type="checkbox" class="checkbox">
<h2>Buy some fruits</h2>
</div>
<script type="text/javascript">
$(".checkbox").change(function(){$(this).parent().fadeToggle("fast", "linear")});
</script>
OR
<div>
<input type="checkbox">
<h2>Buy some fruits</h2>
</div>
<div>
<input type="checkbox">
<h2>Buy some fruits</h2>
</div>
<script type="text/javascript">
$("input[type=checkbox]").change(function(){$(this).parent().fadeToggle("fast", "linear")});
</script>
id of both input elements are same.
you can use class instead of id.
like below
$(".completed").change(function(){ } $(this).hide();});
pls modify this code as per u r
Related
I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>
I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>
It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)
The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?
Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>
You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.
I'm running into a roadblock. I have a simple piece of code:
<div ng-app>
<input type="checkbox" ng-model="element" />Hide Element
<div ng-if="!element">
<input type="text" ng-disabled="disable" />
<input type="checkbox" ng-model="disable" />Disable
</div>
</div>
This works fine, but I want the text and second checkbox split into multiple divs, both still dependent on the first checkbox, like:
<div ng-app>
<input type="checkbox" ng-model="element" />Hide Element
<div ng-if="!element">
<input type="text" ng-disabled="disable" />
</div>
<div ng-if="!element">
<input type="checkbox" ng-model="disable" />Disable
</div>
</div>
When I do this, the model does not get applied correctly and I'm unable to disable the text box by using the second checkbox. Am I misunderstanding the scope, or is this a bug?
I know with this example, I could wrap the two in an outer div, but my issue is that my structure is a table structure (yes, it's tabular data), where I don't want to hide an entire row, while keeping my markup as semantic as possible.
<table>
<tr>
<td></td> //this does not get hidden
<td></td> //this does not get hidden
<td></td> //this does not get hidden
<td></td> //THIS GETS HIDDEN
<td></td> //THIS GETS HIDDEN
</tr>
</table>
If you want to play, I set up a basic fiddle: http://jsfiddle.net/qkmv6wfh/
It is not a bug. The behavior you are seeing is because of the child scope created by ng-if. In your case the value set at the scope property disable is only available inside the child scope created by the second ng-if="!element" and disable inside the other block is in its own child scope. You can resolve it by setting it on an object reference where the object is initialized before any of these child scopes (ex ng-init="action ={}"), in this case both the child scopes refer to the same object reference action (as they get prototypically inherited) and modification on the property action.disabled gets reflected in both the places.
This can happen not just for ng-if any directive that creates a child scope like ng-repeat, ng-switch etc.
Read this well explained answer.
Try:
<div ng-app ng-init="action ={}">
<input type="checkbox" ng-model="element" />Hide Element
<div ng-if="!element">
<input type="text" ng-disabled="action.disable" />
</div>
<div ng-if="!element">
<input type="checkbox" ng-model="action.disable" />Disable
</div>
</div>
Bad Code Alert: I have used ng-init only for this demo purpose, you should not use ng-init for initializing. Always use a controller to initialize values on the scope.
Demo
angular.module('app', []).controller('Controller1', function() {
}).controller('dummy', function() {}).controller('Controller2', function($scope) {
$scope.action = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<p>With ng-init</p>
<div ng-init="action ={}" ng-controller="dummy">
<input type="checkbox" ng-model="element" />Hide Element
<div ng-if="!element">
<input type="text" ng-disabled="action.disable" />
</div>
<div ng-if="!element">
<input type="checkbox" ng-model="action.disable" />Disable
</div>
</div>
<p>With Controller As</p>
<div ng-controller="Controller1 as ctrl">
<input type="checkbox" ng-model="ctrl.element" />Hide Element
<div ng-if="!ctrl.element">
<input type="text" ng-disabled="ctrl.disable" />
</div>
<div ng-if="!ctrl.element">
<input type="checkbox" ng-model="ctrl.disable" />Disable
</div>
</div>
<p>With Controller and dot in the binding</p>
<div ng-controller="Controller2">
<input type="checkbox" ng-model="element" />Hide Element
<div ng-if="!element">
<input type="text" ng-disabled="action.disable" />
</div>
<div ng-if="!element">
<input type="checkbox" ng-model="action.disable" />Disable
</div>
</div>
</div>
Try with ng-show/hide instead:
<div ng-app>
<input type="checkbox" ng-model="element" />Hide Element
<div ng-hide="element">
<input type="text" ng-disabled="disable" />
</div>
<div ng-hide="element">
<input type="checkbox" ng-model="disable" />Disable
</div>
</div>
I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....
$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.
Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}
html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});