oguzhanoya / jquery-steps Goto Github PK

I am forced to include an anchor tag in my <li> which I do not want to do. Why cant we just do:

<li data-step-target="step1">
<li data-step-target="step2">

And later:

<div class="step-content" data-step-id="step1">
<div class="step-content" data-step-id="step2">

Does this hut accessibility?

I was curious if you'd mind publishing jquery-steps to npm? It looks like the name jquery-steps is taken, but you could change name in package.json to jquery.steps which is available and then npm publish and it'd allow for much easier package management when using webpack.

Range slider is not working when include jquery step js

Hi,
I am trying to get this working inside WordPress but keep getting this error:

Uncaught TypeError: can't access property "noop", $ is undefined and also

Uncaught TypeError: $(...).steps is not a function

The dist/jquery-steps.js is loading as depending on jQuery but still get this error. WordPress is running jQuery 3.5.1.
I already tried setting up de init script as below, but still getting the error. Do you have any advice?

<script> jQuery( document ).ready(function($) { $('#demo').steps({ onFinish: function () { alert('complete'); } }); }); </script>

I have few steps. When I switch to next dropdown selector is cutted to 1px. Only 1st selector displays correctly.
Someone had this bug before?

    $('#demo').steps({
        onFinish: function(1, 2, forward){return true;}
    });

Error : Uncaught SyntaxError: Unexpected number

i've been searching the source for a while now. but can't understand it. is there an api for programmatically changing the step?

Should these have spaces?

https://github.com/oguzhanoya/jquery-steps/blob/master/dist/jquery-steps.js#L70-L72

IE: $(".step-steps[data-step]") !== $(".step-steps [data-step]")

It looks to me like the code only allows you to prevent a forward change? Why can't we stop a backwards one?

bu demo sayfasının kodlarını paylaşbilir misin hocam güzelmiş
birde oraya diğer örnekleride atarsan bence tadından yenmez

I've installed the scripts and got the steps working - however, this causes the signature option in contact 7 to stop functioning and doesn't allow you to draw a signature.

If I remove the scripts for steps it works again so it does seem to be clashing with it.

There aren't any errors to work with which is frustrating.

Hi

Thank you for this amazing library.

In a new web app I have to create dynamic tabs with dynamics fields in them. I don't know how many tabs there are, and I don't know how many fields exists in each tab.

Thus on clicking next, I have to raise an event ( validationRequested) and wait for all fields of the current tab to validate and return. Some of those fields need to validate based on server, thus they might take even some seconds before validation results can be known.

Here's the code I come up with. But it does not work:

onChange: function (currentIndex, newIndex, stepDirection) {
	if (stepDirection === "backward" || stepDirection === "none") {
		return true;
	}
	if (app.allowChangeToNextStep) {
		app.allowChangeToNextStep = false;
		return true;
	}
	var stepFields = app.findScopeFields($('#wizardForm .step-tab-panel[data-step=step' + (currentIndex + 1) + ']'));
	var fieldsThatNeedValidation = app.filterFieldsThatNeedValidation(stepFields);
	app.validateForm(fieldsThatNeedValidation)
		.then(function (submissionResults) {
			if (submissionResults.success) {
				app.allowChangeToNextStep = true;
				wizard.data('plugin_Steps').next();
			}
			return false;
		})
		.catch(function (error) {
			console.error(error);
		});
	return false;
},

This causes to go forward two steps.

Can you provide built-in support for async scenarios?

For me, with the demo setup and hooking into the onChange event, the 'validate!' alert is showing 2 times when hitting next from step 2.

  <script>
    $('#wizard').steps({
      onFinish: function() {
        alert('yo');
      },
      onChange: function(currentIndex, newIndex, stepDirection) {
        if( stepDirection == 'forward' ) {
          alert('validate!');
        }
        return true;
      }
    });
  </script>

Yesterday, I tried to integrate this plugin into a WordPress site, and it failed. Upon investigating I found the plugin fails if jQuery.noConflict() is called. So, I tested it with stock jQuery from the jQuery site and added a noConflit and bam the same noop error.

Uncaught TypeError: Cannot read properties of undefined (reading 'noop')

It's the same closed issue posted at #19
But it isn't resolved actually.

Hello,

Is there a way to set doneClass to last step selecter on onFinish event?

with the demo setup and hooking into the onChange event, the 'validate!' alert is showing console.log() result depend on the number of the newIndex when hitting next from step 2.

 $('#demo').steps({
            onChange: function (currentIndex, newIndex, stepDirection) {
                if (stepDirection == 'forward') {
                    console.log("currentIndex " + currentIndex + " newIndex " + newIndex + "")
                }
                return true;
            },
            onFinish: function () {
                console.log("finished")
            }
        });

When add any logics (alert, console.log or call APIs) in "onChange" function, they will be carry out twice...I just use the alert do this test, I found when trigger onChange function, the alert will be show twice, could u please help to fix this issue?

Hi, Thanks for the great plugin. I want to know how to validate the form fields when moving forward?

When I try to return false when in the 4th index page to hold it to the next step, it goes directly to the first page, is there a way when the return false function stays on the current page ?

Here is the code condition, each function reverses a boolean value :

onChange: function onChange(currentIndex, newIndex, stepDirection) {
	    index = newIndex;
	      if (index==1){
	      		return sendData1();
	      } else if (index==2){
	      		return sendData2();
	      } else if (index==3){
	      		return sendData3();
	      } else if (index==4){
	      		return sendData4();
	      } else if (index==5){
	      		return sendData5();
	      } else if (index==6){
	      		return sendFinalData();
	      }
	  	  return true;
	    }