Code not working in Firefox but works in other browsers

Black Sulfur
Black Sulfur used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dr. KlahnPrincipal Software Engineer

Commented:
Firefox blocks pop-ups and drop-downs as the default configuration.  This may be what you are running into.
David S.Consultant & Challenge Subduer
Top Expert 2009

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.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
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?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I think those may be two separate issues.  I don't use jquery very much so someone else will have to answer that part.
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.

Author

Commented:
Awesome, thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial