We Keep Coding

Disabling a button via JS if a specific element ID appears on page

I am trying to use JS to change an add to cart button to be disabled if our inventory level (displayed on the front end in a <span>) is "out of stock". This JS is already set up on our site for changing button behaviour for variants (code at the bottom of the post) and so if I can integrate an additional conditional rule using our inventory <span> that would be amazing.
Here's the HTML for when the out of stock message appears:
<span class="LocationNoStock">Currently Sold Out</span>
I honestly have almost zero experience with JS so all I know is that I can look for elements by class name:
(document.getElementsByClassName("LocationNoStock")
Basically I want to add logic that dictates:
if class 'LocationNoStock' exists then disable 'add-to-cart' button
Any help that can be offered would be much appreciated! If it helps, our current JS for modifying the add-to-cart button is as follows - if an additional rule to search for the <span> could be inserted and mimic the behaviour that would be amazing!
updateCartButton: function(evt) {
var variant = evt.variant;
if (variant) {
if (variant.available) {
// Available, enable the submit button and change text
$(selectors.addToCart, this.$container).removeClass(classes.disabled).prop('disabled', false);
$(selectors.addToCartText, this.$container).html(theme.strings.addToCart);
} else {
// Sold out, disable the submit button and change text
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.soldOut);
}
} else {
// The variant doesn't exist, disable submit button
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.unavailable);
}
},

Your using jquery $(...) so you could do the following, look for .LocationNoStock if it's found then disable the .add-to-cart button.
if ($('.LocationNoStock').length) $('.add-to-cart').attr('disabled', 'disabled')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="LocationNoStock">Currently Sold Out</span>
<button type="button" class="add-to-cart">Add to Cart</button>

To disable buttonin javascript on load, can be done by setting attribute of the element
Example :
setAttribute("style","color:red")
In your case you are fetching element using class "add-to-cart" which gives htmlcollection so using index you can access the button element and then using setAttribute function of javascript, can set particular properties.
Try this:
$(document).ready(function(){
if (document.getElementsByClassName("LocationNoStock") != null){
var element = document.getElementsByClassName("add-to-cart");
element[0].setAttribute("disabled", "");
}
});

Editing properties of objects individually and need "edit" boxes to open dynamically for each property

The backend is Python with Django Models. Below is what I have in the User Inteface.
When the user clicks the "edit" pen I want a textbox input to show up right beneath the previous value, also a "submit changes" button pops up at the top of the page. The user needs to be able to edit as many properties as desired and then submit all changes at once. My object has over 75 properties so the javascript will get really long and cumbersome if I create a unique function for each property. So far I have this:
html:
<button id="edit_submit" type="submit" form="job_text_edit">Commit Changes</button>
<form id="job_text_edit" action="pass to backend"></form>
<table class="z-depth-3">
<tr>
<td style="width: 200px">Job Name:</td>
<td>
{{job.job_name}}<i class="tiny material-icons" onclick="jobEdit()">edit</i>
<input id="job_name_i" name="job_name_i" type="text" form="job_text_edit">
</td>
</tr>
<tr>
<td>Work Schedule:</td>
<td>
{{job.work_schedule}}<a><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>
<input id="work_schedule_i" name="work_schedule_i" type="text" form="job_text_edit">
</td>
</tr>
</table>
javascript:
<script>
$(document).ready(function(){
$('#edit_submit').hide();
$('#job_name_i').hide();
$('#work_schedule_i').hide();
})
function jobEdit(){
$('#edit_submit').show();
$('#job_name_i').show();
$('#work_schedule_i').show();
}
</script>
The problem is that when you click any "edit" pens, all the edit boxes will pop up. Is there a way to let the function know which one was clicked so I can implement conditional statements in the function to show only the necessary boxes? I tried passing in a string with the input id but the function throws errors when given string arguments. Any help is greatly appreciated!

