Topic: Stepper-Click on button in Step1briefly shows data, then goes back to Step1
In Step2 there are three buttons (only the first button is operational in code sample). When the first button is clicked; momentarily you can see the contents of the hidden div before you end up back on the First Step. Obviously I do not want to go back to the First Step. If I copy the code for the buttons, undisplayed div and jquery script to a new file that does not include the Stepper, everything works fine.
After the page's code, I have included Chrome's developer tools console info that shows the error.
Resources (screenshots, code snippets etc.)
Keller Permits Hauling Unit Search
ul.horizontal-fix li a { padding: .84rem 2.14rem; } ul.stepper { margin-left: -2rem; } How Many Trailers? Trailer 1 Trailer 2 Trailer 3 Trailer 1 Search 107 205 306 Trailer Not Found! Add It As a New Unit? Yes Test $(document).ready(function() { $("#trailer1Btn").click(function() { $("#haulUnitCard").css("display", "block"); }); }) $(document).ready(function(){ $("#trailerAddBtn").click(function(){ $('#trailerUnitSearchResults').css("display","block"); $('#trailerUnitSearchResults').addClass('animated fadeInDown'); }); }) $(document).ready(function () { $('.stepper').mdbStepper(); }) function someFunction22() { setTimeout(function () { $('#horizontal-stepper-fix').nextStep(); }, 2000); }
Chrome Console Info: mdb.min.js:formatted:10105 Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.t.init (mdb.min.js:formatted:10105) at mdb.min.js:formatted:10175 LIne 10098: mdb.min.js:formatted:10105 Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.t.init (mdb.min.js:formatted:10105) at mdb.min.js:formatted:10175
Hi,
Are you using our sample example or something else? Can you use snippets to show me HTML code? ( Without js of course )
https://mdbootstrap.com/snippets/
Thanks!
eschroeder commented 6 years ago
I created a snippet. It is the same code that was embedded in the original message.
Piotr Glejzer staff commented 6 years ago
But I don't see your HTML code? I don't have any problems with this example https://mdbootstrap.com/docs/jquery/components/stepper/#long
eschroeder commented 6 years ago
Here is the code:
ul.horizontal-fix li a { padding: .84rem 2.14rem; } ul.stepper { margin-left: -2rem; } Step 1 Email CONTINUE Step 2 How Many Trailers? Trailer 1 Trailer 2 Trailer 3 Trailer 1 Search 107 205 306 Trailer Not Found! Add It As a New Unit? Yes Test $(document).ready(function() { $("#trailer1Btn").click(function() { $("#haulUnitCard").css("display", "block"); }); }) $(document).ready(function(){ $("#trailerAddBtn").click(function(){ $('#trailerUnitSearchResults').css("display","block"); $('#trailerUnitSearchResults').addClass('animated fadeInDown'); }); }) $(document).ready(function () { $('.stepper').mdbStepper(); }) function someFunction22() { setTimeout(function () { $('#horizontal-stepper-fix').nextStep(); }, 2000); }
Piotr Glejzer staff commented 6 years ago
I need HTML code, not a JavaScript code with 2 lines of CSS what you pasted before.
eschroeder commented 6 years ago
Step 1 Email CONTINUE Step 2 How Many Trailers? Trailer 1 Trailer 2 Trailer 3 Trailer 1 Search 107 205 306 Trailer Not Found! Add It As a New Unit? Yes Test
Hi eschroeder,
are you using the correct example without validation? Meaning: I have had the same issue because of the validation (mail) that was not correct filled in in step 1. Then you have the same behaviour as you explained above.
I think, what you need, is the non-linear stepper.
Hope this helps.
eschroeder commented 6 years ago
Hi 24, I am not using any validation at all. The error below shows-up in the Chrome console: Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.t.init (mdb.min.js:formatted:10105) at mdb.min.js:formatted:10175 This is the code that is flagged in the file: return t.init = function(t) { var e = document.body; "duration"in (t = t || {}) && (l.duration = t.duration), "delay"in t && (l.delay = t.delay), n && (e.addEventListener("touchstart", h, !1), e.addEventListener("touchcancel", d.registerEvent, !1), e.addEventListener("touchend", d.registerEvent, !1)), e.addEventListener("mousedown", h, !1) <--This is the bad line } ,
This is not HTML code:
Step 1 Email CONTINUE Step 2 How Many Trailers? Trailer 1 Trailer 2 Trailer 3 Trailer 1 Search 107 205 306 Trailer Not Found! Add It As a New Unit? Yes Test
This is a HTML Code :
<!-- Vertical Steppers -->
<div class="row mt-1">
<div class="col-md-12">
<!-- Stepers Wrapper -->
<ul class="stepper stepper-vertical">
<!-- First Step -->
<li class="completed">
<a href="#!">
<span class="circle">1</span>
<span class="label">First step</span>
</a>
</li>
<!-- Second Step -->
<li class="active">
<!--Section Title -->
<a href="#!">
<span class="circle">2</span>
<span class="label">Second step</span>
</a>
<!-- Section Description -->
<div class="step-content grey lighten-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere
iusto
quaerat
vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore
nostrum
ut,
nobis porro sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
totam,
atque odit fugiat.</p>
<p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe
reiciendis,
vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam
expedita ab
fugiat.</p>
</div>
</li>
<!-- Third Step -->
<li class="warning">
<a href="#!">
<span class="circle"><i class="fas fa-exclamation"></i></span>
<span class="label">Third step</span>
</a>
</li>
<!-- Fourth Step -->
<li>
<a href="#!">
<span class="circle">4</span>
<span class="label">Fourth step</span>
</a>
</li>
</ul>
<!-- /.Stepers Wrapper -->
</div>
</div>
<!-- Steppers Navigation -->
<div class="row mt-1">
<div class="col-md-12 text-right">
<button class="btn btn-flat btn-sm">Cancel</button>
<button class="btn btn-primary btn-sm">Next</button>
</div>
</div>
<!-- /.Vertical Steppers -->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.5
- Device: Desktop and Mobile
- Browser: Chrome 71.0.3578.9
- OS: Mac OS Mojave 10.14
- Provided sample code: No
- Provided link: No