samedi 18 juin 2016

Hidden divblock comes back when using ajax request - jquery

I've encountered a strange issue in jquery and it follows here ...

When the customer enters his email ajax makes a query to the db to look if the customer data is stored there. If NOT a new div block pops up

 $('#cust_date_of_birth').css('display', 'block');

This divblock contains among other a checkbox where the customer can enter his customerdata manually. This goes through the following function (listener)

    //checkbox for manual input
    $('#checkbox1').change(function() {

        if($(this).is(":checked")) {

            $('#customer_data_field').css('display', 'block');              
            $('#cust_date_of_birth').css('display', 'none');

        } else {
            $('#customer_data_field').css('display', 'none');
    }

    });

So - when the customer checks the checkbox - two things happends

  • a customer data field shows up where he or she can enter customerdetails.
  • the actual divblock,in which this checkbox is part is (supposed to) be hidden.

But now comes the strange thing ...

After having entered the email-address and the new divblock (cust_date_of_birth) shows .. checking the checkbox too fast the cust_date_of_birth-field is only hidden for some hundred milliseconds and then comes back - despite the css('display', 'none') function is called. But if one waits a couple of seconds to check it - everything works just fine.

More - this is true for chrome webbrowser. Firefox is ok.

Is this about concurrency or something? Should functions be syncronized or what could be done to solve this?

html

<div id="cust_date_of_birth" style="display:none;">
        <p>
            <span id = "dob_text">We could not find you in our system - please either enter your social secirut number or enter customer details manually.</span>
        </p>
        <table>
            <tr>
                <td>social security number</td>
                <td><input id="cust_dob_inputid" type="text" size="18" value="" enabled> </input> </td>
            </tr>
        </table>

        <span style="color:grey">enter your socialsecurity number to get data fast</span> <br><br>

        <table>
            <tr>
                <td>enter your customer details manually</td>
                <td><input type="checkbox" id="checkbox1"></td>
            </tr>
        </table>
    </div>

Aucun commentaire:

Enregistrer un commentaire