Problem with <a href="#" in bootstrap dropdowns

[wetzel]

Hello. I have a heavily modified old 2.2 engine I'm moving into 2.3.4.1. A few years ago I rebuilt the 2.2 site into a bootstrap framework. Things are going okay building it out into 2.3.4.1., except . . .

I am stuck on trying to get statements like the following to behave properly.

<li class="dropdown">
                                <a href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" style="color:#fff;">Syllabus<strong class="caret"></strong></a>

Instead of functioning as a null anchor tag for the design element, it is adding the root URL in the rollover and onclick, so that instead of functioning as a dropdown it just redirects to www.domain.com/#. This does not seem to have anything to do with relative URLs, base URL, or anything like that. I am convinced there is a javascript event handler set up somewhere that is doing this, but I cannot find it, how essential it is, or how to fix it. Any ideas would be most helpful.

 

 

 

[Heatherbell]

2.3.4.1 is out of date - I would recommend that you move to CE Phoenix 1.0.3.0

 

[wetzel]

Thank you for your reply, and I don't mean to be critical in any way, but in visiting oscommerce.com, it does say "Download the latest version to install on your own web server." where 2.3.4.1 download is located. I assumed, apparently wrongly, that this meant 2.3.4.1 is actually the latest version! Before I back out of 2.3.4.1 and redo the last week's work, please let me know what has happened here? If I stay with 2.3.4.1 does that mean that the community will not provide advice? It might be best for me to solve this problem and keep moving forward because I see a path to the end of this job.

[♥raiwa]

23 minutes ago, wetzel said:

Hello. I have a heavily modified old 2.2 engine I'm moving into 2.3.4.1. A few years ago I rebuilt the 2.2 site into a bootstrap framework. Things are going okay building it out into 2.3.4.1., except . . .

I am stuck on trying to get statements like the following to behave properly.

<li class="dropdown">
                                <a href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" style="color:#fff;">Syllabus<strong class="caret"></strong></a>

Instead of functioning as a null anchor tag for the design element, it is adding the root URL in the rollover and onclick, so that instead of functioning as a dropdown it just redirects to www.domain.com/#. This does not seem to have anything to do with relative URLs, base URL, or anything like that. I am convinced there is a javascript event handler set up somewhere that is doing this, but I cannot find it, how essential it is, or how to fix it. Any ideas would be most helpful.

 

 

 

Supposing you are using Bootstrap v3, here the code reference:

https://getbootstrap.com/docs/3.4/components/#dropdowns

[Heatherbell]

1 hour ago, wetzel said:

that this meant 2.3.4.1 is actually the latest version

It is the last version that was released but has not been updated in a long time - nobody here seems to know when it will be.
CE Phoenix is updated and supported so I would recommend that you start with that - it is fully responsive on Bootstrap 4 and running on php7.3.

[wetzel]

Alright. I have Phoenix running. I have a lot of work ahead of me, but for now I've installed my presentation layer onto the home page. 

The problem continues.

For a typical dropdown such as this, instead of behaving properly, clicking sends me to 'mydomain.com#'

<li class="dropdown">
                                <a href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" style="color:#fff;">Syllabus<strong class="caret"></strong></a>

Any suggestions would be most helpful.

 

[ArtcoInc]

@wetzel

Did you look at the answer that @raiwa posted above? Mind you, his answer is for Bootstrap v3, where as Phoenix uses Bootstrap v4.

M

[wetzel]

Thank you. Raiwa posted the code reference, which shows how to properly construct these elements.

I appreciate that. However, I believe the dropdowns are properly constructed. They have been working properly for years within the presentation layer that we have had running on top of osCommerce 2.2. The basic usage of 'href="#"' within anchor tags is being prevented. It happens if I use it in a simple anchor in plain HTML text. The problem is not at the level of the bootstrap, but how the null hashtag destination is interpreted. It is supposed to be interpreted as nothing, yet serve as a clickable element which can be styled as a dropdown or for other purposes. It's essential within bootstrap to be able to do this.

Somehow the hashtag is being appended as a relative link, appended to the parent URL of the page it is within.

I have never been this stuck on a bug honestly. Any suggestions would be greatly appreciated.

 

[Hotclutch]

If you specify href="#" then that is where you will go when clicked. You need to put the correct URL into href.

[Hotclutch]

you can also try replacing href="#" with href="javascript:void(0)", or remove the href all together.

[wetzel]

Thanks. With href="javascript:void(0)" the pulldown doesn't function. Neither with it removed.

[Hotclutch]

Sorry it's not clear what you're trying to do. a link to your site so that we can see what you're trying to do ?

[kgtee]

Add role="button" after href="#"  will make the click to do nothing.

[wetzel]

Nothing is working. The problem derives, I believe, from the mixture of bootstrap components. I think it is going to be more time efficient and ultimately more reliable to join you all in Bootstrap 4. Yuck. Thanks for your help.