CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromeknockout.js
Slim
Slim

Reputation: 1744

Strange show/hide behavior in chrome

I have some some HTML fields and tables the problem I'm facing is that in some fields show() and hide() is working and on some just don't on google chrome.

Example of working code:

HTML:

    <div class="one-col-box" >
            <label>Number</label>
            <input type="text" name="clientNumber" id="clientNumber" data-bind="event: { dblclick: dbClickChange }, value: clientNumber" style="width: 100%">  
            <select name="clientNumberSel" id="clientNumberSel" data-bind="options: result, value: clientNumbersOldVal, optionsCaption: '--- select ---', event: {change: loadPlans }" style="display: none"></select>
            <img id="imgClose" src="/monitring/js/images/close2.png" alt="Close" data-bind="click: hideClientNums" style="display: none;">
    </div>

and the dbClickChange function - executed when teh input is double clicked:

dbClickChange = function(){
                             $('#clientNumberSel').parent().show();
                             $('#clientNumberSel').show();

                             $('#imgClose').show();
                             $('#clientNumber').hide();                         
                           };

The above code works perfectly, but this one is not.

HTML

<div class="one-col-box" >
                <label style="width: 150px">Classification</label>
               <select class="selects" name="creditClassificationSoge" id="creditClassificationSoge" data-bind="value: creditClassificationSoge">               
                    <option>-- Select --</option> 
                    <option data-bind="click: hideClassif">No</option> 
                    <option data-bind="click: showClassif">Yes</option>         
                </select>
            </div>
    <div class="six-col-box">
        <div class="two-col-box" id="descrH" style="display: none;">
            <label>Description </label>
            <input type="text" style="width: 392px;"></input>
        </div>
    </div>

And the code executed when yes or no is selected:

showClassif = function(){
                       $('#descrH').show();                       
                   };

                   hideClassif = function(){
                       $("#descrH").hide('fast');
                   };

I really can't understand what is wrong with my code, the 2 parts in js are the same, I'm going to start crying. Why in some boxes show/hide is working and in some it don't? Maybe I'm missing something small, but I can't spot it.

Upvotes: 0

Views: 189

Answers (2)

WASasquatch
WASasquatch

Reputation: 1044

I would use a timeout instead. The script is executed at once, so it's showing, and hiding, at the same time. 

    // Animate Slide
    function showClassif(id){
        var div = $(id);
        div.show();
        var end = setTimeout(function(){
            div.hide('fast');
            clearTimeout(end);
        }, 200); // The delay is 200ms change the 200 to alter this

    });

    showClassif("#showClassif");

Upvotes: 1

Venki
Venki

Reputation: 543

   $("#clientNumberSel").css("visibility", "hidden");
  $("#clientNumberSel").css("visibility", "visible");

Upvotes: 1

Related Questions