www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] jquery show hide problems using a select box/dropdown

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    resolved [RESOLVED] jquery show hide problems using a select box/dropdown

    I have a word inside of a div. that's part of a drop down but the drop down is hidden, the specific focus is on "DC" right now:

    HTML:

    HTML Code:
    <td class="edit">
    <select class="touch" style="display: none;">
    <option value="11">Rebuying</option><option value="12">Sales</option></select>
    <span class="look">DC</span>
    </td>
    After you click on the word "DC" a drop down select appears. Notice the class changed from edit to editing.

    HTML Code:
    <td class="editing" data-oldvalue="13">
    <select class="touch" style="display: inline-block;">
    <option value="11">Rebuying</option><option value="12">Sales</option></select>
    <span class="look" style="display: none;">DC</span>
    </td>
    Here's my function for show() hide():

    Code:
    //allow flipping between "look" and "touch" mode for all editable fields
            $('td.edit' + suffix).click(function(event) {
                //make this the only TD in "editing" mode
                event.preventDefault();
                back_to_look();        
                td_to_touch($(this));
            });
    
            var mouse_is_inside = false;
    
            $(document).ready(function()
            {
                $('td.edit').hover(function(){ 
                    mouse_is_inside=true; 
                }, function(){ 
                    mouse_is_inside=false; 
                });
    
                $("body").click(function(){ 
                    if(! mouse_is_inside) $('.touch').hide();
                    back_to_look();
                });
            });
    
    function back_to_look() {
        $('td.editing ,td.edit.new').each(function() {
            $(this).children('.look').show();
            $(this).children('.touch').hide();
            if (!$(this).hasClass('edit')) {
                $(this).addClass('edit');
            }
            if ($(this).hasClass('editing')) {
                $(this).removeClass('editing');
            }
        });
    }
    
    function td_to_touch(td) {
        var theTouch = td.children('.touch');
        var theLook = td.children('.look');
        var oldVal = theLook.text().trim();
    
        td.addClass('editing');
        td.removeClass('edit');
        theLook.hide();
        theTouch.show();
    
        //save the existing value so it can be compared to when the "change" event is fired on the element
        td.attr('data-oldvalue', theTouch.val());
    
        if (theTouch.is('select')) {        
            theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
        } else {
            theTouch.val(oldVal);
        }
    }
    The first part works okay, when i click on the word "DC" the drop down appears... and when i click outside the div back into the body it hides. That works fairly good, the problem is when the drop down select box is showing and i click on it to make a selection it disappears before i can make my selection because i'm using the mouseup() function.

    I need people to be able to make a selection and than after that when they click outside of the div it disappears.

    I've tried using .live, on(click, function()) and just about everything. Please any help would be greatly appreciated. Thank you.

    SYNOPSIS: The drop down won't stay open so i can make a selection because i'm using mouseup().

  2. #2
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Nobody has a solution? Am i being too vague?

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    it works for me

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
    body{text-align:center;padding-top:200px;}
    span.look{cursor:pointer;}
    #res{position:absolute;left:30px;top:30px;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    var mouse_is_inside=false;
    $(document).ready(function(){
    //allow flipping between "look" and "touch" mode for all editable fields
    $('td[class*=edit]').click(function(event){
    //make this the only TD in "editing" mode
    back_to_look();
    td_to_touch($(this));
    event.preventDefault();
    });
    
    function back_to_look(){
    $('td.editing ,td.edit.new').each(function(){
    $(this).children('.look').show();
    $(this).children('.touch').hide();
    if(!$(this).hasClass('edit')){$(this).addClass('edit');}
    if($(this).hasClass('editing')){$(this).removeClass('editing');}
    });
    }
    
    function td_to_touch(td) {
    var theTouch=td.children('.touch'),
    theLook=td.children('.look'),
    oldVal=theLook.text().trim();
    
    td.removeClass('edit').addClass('editing');
    theLook.hide();
    theTouch.show();
    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());
    if(theTouch.is('select')){
    theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    }
    else{theTouch.val(oldVal);}
    }
    
    
    $('td.edit').hover(function(){mouse_is_inside=true;},function(){mouse_is_inside=false;});
    $('*').mousedown(function(){if(!mouse_is_inside && $(this).not('td[class=edit]')){$('.touch').hide();back_to_look();}});
    /* just to test mouseups */
    $('select.touch').mouseup(function(){$('#res').html($(this).val());});
    });
    </script>
    </head>
    <body>
    <div id="res"></div>
    <table align="center" border="1" cellpadding="5" cellspacing="5">
    <tbody>
    <tr>
    <td class="edit">
    <select class="touch" style="display:none;">
    <option value="11">Rebuying</option><option value="12">Sales</option></select>
    <span class="look">DC</span>
    </td>
    <td class="edit">
    <select class="touch" style="display:none;">
    <option value="13">Rebuying</option><option value="14">Sales</option></select>
    <span class="look">DC</span>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  4. #4
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Thanks for the reply, I had gotten it fixed already though, sorry.. i should of closed the thread.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles