Jump to content
wetzel

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

Recommended Posts

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.

 

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×