We Keep Coding

Need help to target / modify custom data attribute

I am working on a website/webshop in WordPress with Woocommerce and tries to add a quantity field next to the 'add to cart' button.
I found this article/tutorial:
How to add quantity to product archives in WooCommerce (and keep ajax) - Christian Varga
http://christianvarga.com/how-to-add-quantity-to-product-archives-in-woocommerce-and-keep-ajax/
It got two small snippets - The first will work correct after copy/paste in my function.php file.
The second is some javascript code which will make the quantity field work together with the 'add to cart' button.
This is the code:
$('.input-text.qty', 'ul.products').on('change', function() {
$(this).closest('div').next('a').attr('data-quantity', $(this).val());
});
When I insert the javascript code nothing happens. It is because I use a custom theme (Avada) which has a different structure I guess.
This was also written on the tutorial:
*Note: This works with WooCommerce’s default HTML structure, but if you’re using a custom theme the HTML structure might be different, so
you’ll need to modify this script to suit.
Here is the link to my page:
http://frisk-matic.identitest.dk/kaffe/
I tried to target my 'add to cart' button but I cannot get it to work and I am not that skilled when it comes to Javascript.
Can someone help me? I would be so glad if I could get a little understanding how this code works.
I know that the first line is to select the quantity field we added and the products div and the result is to change the data-quantity attribute for the button.
Best regards
Samz3n

Try it like this
$('.input-text.qty').on('change', function() {
$(this).parent().next('a.add_to_cart_button').attr('data-quantity', $(this).val());
});

The problem is that your html markup is not the same with this template. I've inspected the markup and write some jQuery code. I think it will do the thing for you! :)
$('.quantity').find('input[type="number"]').on('change',function(){
$(this).parent().next('.product-buttons').find('.add_to_cart_button').data('quantity',$(this).val());
});

u might have some name collisions with your jQuery library, u can try this
var $ = jQuery;
$('.quantity').find('input[type="number"]').on('change', function () {
var value = $(this).val();
var button = $(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});
or better, use this until you fix naming collisions with jQuery
jQuery('.quantity').find('input[type="number"]').on('change', function () {
var value = jQuery(this).val();
var button = jQuery(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});

Can't programmatically select option using Select2

I have a Select2 working fine attached to a select list but when someone enters a new item and I rebind the select list and try to programmatically select the new item, it refuses to display.
There are a number of other posts re this but their solutions don't work for me.
Use .select2("val", value). Does nothing.
Use .select2("data", value). Does nothing. Not sure how this is supposed to be different.
Use the InitSelection option to set a value. This leads to the following error message: Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element.
In the Ajax success function after adding the new option to the database, I have the following Javascript:
BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[{id: "' + data.DishID + '", text: "' + data.DishName + '"}]';
$("#dd").select2("data", arr);
So in this latest iteration I have tried to supply an array with the id and text from the select list item as per another suggested solution but still nothing occurs. What am I doing wrong? Is this impossible when using Select2 with a select list?
Edit: I have the following line in MVC that creates the Select list:
#Html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new { id="dd",style="width:470px;" })
which must be causing the problem by binding to DishID from the model which was originally blank when it came from the server. DropDownGroupListFor is just an HTML helper that allows for using OptionGroups in a Select but it must be the binding that is a problem. What is the best approach here, to bind in a different way or to somehow update the model's DishID, not sure of the best practice?

var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change");

You need to destroy your select2 before adding/modifying items. If you do, then your select2 will respond just like its bound first time
Select2 Dropdown Dynamically Add, Remove and Refresh Items from

Get selected option

I want to fetch the selected option from dropdown. I know I can get selected option with jQuery(dropdown).val(). But I am not able fetch the selected with the 'val' function.
Am I doing anything wrong here?

Just use this:
var selectedValue = $('.daterange-preset').val();
(Note: I was able to see your code and get your class name by zooming in, but in the future please post the code rather than a screenshot.)

try using .on( "change" and then finding the option where selected has been applied. I have attached a jsfiddle with a working example that will alert you the value of the selected option everytime you change it.
$('.datarange-preset').on( "change", function(){
var datarangeSelected = $('.datarange-preset').find(":selected").val();
alert(datarangeSelected);
});
http://jsfiddle.net/g8hVA/

I figured out the issue. In my code at one place dropdown value was getting set with the null.
$daterangePreset.val(someVarialwithNullValue);
Because the value was getting set with null. I don't see any update in the HTML. HTML still shows one of the option as 'selected'. So when I was trying to get the selected value with following syntax it was always returning null.
$daterangePreset.val();

You can use a variant of:
var text = $("option:selected").text();
var value = $("option:selected").val();

Billing Address Same as Shipping Address jQuery

I am having trouble getting the Billing Address to copy over the Shipping Address using jQuery. I have successfully done this using a plain-jane form with no custom jQuery elements. But when I add the custom UI to the checkbox, it seems to break the code. I have tried several code changes but none of them are working.
When a user clicks on "My billing address is the same as my shipping address", nothing is happening. Here is my jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$('#check-address').click(function(){
if($('#check-address').attr('checked')){
$('#address-field1').val($('#address-field').val());
$('#city-field1').val($('#city-field').val());
$('#zip-field1').val($('#zip-field').val());
var state = $('#state-field option:selected').val();
$('#state-field1 option[value=' + state + ']').attr('selected','selected');
} else {
//Clear on uncheck
$('#address-field1').val("");
$('#city-field1').val("");
$('#zip-field1').val("");
$('#state-field1 option[value=Nothing]').attr('selected','selected');
};
});
});
</script>
Any help is greatly appreciated!

Demo of options
$('#check-address').attr('checked')
should could be
$('#check-address').is(':checked')
As pointed out in comments, there are many ways to skin this cat. http://jsfiddle.net/sRt6G/1/
this.checked seems to be the simplest.

You are using jquery 1.7 . You should use prop instead of attr
$('#check-address').prop('checked')
$(elem).attr('checked') // returned true (Boolean) prior to 1.6
$(elem).attr('checked') // now returns "checked" (string) versions after 1.6
$(elem).prop('checked') // now returns true (Boolean) versions after 1.6

The plugin you're using to prettify your checkbox (or whatever it does), is replacing the <input type="checkbox"/> with a div, and simulating events on the checkbox.
It doesn't propagate a click event, but it does propagate a change, so you should listen for that instead;
$('#check-address').change(/* function */);
To improve your code you might want to substitute the check for attr('checked') with prop('checked'), but your code will still work regardless. Reasons for this are outlined on the jQuery documentation for prop(); http://api.jquery.com/prop

It could be that you're trying to go on a click event of a checkbox. Have you tried:
$('#check-address').on('change', function (e) {...
and
if ($('#check-address').is(":checked")....

This might help too.
$('input[name=city\\[' + this.value + '\\]]').val($('input[name=city\\[1\\]]').val());
Demo
Fill out the form on top, then use the check boxes to copy the values of the fields.
It works with dynamically created fields. If the form is hard-coded, replace this.value with the index of the field.

you might wanna try the following code:
$("input.billingAddress").on("change",function(){
var val1 = $("input.street").val();
var val2 = $("input.suitNumber").val();
var val3 = $("input.city").val();
if(this.checked)
{
$("input.streetb").val(val1);
$("input.suitNumberb").val(val2);
$("input.cityb").val(val3);
}
else
{
$("input.streetb").val("");
$("input.suitNumberb").val("");
$("input.cityb").val("");
}
});

option:selected not triggering .change()

I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.

Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?

Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO

You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});

I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.