how to return an integer value from a php file using ajax method of jquery?

Question

I have written a php code to find the number of jpg files in a directory and here is the code.

<?php
$directory = $_POST['address'];
$num_files = 0;
$files = glob($directory."*.jpg");
$num_files = count($files);
echo $num_files;
?>

And I am using jquery's ajax method to send to and receive data from the php file. The code is as following.

$(document).ready(function(){
$('.mainnav li ul li').click(function(){
    var parent_id = $(this).parent().attr('id');
    var index = $(this).index();
    var address = "images/"+parent_id+"/"+index+"/";
    /*finding the number of files in the address directory*/
    var number_of_files;
    $.ajax({
        type:"POST",
        url: "numberoffiles.php",
        data:{address:address},
        success: function(data){
            number_of_files = data;/*Line label:A*/
            alert(number_of_files);
        }

    });
    alert(number_of_files+2); /*this line is just for testing*/
    /*end of number of files*/
    for(var i=0;i<number_of_files;i++)
        $('.thumbnail').append('<img src="'+address+i+'.jpg"></img>');
}); 
});

I get the value of the "number_of_files" correctly in the alert window without any error but I just can't convert its data type into an integer.

I have tried different ways to convert the data obtained from the php file into an integer but nothing has worked for me.

Following are what I have tried.

number_of_files = parseInt(data);/*Line label:A*/

Using the above line of code I get the value of "number_of_files" in the alert box correctly but any arithmetic operation with the "number_of_files" results into a NAN. For example alert(number_of_files+2); returns a NAN.

I have also tried the following method.

number_of_files = parseInt(data.data);/*Line label:A*/

This line of code returns a NAN. I have tried +data and Number(data) too but they don't work either. So please tell me how I can do it.

Answer 1

$(document).ready(function(){
    $('.mainnav li ul li').click(function(){
        var parent_id = $(this).parent().attr('id');
        var index = $(this).index();
        var address = "images/"+parent_id+"/"+index+"/";
    /*finding the number of files in the address directory*/
    $.ajax({
        type:"POST",
        url: "numberoffiles.php",
        data:{address:address},
        success: function(data){
            number_of_files = data;
            alert(number_of_files);
        }

    }).done(function(){ /*this line is just for testing*/
    /*end of number of files*/
    for(var i=0;i<number_of_files;i++)
        $('.thumbnail').append('<img src="'+address+i+'.jpg"></img>');
        });

    }); 
});

//instead of write code out of ajax you can use .done method also for more you refer http://api.jquery.com/jquery.ajax/

Answer 2

  success: function(data){
        number_of_files = data;
        alert(number_of_files);
         alert(Number(number_of_files)+2); /*this line is just for testing*/

      for(var i=0;i<number_of_files;i++)
    $('.thumbnail').append('<img src="'+address+i+'.jpg"></img>');
    }

Answer 3

You problem is that $.ajax is an Asyncronous method, meaning that the success function will be executed but you don't know when, meaning also that the code after the ajax function call will be executed right away.

You have 2 solution :

• Setting "async" to false in your Ajax options (not recommended)

• Moving all your "post ajax code" inside the success function

As a side note, javascript variables types are dynamic, meaning the JS engine will convert your variable as needed.

Edit : An exemple of 2nd option :

$(document).ready(function(){
$('.mainnav li ul li').click(function(){
    var parent_id = $(this).parent().attr('id');
    var index = $(this).index();
    var address = "images/"+parent_id+"/"+index+"/";
    /*finding the number of files in the address directory*/
    var number_of_files;
    $.ajax({
        type:"POST",
        url: "numberoffiles.php",
        data:{address:address},
        success: function(data){
            number_of_files = data;
            alert(number_of_files);

            for(var i=0;i<number_of_files;i++)
                $('.thumbnail').append('<img src="'+address+i+'.jpg"></img>');
        }
    });
}); 
});

Answer 4

user parseInt() function to convert string to integer inside the success function, call use the number_of_files in the success function only.

success: function(data){
            number_of_files = parseInt(data);
            alert(number_of_files);
        }