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.

have you tried parseFloat?

OllyBarca
– OllyBarca

2015-05-26 11:51:01 +00:00
Commented May 26, 2015 at 11:51 — OllyBarca
– OllyBarca, Commented May 26, 2015 at 11:51
@OllyTenerife tried just now. Same result as parseInt()

Behroz
– Behroz

2015-05-26 11:52:39 +00:00
Commented May 26, 2015 at 11:52 — Behroz
– Behroz, Commented May 26, 2015 at 11:52
@OllyTenerife even Number(data) has the same result

Behroz
– Behroz

2015-05-26 11:53:10 +00:00
Commented May 26, 2015 at 11:53 — Behroz
– Behroz, Commented May 26, 2015 at 11:53

Remy Grandin · Accepted Answer · 2015-05-26 12:07:49Z

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>');
        }
    });
}); 
});

daulat · Accepted Answer · 2015-05-26 12:15:58Z

1

  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>');
    }

answered May 26, 2015 at 12:15

daulat

94911 silver badges24 bronze badges

Comments

Sourabh Kumar Sharma · Accepted Answer · 2015-05-26 11:52:24Z

0

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);
        }

answered May 26, 2015 at 11:52

Sourabh Kumar Sharma

2,8273 gold badges27 silver badges33 bronze badges

2 Comments

Behroz Over a year ago

I have been doing exactly that. I am using the number_of_files = parseInt(data) inside the success function. But its not working

Sourabh Kumar Sharma Over a year ago

no use number_of_files variable only once the success function callback fires, because ajax by default is asynchronous. I can see that you used the number_of_files variable outside the success callback also

pramod kadam · Accepted Answer · 2015-05-26 13:06:30Z

$(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/

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related