1

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).

<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>

<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>

Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").

Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.

<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){

var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);

//get 
$.get('index_jq.php', querystring, processResponse).error(errorResponse);

//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");


//if it is a normal button make it active
if ($(this).hasClass("not_active_button")) 
{
$(this).addClass("active_button");
}


//if it is a dropdown button option link make it active 
if ($(this).hasClass("prod")) 
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}

//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
      $('.dropdownwrap').slideDown();
    } else {
      $('.dropdownwrap').slideToggle("slow");
      $('.dropdownwrap').slideDown("slow");
    }



return false; // stop the link

});



function processResponse(data) {

 $('.dropdownwrap').html(data);

 }

function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}

</script>

I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:

//$('ul#prod.f-dropdown').close();

which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.

3
  • On further inspection the the line $('ul#prod.f-dropdown').close() is not causing the popup links to close when uncommented. Jul 26, 2013 at 14:10
  • I tested a mouseleave function on the popup menu and I got a javascript error $(ul#prod.f-dropdown) does not have close method. I guess you cannot close a ul. Still trying to find a way to close popup. Jul 26, 2013 at 14:19
  • Basically, I want to prevent the link from being acted on, but still want the popup window to close which return false is preventing. Jul 26, 2013 at 14:35

2 Answers 2

9

The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:

$('#prod').foundation('dropdown', 'close', $('#prod'))

I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle.net and link to it in your question. This makes reproducing your problem much easier.

2
  • Thanks for the answer, this can be quite annoying if there's a lot of them. I modified it to the following so they are all the same. <a href="#" class="button" onclick="$(this).foundation('dropdown', 'close', $(this).parent('.f-dropdown'))">Button</a>
    – Henry
    Oct 16, 2013 at 22:28
  • Glad you suggested this approach. I couldn't find this documented anywhere in Foundation's v4.3.2 docs. Jun 9, 2014 at 18:42
0

You also need the data-dropdown-content attribute attached to the dropdown ul element.

Reference: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.