Code not working in Firefox but works in other browsers

I am using a third party theme for an admin/dashboard area and everything works fine except in Firefox. When I try to perform a particular action I get this error in console:


unreachable code after return statement

This is the code it seems to be complaining about...



   
         handleDropPosition: function() {
                return;
                
                if (dropdown.options.dropAuto == true) {
                    if (Plugin.isInVerticalViewport() === false) {
                        if (dropdown.currentDropPos == 'up') {
                            element.removeClass('m-dropdown--up');
                            dropdown.arrow.prependTo(dropdown.wrapper);
                            dropdown.currentDropPos = 'down';
                        } else if (dropdown.currentDropPos == 'down') {
                            element.addClass('m-dropdown--up');
                            dropdown.arrow.appendTo(dropdown.wrapper);
                            dropdown.currentDropPos = 'up'; 
                        }
                    }
                }
            },

Open in new window

LVL 1
Black SulfurAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dr. KlahnPrincipal Software EngineerCommented:
Firefox blocks pop-ups and drop-downs as the default configuration.  This may be what you are running into.
0
David S.Commented:
That warning message means that there is a non-conditional return statement before the end of the function. In this case, it's the first statement, so the function will return immediately without doing anything.

Earlier this week, I put a non-conditional return statement in the middle of a function while debugging and Firefox gave me the message too.
0
Dave BaldwinFixer of ProblemsCommented:
That error message is common with many 3rd party tracking codes but on my sites it doesn't stop the javascript on the page from working.  Is there something that actually isn't working?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Black SulfurAuthor Commented:
Dave, yes. There is something that doesn't work. I have my own jQuery code which is meant to hide an element when a link is clicked. It works 100% in Google Chrome but not Firefox. My client refuses to use Chrome and wants me to fix it for Firefox but I actually don't know how. This is my code but Firefox isn't showing this as the issue:

	$( '#add-more' ).on('click', function() {
		var branch = 	"<div class='form-group m-form__group' id='branch'>" +
						"<label for='example_input_full_name'>" +
						"Branch/Outlet " + "<a href='' id='removeBranch'>Remove</a>" +
						"</label>" +
						"<textarea class='form-control m-input' name='branch[]' rows='6'></textarea>" +
						"</div>";
		$( '.more' ).prepend(branch);
	});

	$( 'body' ).on('click', '#removeBranch', function(e) {
		e.preventDefault();
		$(this).closest(branch).remove();
	});

Open in new window

0
Dave BaldwinFixer of ProblemsCommented:
I think those may be two separate issues.  I don't use jquery very much so someone else will have to answer that part.
0
Snarf0001Commented:
Definitely separate issues as Dave said.
It's the selector on the click handler (primarily).  You're passing in "branch" to the .closest() call, but branch is the entire text string that you created with the full html.  It's honestly very forgiving of Chrome to allow that to work, I wouldn't have expected it to.
You should pass in a simple class name or typical query selector statement.  Targeting the form-group class on the root div will do the trick:

	$( 'body' ).on('click', '#removeBranch', function(e) {
		e.preventDefault();
		$(this).closest(".form-group").remove();
	});

Open in new window


That will work in FF, but you have another couple issues.  The branch code you're inserting has "id='branch'" and "id='removeBranch'" in it.
That means for every add-more you click and insert, you're inserting multiple items with the same IDs.  This is invalid in HTML, and depending on the browser could cause you various oddball issues.
You should change those to be class names instead to be compliant.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Black SulfurAuthor Commented:
Awesome, thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.