Comments (12)
I think you can close this issue.
I had the same problem but realized that I had the wrong order in loading the scripts.
from bs-stepper.
Hi @DanielCMorales,
It seems related on how you're using bs-stepper
, I can't help you more than that without a bit of your code
from bs-stepper.
This error means you pass something null
to bs-stepper
or you don't follow the needed structure 😟
I would love to see a live demo of the problem, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link.
Without that, I can't confirmed it's related to the libs, and it seems related to how you're using bs-stepper
from bs-stepper.
I'm still waiting for your live demo of the problem on CodePen/JS Bin or Stackblitz.
from bs-stepper.
@Johann-S here is the link to a pen I made: https://codepen.io/kingraphaii/pen/mdPeNRP
from bs-stepper.
Hi there Johann-S. I´m facing the same problem here.
I´m working under WP framework. Here is my code:
You can see dependencies here:
view-source:https://smrc.dev.bjaland.co/training/trainee-panel/?smrc_training_id=3782
HTML + PHP:
`
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label"><?php _e('Homework', 'almazen'); ?></span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label"><?php _e('Webinar', 'almazen'); ?></span></span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">4</span>
<span class="bs-stepper-label"><?php _e('Certificate', 'almazen'); ?></span></span>
</button>
</div>
<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
<!--
FILIII
poner una foreach con los vídeos que estén en un meta del training
incluir en cada vídeo el attr data-smrc-video-watched
Poner un div en frente del vídeo que al pinchar desaparezca y muestre el vídeo con la clase que teníamos preparada -btn
En el server enviar el dato y luego poner en el panel del training que está visto todos los vídeos.
-->
<div class="smrc-sub-step-videos mb-50">
<h4 class="text-align-center"><?php _e('Training Videos', 'almazen'); ?></h4>
<?php if(empty(get_post_meta($smrc_training_id, 'smrc_training_related_videos'))) {
echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="No videos found" smrc_call_to_action_content="Oppsss! We haven´t found any video associated with this training"]');
}else{
if (empty(get_user_meta($smrc_user_id, 'smrc_trainer_training_video_finished', true)[$smrc_training_id])) { echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="Videos not shown" smrc_call_to_action_content="You have not seen all the training videos. Please complete the viewing of all the proposed videos."]');
}else{
echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_turned_in" smrc_call_to_action_title="Videos shown" smrc_call_to_action_content="Hooray! You have completed the viewing of all the proposed videos</a>"]');
} ?>
<div class="row">
<?php foreach (get_post_meta($smrc_training_id, 'smrc_training_related_videos', true) as $video_key => $video_url) { ?>
<div class="col-md-4 text-align-center">
<div>
<div class="smrc-training-video-watch-btn" data-smrc-video-watched="false">
<p class="color-white mt-40 mb-10">Video <?php echo ($video_key + 1); ?></p>
<i class="material-icons font-size-50 color-white">play_circle_outline</i>
</div>
</div>
<?php echo wp_oembed_get($video_url);; ?>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<div class="smrc-sub-step-homework mb-50">
<h4 class="text-align-center"><?php _e('Training Homework', 'almazen'); ?></h4>
<?php if (empty(get_user_meta($smrc_user_id, 'smrc_trainer_training_homework_finished', true)[$smrc_training_id])) { ?>
<p><?php _e('', 'almazen'); ?></p>
<?php echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="Homework not received" smrc_call_to_action_content="You still haven\'t turned in the homework</a>"]'); ?>
<div class="text-align-center margin-auto">
<a href="#" class="smrc-btn smrc-training-homework-finish-btn"><?php _e('Send now', 'almazen'); ?></a><img class="smrc-waiting" style="display:none;" src="/wp-content/uploads/2019/07/ajax-loader.gif" alt="<?php _e('loading from SMRC...', 'almazen'); ?>"/>
</div>
<?php }else{
echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_turned_in" smrc_call_to_action_title="Homework received" smrc_call_to_action_content="Hooray! You have turned in the homework</a>"]');
} ?>
</div>
</div>
<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
<?php echo do_shortcode('[smrc-webinar smrc_webinar_id="6470370634"]'); ?>
</div>
<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
<p>More things here.</p>
</div>
JQUERY
<script> jQuery(document).ready(function($) { var smrc_stepper = new Stepper($('.bs-stepper')); }); </script>
Thanks in advance!
from bs-stepper.
Something was wrong formatting the code. I attach the complete
bs-steps.txt
function in txt.
from bs-stepper.
same here
i'm using it with webpack and even using it as
import Stepper from 'bs-stepper';
don't work... same error as everybody above
tried make a function attached to the window and call it from my view like:
import Stepper from 'bs-stepper';
window.startStepper = el => {
return new Stepper(el);
};
and in my view:
<script>
startStepper(document.querySelector('.bs-stepper'));
</script>
but that don't work too.
Edit: i read the documentation and inspected the examples html, so, just to be clear, when i tried use this plugin, i just copied the HTML from the README, but in your examples all the items have the "active" class in the first content item, so i tried put it in my stepper and the error gone, but the stepper buttons keep gray and clickable.
i think the issue is the plugin set the className to those elements.
from bs-stepper.
I'll try this later, maybe not today as i have a lot of work here to do.
from bs-stepper.
Uncaught TypeError: Cannot read property 'classList' of null
also means that
the selector cannot find a html object with bs-stepper
class
please recheck the html where you load the script is it contain a html object with bs-stepper
class
from bs-stepper.
Is there any update on this issue? I am still getting the same issue. I tried to implement it on a React
.
from bs-stepper.
I got the error as long as the bs-stepper-content didn't have all data-targets from the bs-stepper-header as a div id
So you need a div with a corresponding ID for exactly every data target.
For example, as long as you have 5 steps in the header and 4 or 6 in the content, the error occurs
from bs-stepper.
Related Issues (20)
- Not entirely responsive HOT 1
- How to get current index of the stepper? HOT 3
- `DevTools failed to load SourceMap` for both js and css files.
- Bootstrap 5 support HOT 1
- How do I get each field of the form in POST
- Fit stepper header to parent div HOT 1
- Is it compatible with Bootstrap 5? HOT 1
- Bootstrap Tabs
- Can anyone please help for functional component ? HOT 3
- Half linear stepper
- V-for not working in bs-stepper
- How to pass data First Stepper to Second Stepper. HOT 1
- how i can pass my form data on first step to second tab using top header navigation
- Can't find "bs-stepper.min.js" file
- Non-linear issue when using constructor
- Cannot read properties of null (reading 'classList') at bs-stepper.js:265:17 HOT 1
- Please give example of Form validation in angular HOT 2
- Uncaught TypeError: Cannot read properties of null (reading 'classList') HOT 2
- How to reset the form & move to first step on sumbit ?
- when using bs-stepper the second part of form doesn't sed data
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bs-stepper.