Stepper-Click on button in Step1briefly shows data, then goe

Topic: Stepper-Click on button in Step1briefly shows data, then goes back to Step1

eschroeder free asked 5 years ago

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

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

<p>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</p>

<ul class="stepper stepper-vertical">

<li class="completed">
        <a href="#!">
          <span class="circle">1</span>
          <span class="label">First step</span>
        </a>
      </li>

<li class="active">

<a href="#!">
          <span class="circle">2</span>
          <span class="label">Second step</span>
        </a>

<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>

<li class="warning">
        <a href="#!">
          <span class="circle"><i class="fas fa-exclamation"></i></span>
          <span class="label">Third step</span>
        </a>
      </li>

<li>
        <a href="#!">
          <span class="circle">4</span>
          <span class="label">Fourth step</span>
        </a>
      </li>

</ul>

</div>
</div>

<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>

</code></pre>

Please insert min. 20 characters.

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 -->

Add comment

twentyfour pro answered 5 years ago

0 0 Best answer

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 free commented 5 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 } ,

Please insert min. 15 characters.

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

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 free commented 5 years ago

I created a snippet. It is the same code that was embedded in the original message.

Piotr Glejzer staff commented 5 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 free commented 5 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); }

<p>Here is the code:

</p>

<p>

</p>

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);
}

Please insert min. 15 characters.

Piotr Glejzer staff commented 5 years ago

I need HTML code, not a JavaScript code with 2 lines of CSS what you pasted before.

eschroeder free commented 5 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

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

eschroeder

15Support score
3Questions 0Answers 3Snippets