CODEWITHSUNDEEP
javascriptjqueryajax
Tiago Mourão
Tiago Mourão

Reputation: 49

Ajax request is called too many times ( ajax loading gifs stops)

I am having a problem doing an ajax request with the following code.

Ajax Request

function doRequest(url, hostname) {

$.ajax({
    url: url,
    type: 'GET',
    data: 'hostname=' + hostname,
    error: function () { alert('erro'); $('#loading').hide(); },
    success: function (data) {

        $('#content').html(data);
        $('#loading').hide();
    },
    beforeSend: function () {
        alert(1);
        $('#content').html(""); 
        $('#loading').show();
    }
});

return false;
}

Search Form

<form action="/Home/SearchMachine" class="form-wrapper cf" id="search">
        <input type="text" placeholder="Hostname..." id="hostname" required>
        <button type="submit">Validar</button>
    </form>

Click event

$('#search').submit(function() { 
    if (validateSearchForm()) { 
          $('#val_error').hide();  
          doRequest('/Home/SearchMachine',$('#hostname').val());
     } 
    else
    $('#val_error').show(); 

    return false;    
});

In the first request I get one alert(1), in the second two alert(1), in the next four alert(1) that are triggered in success function. I made too many tests but I did not find the solution. After many requests, the ajax loading gif stops, as well as the browser.

Upvotes: 0

Views: 645

Answers (2)

Joel
Joel

Reputation: 2257

I made a quick test with your code and a test service. I'm not able to reproduce the problem. Each callback only happens once per click.

doRequest('http://headers.jsontest.com/', $('#hostname').val());

http://jsfiddle.net/QUXJU/

Are you re-binding submit somehow after each click?

Upvotes: 1

Aditya
Aditya

Reputation: 4463

Give an onSubmit to the form for transparency..

Form : 

<form action="/Home/SearchMachine"  onSubmit="submit_form(); return false;" class="form-wrapper cf" id="search">
        <input type="text" placeholder="Hostname..." id="hostname" required>
        <button type="submit">Validar</button>
    </form>

Function:

function submit_form()
{
    if (validateSearchForm()) { 
          $('#val_error').hide();  
          doRequest('/Home/SearchMachine',$('#hostname').val());
     } 
    else
    $('#val_error').show(); 
}

Upvotes: 0

Related Questions