Drag and Dropping Components that rely on Javascript Not Working

Beginners
1

So here I am, making my own website. When I come to the realization that I have too many images to put into a single section and an idea blooms into my head. How good would one of those caroussel thingies look!

Then to my dismay as I drag one of them into the page and nothing works. JS mode is on, but that doesn’t seem to help. I reload the page in Firefox, nope, not working either. I try the same with a dropdown, yep, not feeling very droppy. Updated from V5 something to V6 somethingelse and still jack.

I’ve skimmed the tutorial sections but any mentions of JS are rather sparse, plus I couldn’t find a mention of this issue. Did I skip a step somewhere or is this working as intended?

Help pretty please? :3

2

Hello there and Happy new year!

Im afraid the sites Psychic Site Reader Is on holiday at the mo, so,
You MIGHT just get a bit further, if you post a bit of the html/css/js code you have posted,
OR someone far cleverer than me might ask for screen shots of some relevant bits of the PG Interface.

So, welcome aboard, and feel free to do a bit of a copy and paste of your code or stick it up on some codepen.io sort of code sharing site.

Yes, tongue in cheek :slight_smile:

but here you go,

the image on that Link will show you which icon to use to paste pre formatted code.

or here is the direct instructional image

So give that a go and add a bit more detail if you could.
and good luck with it and the ensuing help you will undoubtedly recieve. I just thought Id throw this in the mix for you to get the ball rolling while you wait.

Cheerio

3

Hi @Arkyon,
Ignore the @schpengle behind the curtain! Although, he has a bit of a point.
I’m guessing that you are using Bootstrap 5? Has the ‘bootstrap.min.js’ script been added to the page (this should be automatic if you started with a Bootstrap page)? Any errors in the console (in the browser DevTools)? Any other info would be helpful.
Cheers,
Bob

1 Like
4

@RobM
@schpengle

So I did check the console on Firefox and it seems like there are a few things that look like they’re not quite supposed to be there.

image
image807×163 6.43 KB

Also, I’ve checked and I appear to be running Bootstrap 4 (I should probably upgrade now that I realize I’m using legacy libraries). Assuming by looking at all the mentions of Bootstrap 4 in the list panel.

Also I’ve found the boostrap.min.js inside \bootstrap\js And it also seems to be mentioned here in the html file so I assume it should’ve been added.

Also I believe I began working on the page from the Index.html preset.

<div class="dropdown"> 
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                    Dropdown button                </button>                 
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> 
                </div>                 
            </div>
            <div id="carousel1" class="carousel slide" data-ride="carousel"> 
                <ol class="carousel-indicators"> 
                    <li data-target="#carousel1" data-slide-to="0" class="active"></li>                     
                    <li data-target="#carousel1" data-slide-to="1"></li>                     
                    <li data-target="#carousel1" data-slide-to="2"></li>                     
                </ol>                 
                <div class="carousel-inner"> 
                    <div class="carousel-item active"> 
                        <img class="d-block w-100" src="http://pinegrow.com/placeholders/img11.jpg" alt="First slide"/> 
                        <div class="carousel-caption d-none d-md-block"> 
                            <h3>Slide label 1</h3> 
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                        </div>                         
                    </div>                     
                    <div class="carousel-item"> 
                        <img class="d-block w-100" src="http://pinegrow.com/placeholders/img13.jpg" alt="Second slide"/> 
                        <div class="carousel-caption d-none d-md-block"> 
                            <h3>Slide label 2</h3> 
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                        </div>                         
                    </div>                     
                    <div class="carousel-item"> 
                        <img class="d-block w-100" src="http://pinegrow.com/placeholders/img13.jpg" alt="Third slide"/> 
                        <div class="carousel-caption d-none d-md-block"> 
                            <h3>Slide label 3</h3> 
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                        </div>                         
                    </div>                     
                </div>                 <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
            </div>
        </div>
        <script src="assets/js/popper.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

(For reference, the items I’m trying to get to work are straight off the shelf “components”)

Ok thanks. Do you fine folks need any more info?

5

Hi @Arkyon,
I’m not sure how you “created” the page in the first place. If you use the Pinegrow “New Page or Project”, or turn on Bootstrap 4 from the “Manage Libraries & Plugins” menu item, both should add all of the needed libraries. With Bootstrap 4 you will need jQuery. If you want to stick with BS4, go to File → Manage libraries & plugins. Then from the pop-up either activate Bootstrap 4, or click on the resources.

image
image1172×576 51.7 KB

This will pop-up another modal asking if you want to add the BS4 resources - this will include the jQuery. You can do the same with activation of BS5 instead, but you will have to make sure you deactivate BS4 first.
If you do switch to BS5, some of the current HTML you have on the page might not be compatible. Not quite sure. Might be best to stick with BS4 if you have a lot built already.
Let me know if this helps,
Bob

1 Like
6

@RobM

Alrighty! I’ve updated to Bootstrap 5, included the libraries to local files and reimplemented the components. They now appear to be working.

Thanks! :slight_smile:

1 Like
7

Good to hear that it worked out!

8

Huzzah!
@Arkyon Status, Promoted to GodLike Well done!

@RobM is already there :wink:

(…sneaks back behind curtains and waits to pounce again :D. )