CODEWITHSUNDEEP
jqueryhtmlajax
claudio
claudio

Reputation: 1564

jQuery AJAX call disables input box

so I have a web page that does an Ajax call to get data from the server. However when I trigger the Ajax call, an input box (#serial in this case) on my web page stops being responsive (I can't type on it or anything). Does anyone know what causes this?

<div id="filterconfig">
    <b>Serial Number:</b> <br/><input type="text" id="serial"/> <br/>
<button type="button" onclick="clicked($('#serial').val(), $('[name=location]:checked').val(), $('#exception'), $('[name=direction]:checked').val(),$('[name=server]:checked').val())">Filter</button>
</div>

Here's the function being called:

$(document).ready(assignOnclick);

    function assignOnclick() {
        $("tbody > tr").click(function () {
            $(this).onclick = GetSelectedReadableForm(this);
        });
    }

function callAjax() {
        var urlHuman = encodeURI(someUrl);
        var urlHex = encodeURI(someUrl);

        $.ajax({
            url: urlHuman,
            async:false,
            cache: false,
            success: function (data) {
                $('#stringview').find('.human').val(data);
            }
        });

        $.ajax({
            url: urlHex,
            async:false,
            cache: false,
            success: function (data) {
                $('#stringview').find('.hex').val(data);
            }
        });

    }

    function GetSelectedReadableForm(obj) {
        $("tr").css({ 'background-color': '' });
        $(obj).closest('tr').css({ 'background-color': '#ccc' });
        row_id = parseInt($(obj).closest('tr').find('#rowID').attr("value"));
        callAjax();
    }

Upvotes: 0

Views: 51

Answers (2)

claudio
claudio

Reputation: 1564

The problem was I was assigning a whole function to the "onkeydown" event, and it was preventing default behavior on keypresses that weren't intended for it

Upvotes: 0

Beno&#238;t
Beno&#238;t

Reputation: 7427

in jquery doc:

async (default: true) Type: Boolean By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

do you really need sync request ?!

you can try to synchronize result with ansyncronous requests:

    $.when(
      $.ajax({ url: urlHuman, cache: false}),
      $.ajax({ url: urlHex, cache: false})
    ).done( function(data1, data2) {
      $('#stringview').find('.human').val(data1);
      $('#stringview').find('.hex').val(data2);
    });

Upvotes: 1

Related Questions