ajax call not working with one click

Question

i have a code in html:

HTML:

<div  id="all" aria-expanded="true">all</div>

and i want when this div was clicked, the ajax call:

AJAX:

$("#all").click(function () {

    $( "#adv-article-list" ).empty();
    $("#adv-article-list-pagination").empty();
    $.ajax({
        url: 'ajax_index.php', 
        type: "POST",
        dataType:'json',
        data: {name: 1},
        success: function(data)
        {
            arr_db=data;
        }
    });
    function(arr_db);
})

My code worked correctly, but not with one click. I must clicked twice on div. why?

PHP:

$userAnswer = $_POST['name'];
$servername = "localhost";
$username = "root";
$password = "";
$dbname="db";

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->query("SET NAMES 'utf8'");

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$result = $conn->query("SELECT * FROM wp_moeee ORDER BY  ID DESC");
$ar=array();

while ( $row = mysqli_fetch_assoc($result)){
    $ar[] = $row; // add the row in to the results (data) array
}

echo json_encode($ar);

success callback is async, so the arr_db assignment hasn't happened yet — aw04, Aug 15 '16 at 21:05
You should definitely check http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — HiDeoo, Aug 15 '16 at 21:08
Some function that uses ajax response (which does not exist in that moment). — skobaljic, Aug 15 '16 at 21:09

score 0 · Answer 1 · answered Aug 15 '16 at 21:24

Because jQuery $.ajax request is asynchronous by default.

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.

Although you may change it:

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

First time you trigger click event this happens:

the ajax request has been sent, than
function(arr_db); has been executed with arr_db not set yet
ajax response triggered jQuery's success callback and arr_db=data;

Second time you trigger click event:

second ajax request has been sent, than
function(arr_db); has been executed, using arr_db from first response
second ajax response triggered jQuery's success callback and arr_db=data;

In fact, you should keep asynchronous ajax call, show some spinner while waiting for response and put `function(arr_db)` inside `success` ajax callback function. That is the way programmers usually go. — skobaljic, Aug 16 '16 at 00:11

ajax call not working with one click

1 Answers1