We Keep Coding

How to prevent select2.js from overriding custom changes?

I am experimenting with select2 by adding custom tags to it.
I do this with this code:
$(".js-example-basic-multiple")
.on("select2:selecting",
function() {
e.params.args.data.text = parentTarget + e.params.args.data.text;
});
I am using the multiple attribute BUT i am using the optgroup elemnt of the select list and it acts as a parentId container where only one element per container can be selected. This is solved but what i can not do is remove "MycustomTag" from previous selected option.
MycustomTag is either
Users
Or
Tank
And when selecting a new option i want to remove the Tank/Users tag on the previous selected option. In my debuging process i found that this is getting overriden in the change event but I can't figure out how to stopp it.
the code is pretty huge so I created a fiddle
How can I remove the tag that I am setting?

After some extensive detective work I found a very simple answer...
$(this).data().data.text = $(this).data().data.text.replace(parentTarget, "");
fiddle has been updated

How to force "selected" attribute for variation options in Woocommerce?

I'm developing a Woocommerce theme for one of my clients.
For this project, I needed to clone the cart form (on product pages) in order to display it in another place on the page.
I managed to do this with this piece of code :
$(document).on( 'found_variation', 'form.cart', function( event, variation ) { // found_variation // woocommerce_variation_select_change
$('.fixed-price-right').empty();
$(this).clone().appendTo( '.fixed-price-right' ).each(function() {
$('.product-fixi').scrollToFixed();
});
});
First, on each variation changes, I empty the div in which the form clone will be displayed.
Then, I clone it and made the container div fixed.
The problem is that I get everything except the selected variation value.
Actually, the default selected value got this attribute : selected="selected". But this attribute is not applied to other options.
You can see a living example here: http://www.pro4mance.com.au/product/produrance-energy-gels-2/
If I submit from the cloned form, the product is added but without option.
The weird thing is that if I add manually (from web console) this attr in the right option of the cloned form and then add the product to the cart, the product is added with all the good options.
I don't really know how to force the adding of selected="selected" on each change. Can someone please help me to manage it?
Thanks everyone!

For everyone who need to force the adding of the "selected" attribute on Woocommerce option variables, here's how I did it (using jQuery):
$('form.cart').on( 'change', '.variations select', function( event ) {
$val=$(this).val();
$(this).children('option').each(function(){
$childVal = $(this).val();
if ( $childVal == $val ) {
$(this).attr('selected', 'selected');
} else {
$(this).removeAttr('selected');
}
});
});
Feel free to improve it (that's maybe not the best way to do it).

I think you are going to have to look at the file cart.php within the WooCommerce templates folder. Use that to create your own custom cart file. Just run the loop a second time to get EXACTLY what you want, delivered directly from the server. ref: WordPress -- "the Loop" The actual line of code you are interested in is foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { For the WooCommerce cart, that's the top of the "loop". Add that line again, with your own customization to match your desired second copy of the contents of the shopping cart...
I'd recommend leaving jQuery out of it...
You obviously don't want to append directly within the WooCommerce package (in case of future updates)... (updates here!)
Wow, that seems very easy...
WooCommerce (and almost all add-ons) provides a templating system.
This means that every element displayed on a WooCommerce page can be
overridden.
This system’s advantage is that you can modify the display of an
element without editing WooCommerce core files (which is absolutely
NOT recommended, if you do so, all your modifications will be lost at
the next WooCommerce update, so just don’t do it). All templates are
located in a woocommerce/templates folder. As explained in our
documentation, all you have to do is to create a woocommerce folder
within your theme’s directory, and in this folder duplicate the files
you’d like to override. Please note that we strongly recommend using a
child theme in order not to lose any modifications during your theme
update.

Is there a way to add a javascript button that would remove an added graph

Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you

In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.

tinyMCE setting not found (2 parts)

Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.

In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.

jquery selectize error: issue with adding new select fields and combox-ifying them

I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/

Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.