when you pull data from the back end, you need to pull through an id or some unique value also.
This value would be unique to each indiviudal row you show in your screenshot above, or an element in that row.
Then when you render your html, append the id (unique value) to the end of the current id (html id on the element)
So for example, where you have input id="job_name_i", you can add (append) the unique value (id) to the end of it upon rendering.
You can then, instead of passing through your function call in the onclick (and defining the onClick in the html), you can set up an event listener in the init part of your javascript like so:
$("[id^=job_name_i]").on('click', event => {
const clickedElement = $(event.target);
});
The above will listen for a click on any element that begins with
job_name_i (remember your unique value will be appended to the end of it.
So the above would go inside the below block.
$(document).ready(function(){
});
You now have access to the specific clicked element on the page, to do as you need, adding stuff below or above it. So you can access the ID with by using event.target.id and you can pass that in to your function.
Something like the following.
function jobEdit(id){
$(id).show();
// OR
$(someelement + id).show();
}

How to display collapse when checkbox clicked in Ember bootstrap?

I'm fairly new to Ember and I'm trying to implement a Collapse method when I have clicked on a checkbox as a part of my form. This checkbox is inside a collapsed section part of a button group I have in my form.
Template.hbs
{{#bs-button onClick=(action "toggle")}}
{{#if collapsed}}
{{form.element controlType="checkbox" label="View Additional Fields" property="additionalFields"}}
{{/if}}
<div>
{{#bs-collapse collapsed=collapsed}}
{{form.element controlType="checkbox" label="Property" property="property"}}
{{form.element controlType="textarea" label="Instructions:" name="instructions" property="instructions"}}
{{/bs-collapse}}
</div>
{{/bs-button}}
Component.js
collapsed: true,
actions: {
toggle() {
let toggleValue = !get(this, 'collapsed');
set(this, 'collapsed', toggleValue);
}
}
When running ember serve and I go to my form if I click on the checkbox an error pops up in Ember Inspector:
Assertion Failed: You cannot use the form element's default onChange action for form elements if not using a model or setting the value directly on a form element.
You must add your own onChange action to the form element in this case!
Error
If I change onClick to onChange then fields aren't displayed when I click the checkbox, but I still get the error. What would be the best way to go about trying to fix this problem?

The error you are facing has nothing to do with {{bs-collapse}} or your {{bs-button}} onClick action. It seems like your {{bs-form}} does not have a model property but ember-bootstrap requires that one if you don't that an onChange action to each {{form.element}}. You find details in ember-bootstrap api docs and in source code.

How to create a Dynamic input fields on button click using anuglar js?

I have a dropdown menu like this
[ShortAnswer- TextBox,Checkbox,Radio button and Drop down]
User can choose the input type and there can add the options by clicking the add option button like this
by clicking the cross icon the options need to be removed.
I reffered dynamic text area
http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/
But I need more reference about this, Please Suggest me an idea to achieve this using angular js.

Build your list of inputs from an array of objects that each define an input. On button click add a new object to the array that defines the input you want to add.
html:
<div ng-repeat="input in inputsList">
<span ng-click="remove($index)>x</span><input ng-if="input.type==='text'" type="text" />
<span ng-click="remove($index)>x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
...
</div>
<button ng-click="addNewCheckBox()">Add</button>
controller:
$scope.addNewCheckBox = function() {
$scope.inputsList.push({ type: 'checkbox' });
};
$scope.remove = function(index) {
$scope.inputsList.splice(index, 1);
};
It would probably be best if you had a custom input directive that took a config object and it would decide which input to build. But for the sake of simplicity and clarity I just used basic raw html inputs.
Let me know if that makes sense or you need an Angular2/4 answer.

Using JavaScript or JQuery to automatically check asp:checkbox when a button is pressed

I have a feature that allows the user to search the database for an item that matches the string they type in. For example, if they type in "Superman" it'll return whatever is in the database that is associated with Superman. Next to each item in the resulting list is a checkbox. If the user selects a checkbox, they can then press the "delete" button to remove that item from their list. I want to be able to select all of the checkboxes by pressing a "select all" button. Sometimes the lists are really long and if the user wants to delete all of the items, it would be time consuming to select and delete each one individually.
The checkbox is an asp:checkbox inside of an asp:TemplateField. The asp:TemplateField is inside an asp:GridView. Here is the checkbox code:
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="uxSelectAdd" runat="server" />
</ItemTemplate>
For the "select all" button, I'm using a regular input type:
<input type="submit" value="Select All" id="uxSelectAll" />
Here are the contents of the js file I'm using in my resources folder(I'm using the alert function for debugging. For some reason, the alert pops up when the page loads, rather than when I click on the button. Clicking the button doesn't do anything):
$(document).ready(function () {
$('#uxSelectAll').click(function (e) {
$(searchCheckBoxSelector).prop('checked', true);
alert("helloooo");
});
});
This is the js that is included in the front-end code at the top inside of a script tag:
<script type="text/javascript">
var searchCheckBoxSelector = '#<%=uxSearchedComics.ClientID%> input[id*="uxSelectAdd"]:checkbox';
</script>
I know that .live is no good since it's been removed in the version of javascript that we're now using, so I tried changing .live to .click instead. That didn't work. I also tried adding this js to the front-end instead of what was already there, just to experiment and see if this works:
<script type="text/javascript">
$(document).ready(function () {
$('#uxSelectAll').click(function () {
alert('hello world');
});
});
</script>
For some reason, that didn't work either. Am I missing something obvious? I wanted to at least get an alert to work before I tried adding in code to check all of the checkboxes for me but not even the alert works. I'd appreciate any help or nudges in the right direction.
Here are the .js files I'm using in the front-end code:
<script src="../../../../resources/js/ItemSlotEdit.js" type="text/javascript"></script>
<script src="../../../../resources/js/plugins/jquery-1.11.0.js" type="text/javascript"></script>

I want to share the solution I'm using. I've kept the input element exactly the same and this solution is in a separate js file that I've included into the .aspx front-end file.
$(document).ready(function () {
$('#body').on('click', 'input[type=submit]#uxSelectAll', function () {
$(this).toggleClass("checked");
var isChecked = $(this).hasClass("checked");
$('input[type=submit]#uxSelectAll').val(isChecked ? "Unselect All" : "Select All");
$(this).prev().find(":checkbox").prop("checked", isChecked);
return false;
});
});
The reason the button wasn't working before is because the button was in a div that doesn't exist when the page loads. The div appears after the user clicks the search button and the search results come in. The search results are populated into a div that appears dynamically. So, in order to access the button you need to include a parent container in the selector. Otherwise the event delegation doesn't go through. I used the #body container because I have only a single Select All button and a single checkbox so it doesn't conflict with anything. The toggleClass function alternates between giving and removing the "checked" class on each click, and you can modify the text of an input element by using the .val property.
I hope this helps someone.