Menu icon Foundation
Foundation 6 data-dropdown

Hello i want to create dropdown and fire it by javascript.

 

        <div class="dropdown-pane top" id="example-dropdown2">
            Just some junk that needs to be said. Or not. Your choice.
        </div>

Than i want to fire it by js:

$("#test").click(function(){

    var $dropdown = new Foundation.Dropdown( $("#example-dropdown2"));

    $("#example-dropdown2").foundation('open');



});

 

And i get error TypeError: Cannot read property 'id' of undefined

 

What im doing rong ?

dropdown

Hello i want to create dropdown and fire it by javascript.

 

        <div class="dropdown-pane top" id="example-dropdown2">
            Just some junk that needs to be said. Or not. Your choice.
        </div>

Than i want to fire it by js:

$("#test").click(function(){

    var $dropdown = new Foundation.Dropdown( $("#example-dropdown2"));

    $("#example-dropdown2").foundation('open');



});

 

And i get error TypeError: Cannot read property 'id' of undefined

 

What im doing rong ?

Brian Tan over 3 years ago

 Hi felek

You are missing data-dropdown attribute for your dropdown pane. Also, you are mixing two different kinds of foundation calls.

  <button class="button" type="button" id="btnTest" data-toggle="example-dropdown2"
    >Test toggle</button>
  <div id="example-dropdown2" class="dropdown-pane" data-dropdown>
     Just some junk that needs to be said. Or not. Your choice.
  </div>

  <button class="button" type="button" id="test1" >JS Open</button>
  <button class="button" type="button" id="test2" >JS Close</button>

<script>
// call method 1
$("#test1").on("click", function() {
  $("#example-dropdown2").foundation('open');
});
// call method 2
$("#test2").on("click", function() {
  var $dropdown = new Foundation.Dropdown( $("#example-dropdown2"));
  $dropdown.close();
});
</script>

Hope the above example is clear.

felek over 3 years ago

Hi thx for response. When I add data-dropdown to code i get error, unless i add button to a DOM.

I want to create HTML element and than use it via JS but not instant put button unless is required.

 

 

Brian Tan over 3 years ago

Yes, but you could try making the toggle button hidden.

felek over 3 years ago

Ok. Also when i add entire dropdown markup via ajax to a DOM. 

 

        $.ajax({
            url: "html_template.html",
            data:'html',
            context:where
        }).done(function(data) {
            $( this ).prepend(data).find('.dropdown-pane').foundation();
        });

i get error

Tried to initialize dropdown on an element that already has a Foundation plugin.

But when i not do this element not showing.

Also after click dropdown element is not posytion corectly it takes some random top and left.

Is there any way to foundation calculate top left correctly ?

 

Brian Tan over 3 years ago

If you are not adding new foundation element dynamically, foundation() is not necessary. Otherwise you will get the double-dip error message.

For example:

  <div id="example-dropdown2" class="dropdown-pane" data-dropdown 
    data-auto-focus="true"></div>
<script>
$.post("dropdown-pane-content.php",{},function(data) {
  $("#example-dropdown2").html(data);
});
</script>

In this example, you need foundation().

  <div id="dropdown" ></div>
<script>
$.post("dropdown-pane-div.php",{},function(data) {
  $("#dropdown").html(data).foundation();
});
</script>

Edit: dropdown-pane will appear where there are most available space in viewport. You can override with position class .top .right or .bottom  http://foundation.zurb.com/sites/docs/dropdown.html#positioning

.Hope this helps.

felek over 3 years ago

Yes I add content by ajax.

and i use ID or class name of element, or parent or other.

Point is dropdown is showing after load ajax, but its calculating top left totaly wrong. Thats my problem.

Brian Tan over 3 years ago

If you believe this is a bug, please log the issue in github. https://github.com/zurb/foundation-sites/issues