Modified $

JavaScript
1

It seems it is not the correct coded when I transform $ into jQuery.

Which code is actually correct when using jQuery.noConflict();
Code is validated and it works but need to add $ = jQuery; in the correct way.


$(function ()
{
var $sections = $('.form-section');
function navigateTo(index) {

$sections
.removeClass('current')
.eq(index)
.addClass('current');

$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {

return $sections.index($sections.filter('.current'));
}

$('.form-navigation .previous').click(function()
{
navigateTo(curIndex() - 1);
}
);

$('.form-navigation .next').click(function()
{
if ($('.demo-form').parsley().validate('block-' + curIndex()))
navigateTo(curIndex() + 1);
}
);

$sections.each(function(index, section)
{
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
}
);
navigateTo(0);
}

);
2

Looking at the jQuery documentation it seems that something like this is needed.

jQuery.noConflict();
(function($) {
    $(function() {
            var $sections = $('.form-section');

            function navigateTo(index) {

                $sections
                    .removeClass('current')
                    .eq(index)
                    .addClass('current');

                $('.form-navigation .previous').toggle(index > 0);
                var atTheEnd = index >= $sections.length - 1;
                $('.form-navigation .next').toggle(!atTheEnd);
                $('.form-navigation [type=submit]').toggle(atTheEnd);
            }

            function curIndex() {

                return $sections.index($sections.filter('.current'));
            }

            $('.form-navigation .previous').click(function() {
                navigateTo(curIndex() - 1);
            });

            $('.form-navigation .next').click(function() {
                if ($('.demo-form').parsley().validate('block-' + curIndex()))
                    navigateTo(curIndex() + 1);
            });

            $sections.each(function(index, section) {
                $(section).find(':input').attr('data-parsley-group', 'block-' + index);
            });
            navigateTo(0);
        }

    );
})(jQuery);
3

Thank you for this message and help.
If I’m using INIT function how to transform your code into validated INIT but using (jQuery);

Code is the following:

TestingjQueryFunction = {
init: function() {
    var $sections = $('.form-section');

    function navigateTo(index) {

      $sections
      .removeClass('current')
      .eq(index)
      .addClass('current');

      $('.form-navigation .previous').toggle(index > 0);
      var atTheEnd = index >= $sections.length - 1;
      $('.form-navigation .next').toggle(!atTheEnd);
      $('.form-navigation [type=submit]').toggle(atTheEnd);
    }

    function curIndex() {

      return $sections.index($sections.filter('.current'));
    }

    $('.form-navigation .previous').click(function()
      {
        navigateTo(curIndex() - 1);
      }
    );

    $('.form-navigation .next').click(function()
      {
        if ($('.demo-form').parsley().validate('block-' + curIndex()))
          navigateTo(curIndex() + 1);
      }
    );

    $sections.each(function(index, section)
      {
        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
      }
    );
    navigateTo(0);
  }
}
4

My take on it is that you just put all your jquery code inside the ready function.

e.g.

jQuery.noConflict();
(function($) {
    $(function() {
      // all your jquery code goes here .. 
	   
	   
	  
	  });
})(jQuery);
5

You might pass jQuery into your init method like you’d do with an IIFE, like

const jQueryTest = {
  init: function ($) {
    var $sections = $('.form-section')
    // etc...
  }
}

jQuery.noConflict()
jQueryTest.init(jQuery)

EDIT: Alternatively, you might just .bind() jQuery to the init method like

const jQueryTest = {
  init: function ($) {
    var $sections = $('.form-section')
    // etc...
  }.bind(null, jQuery)
}

jQuery.noConflict()
jQueryTest.init()
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.