Develop Reference

Slick slider function inside change function doesn't work

I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.
I have added data-attr to each slick slide that contain the colour name and use this to the slide index.
The slickgoto function works when I move it outside of the change function.
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
$( ".slider-for" ).slick( 'slickGoTo', slide_index, false);
});
Thanks

No sure the false is necessary. Have you tried:
$('.slide-for').slick('slickGoTo', slide_index);
Otherwise I would adjust it to:
var slideshow = $( ".slider-for" );
slideshow.slick({ ... });
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
slideshow.slick( 'slickGoTo', slide_index );
});
Hope this helps.

Retrieving jQuery data from dynamic HTML element returns undefined

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute.
My jQuery looks like this:
$( document ).ready( function() {
$( ".checkmark" ).on( "click", ( event ) => {
let checkBoxId = "#" + event.target.id, // #checkBox1
checkBoxData = event.target.id + "-value", // checkBox1-value
checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
} );
} );
The HTML element targeted looks like this:
<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>
The value of let checkBoxValue is undefined and I cannot figure out why.
Help would be greatly appreciated.

You can get attribute value of span using attr() function in jQuery
checkBoxValue = $(checkBoxId).attr(checkBoxData);

The checkBoxId variable is unnecessary because you can use the this keyword since it is the current element you are working with.
$(function() {
$(".checkmark").on("click", (event) => {
let checkBoxData = event.target.id + "-value";
let checkBoxValue = $(this).data(checkBoxData);
});
});

It seems you are having scope issues with the new ()=>{} syntax.
So, you will need to bind this to the function event handler using {self:this}. If you don't want to do this, you can use the old function(){} syntax instead.
$( document ).ready( function() {
$( ".checkmark" ).on( "click", {self:this}, ( event ) => {
var checkBoxValue = $(this).data("checkbox1-value")
alert(checkBoxValue);
} );
} );
And also as #Erwin mentioned, use only lowercase in your data- attribute name:
<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>
JsFiddle

It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be
<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>
for the .data() to work.

this code works for me try it ;)
$( document ).ready( function() {
$( ".checkmark" ).on( "click", function() {
var checkBoxId = "#" + $(this).attr('id');
var checkBoxData = $(this).attr('id') + "-value";
$( this ).attr('data-'+ checkBoxData, 155 );
} );
});
jsfiddle link

How to restore jeditable functionality?

I try to figure out, how to restore Jeditable fields after removing cells from table?
I have table where are
rows with one cell (colspan)
rows with many cells (rows with ID-s)
Rows with ID have a cell which contains some text and editable span-element (with Jeditable). Now when I click on button, I want to remove from rows with ID all cells and replace it with cell which contains only the span-element (which should remain editable).
Problem is: I can't restore editability for those recreated spans.
I tried different approaches, most simple should running $( '.editable' ).editable('enable'), but I can't figure out, why it does not working.
One of my efforts is like this:
$(document).ready(function(){
$("#remove").click(function() {
$("table#original tr").each( function( index, row ) {
if ( $( row ).attr( 'id' ) ) {
var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
$( row ).children( 'td' ).remove();
$("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
$( '.editable' ).editable('enable');
}
});
});
$('.editable').editable('echo.php', {
type : 'text',
tooltip : 'Just click...'
});
});
Made a Fiddle too, hope it helps to better understand my problem.

Problem
The issue seems to be that the editable object is being destroyed and when you attempt to re-enable it, it doesn't keep the same options so it fails.
Solution:
Abstract the options to a variable (for easier changes going forward)
var editableOptions = {
type : 'text',
tooltip : 'Just click...'
};
var editableURL = 'echo.php';
Update the .editable() call to use these new variables:
$(document).ready(function(){
$("#remove").click(function() {
$("table#original tr").each( function( index, row ) {
if ( $( row ).attr( 'id' ) ) {
var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
$( row ).children( 'td' ).remove();
$("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
$( '.editable' ).editable(editableURL, editableOptions)
}
});
});
$('.editable').editable(editableURL, editableOptions);
});
Working JSFiddle

You don't need to recreate editable field in new td cell. In fact you should not remove it in the first place. Proper way of handling this from perspective of performance and optimization is to create new td and move already initialized editable element to it. In this case you don't have to worry about reinitizing it one more time.
So your code will become:
$(document).ready(function () {
$("#remove").click(function () {
$("table#original tr").each(function (index, row) {
if (row.id) {
var editableField = $(row).find('.editable');
var newTd = $("<td colspan='3'></td>").append(editableField);
$(row).empty().append(newTd);
}
});
});
$('.editable').editable('echo.php', {
type: 'text',
tooltip: 'Just click...'
});
});
Demo: http://jsfiddle.net/jxtnd1g4/
Or a little shorter variation for the same thing:
$("#remove").click(function () {
$("table#original tr[id]").html(function() {
var editable = $(this).find('.editable');
return $('<td colspan="3"></td>').append(editable);
});
});

Copy all identified class to another class

If I click on the map, I copy all classes from class li class="salony" id="wojewodztwo-malopolskie" into class <div id="spisSalonow">. It's works correctly.
How can I do that, when I choice krakow from select(selector),Should I copy all classes with name krakow <div class="krakow"> into class <div id="spisSalonow">?
$( document ).ready(function() {
$("svg").delegate("*", "click", function(e) {
$('.st0').removeAttr('style');
var id = $(this).attr('id');
$(this).css("fill", "#ff6600");
//$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-' + id).html()).animate({opacity: 1}, 1000).slideDown(500);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-malopolskie').html()).animate({opacity: 1}, 1000).slideDown(500);
});
$("select" ).change(function() {
var allListElements = $(".krakow");
$( "#spisSalonow > div" ).find( allListElements );
var liczbaSalonow = jQuery('.' +$(this).val()).length;
//alert(jQuery('.' +$(this).val()).length);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('.' + $(this).val()).html()).animate({opacity: 1}, 1000).slideDown(500);
alert( $(this).val() );
});
});
JSFiddle

https://jsfiddle.net/4q8ud1pw/7/
Is this what you wanted?
Thanks to (jQuery get html of container including the container itself) for showing me how to include the container.
$("select" ).change(function() {
var html = '';
$(".krakow").each(function(){
html += $(this).wrap('<p/>').parent().html();
});
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html(html).animate({opacity: 1}, 1000).slideDown(500);
});

Jquery : Append jquery variable to a class name

My code
$( ".attachPo" ).click(function() {
alert($(this).attr('id')) // prints 59
var id = $(this).attr('id');
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
});
but which does not work for me , what is the correct vay of appending jQuesy variable to a class or id name

Your quotes aren't quite right. Change to:
$( '#attachPoForm_'+id).show();
This isn't a "jQuery variable", it's just simple Javascript variable and string concatenation.

Your selector is looking for an element with an id of (literally) #attachPoForm_"+id+", I think you mean:
$( '#attachPoForm_'+id).show();

Try this
$( ".attachPo" ).click(function() {
var id = this.id
$( '#attachPoForm_'+id).show(); // id name = attachPoForm_59
// ^^^^ Fixed the quotes here
});

$( ".attachPo" ).click(function() {
$( '#attachPoForm_'+ $(this).attr('id')).show(); //set id name = attachPoForm_59
});

A mistake at
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
should be
$( '#attachPoForm_'+id+'').show(); // id name = attachPoForm_59

Try to use this.id like,
$( ".attachPo" ).click(function() {
var id=this.id;
alert(id);
$("#attachPoForm_"+id).show(); // id name = attachPoForm_59
});