Form event tracking

[toplisek]

I have seen good script but using $ as main element:
<script>
(function($) {
$(document).ready(function() {
$('form :input').blur(function () {
if($(this).val().length > 0 && !($(this).hasClass('completed'))) {
dataLayer.push({'eventCategory': 'Form - ' + $(this).closest('form').attr('name'),
'eventAction': 'completed',
'eventLabel': $(this).attr('name'),
'event': 'gaEvent'});
$(this).addClass('completed');
}
else if(!($(this).hasClass('completed')) && !($(this).hasClass('skipped'))) {
dataLayer.push({'eventCategory': 'Form - ' + $(this).closest('form').attr('name'),
'eventAction': 'skipped',
'eventLabel': $(this).attr('name'),
'event': 'gaEvent'});
$(this).addClass('skipped');
}
});
});
})(jQuery);
</script>

Is this transformation correct?
(function(jQuery) {
jQuery(document).ready(function() {
jQuery('form :input').blur(function () {
if(jQuery(this).val().length > 0 && !(jQuery(this).hasClass('completed'))) {
dataLayer.push({'eventCategory': 'Form - ' + jQuery(this).closest('form').attr('name'),
'eventAction': 'completed',
'eventLabel': jQuery(this).attr('name'),
'event': 'gaEvent'});
jQuery(this).addClass('completed');
}
else if(!(jQuery(this).hasClass('completed')) && !($(this).hasClass('skipped'))) {
dataLayer.push({'eventCategory': 'Form - ' + jQuery(this).closest('form').attr('name'),
'eventAction': 'skipped',
'eventLabel': jQuery(this).attr('name'),
'event': 'gaEvent'});
jQuery(this).addClass('skipped');
}
});
});
})(jQuery);

[Fotiman]

You missed one:
else if(!(jQuery(this).hasClass('completed')) && !($(this).hasClass('skipped'))) {

Note, I'm not sure why you would want to replace alll $ with jQuery. It increases the size of your code and doesn't improve readability (in fact, I would say it makes it less readable).

[toplisek]

I have all code verified


<script type='text/javascript'>
jQuery.noConflict();
</script>

Is there better solution to replace $ with existing verification?

[Fotiman]

To make sure I understand, you have another library that's using $.
In the code you posted, if you don't need to use the other library (and it doesn't appear that you do), then what you had originally was correct. You passed in the jQuery object to your function, and had it locally scoped to a $ variable. See the example in the jQuery documentation here:
[api.jquery.com...]

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
 
// Other code using $ as an alias to the other library

An alternative would be to give jQuery a different alias, as in this example:
[api.jquery.com...]

var j = jQuery.noConflict();
 
// Do something with jQuery
j( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";

[toplisek]

Thank you for your reply.

I have an issue that I put per your instructions:
jQuery.noConflict();
var DEMO = $.noConflict();

How to avoid an error? TypeError: $ is not a function
At the end you see

$(document).ready(function() {
DEMO.init();
Script:

var DEMO = (function( $ ) {
'use strict';

var $grid = $('#grid'),
$filterOptions = $('.filter-options'),
$sizer = $grid.find('.shuffle__sizer'),

init = function() {


// None of these need to be executed synchronously
setTimeout(function() {
listen();
setupFilters();
setupSorting();
setupSearching();
}, 100);

// You can subscribe to custom events.
// shrink, shrunk, filter, filtered, sorted, load, done
$grid.on('loading.shuffle done.shuffle shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
// Make sure the browser has a console
if ( window.console && window.console.log && typeof window.console.log === 'function' ) {
console.log( 'Shuffle:', evt.type );
}
});

// instantiate the plugin
$grid.shuffle({
itemSelector: '.picture-item',
sizer: $sizer
});

// Destroy it! o_O
// $grid.shuffle('destroy');
},

// Set up button clicks
setupFilters = function() {
var $btns = $filterOptions.children();
$btns.on('click', function() {
var $this = $(this),
isActive = $this.hasClass( 'active' ),
group = isActive ? 'all' : $this.data('group');

// Hide current label, show current label in title
if ( !isActive ) {
$('.filter-options .active').removeClass('active');
}

$this.toggleClass('active');

// Filter elements
$grid.shuffle( 'shuffle', group );
});

$btns = null;
},

setupSorting = function() {
// Sorting options
$('.sort-options').on('change', function() {
var sort = this.value,
opts = {};

// We're given the element wrapped in jQuery
if ( sort === 'date-created' ) {
opts = {
reverse: true,
by: function($el) {
return $el.data('date-created');
}
};
} else if ( sort === 'title' ) {
opts = {
by: function($el) {
return $el.data('title').toLowerCase();
}
};
}

// Filter elements
$grid.shuffle('sort', opts);
});
},

setupSearching = function() {
// Advanced filtering
$('.js-shuffle-search').on('keyup change', function() {
var val = this.value.toLowerCase();
$grid.shuffle('shuffle', function($el, shuffle) {

// Only search elements in the current group
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
return false;
}

var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
return text.indexOf(val) !== -1;
});
});
},

// Re layout shuffle when images load. This is only needed
// below 768 pixels because the .picture-item height is auto and therefore
// the height of the picture-item is dependent on the image
// I recommend using imagesloaded to determine when an image is loaded
// but that doesn't support IE7
listen = function() {
var debouncedLayout = $.throttle( 300, function() {
$grid.shuffle('update');
});

// Get all images inside shuffle
$grid.find('img').each(function() {
var proxyImage;

// Image already loaded
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}

// If none of the checks above matched, simulate loading on detached element.
proxyImage = new Image();
$( proxyImage ).on('load', function() {
$(this).off('load');
debouncedLayout();
});

proxyImage.src = this.src;
});

// Because this method doesn't seem to be perfect.
setTimeout(function() {
debouncedLayout();
}, 500);
};

return {
init: init
};
}( jQuery ));



$(document).ready(function() {
DEMO.init();
});

[toplisek]

I have solved. Var $=jQuery...