show hide programmatically

[brackmayhall]

I am not having any luck with the show hide calls. All other trigger calls work fine. Below is how I am calling them.

    $('#testInput').dropdown('attach','#dropdown-1');        // PASS
    $('#testInput').dropdown('detach','#dropdown-1');       // PASS
    $('#testInput').dropdown('show','#dropdown-1');         // FAIL
    $('#testInput').dropdown('hide','#dropdown-1');           // FAIL
    $('#testInput').dropdown('enable','#dropdown-1');       // PASS
    $('#testInput').dropdown('disable','#dropdown-1');       // PASS

Any idea what im doing wrong here??

[claviska]

Should work with just this:

$('.dropdown-open').dropdown('hide')

[brackmayhall]

still having issues. I tried this but no success. I get both the show and hide event when i call the 'show' function

<input id="testInput" data-dropdown="#dropdown-1" type="text" name="fname">

<button id="showButton" type="button">Show</button>
<button id="hideButton" type="button">Hide</button>

<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
        <li><a href="#1">Item Item Item Item Item Item Item Item Item Item</a></li>
        <li><a href="#2">Item 2</a></li>
        <li><a href="#3">Item 3</a></li>
        <li><a href="#4">Item 4</a></li>
        <li><a href="#5">Item 5</a></li>
        <li><a href="#5">Item 6</a></li>
    </ul>
</div>

    $("#showButton").click(function(){
        $('#testInput').dropdown('show');
    });

    $("#hideButton").click(function(){
        $('#testInput').dropdown('hide');
    });

    $('#dropdown-1').on('show', function(event, dropdownData) {
        console.log(dropdownData);
    }).on('hide', function(event, dropdownData) {
        console.log(dropdownData);
    });

--------------------------console log for only show click--------------------------- Object {dropdown: m.fn.init[1], trigger: m.fn.init[1]} test.js:107 Object {dropdown: m.fn.init[1]}

[brackmayhall]

i can get the functionality i want if i comment out the following lines in jquery.dropdown.js but this breaks all click events for other items.

    //$(document).on('click.dropdown', '[data-dropdown]', show);
    //$(document).on('click.dropdown', hide);

I'm still not sure why the hide is always being called right after show is called. Please let me know if you figure this out.

Best, Brackston

[claviska]

Probably event propagation. Try this:

$("#showButton").click(function(event){
    event.stopPropagation();
    $('#testInput').dropdown('show');
});

Although I'm not sure why you need to use the API when it works out of the box with the dropdown class attached. Maybe there's a conflict.

[brackmayhall]

perfect that works like a charm. Thanks!

[jquimera]

@claviska

$("#showButton").click(function(event){
    event.stopPropagation();
    $('#testInput').dropdown('show');
});

This is interesting, I like the dropdown does not close with the right click.

Can you help me? Thanks!