CODEWITHSUNDEEP
javascriptjqueryajaxfor-loop
Ghesio
Ghesio

Reputation: 89

Jquery Ajax call not executed in for loop

Using this function

  function readPinMode(callback,pin){
     $.ajax({
        type: 'GET',
        url: path,
        data: {
        'funct': "readPinMode", //function included and working ou of loops
        'pin': pin,
        'php': 0
     },
     success: function (result) {
        //console.log(result);
        callback(result);
     },
        error: function (xhr, textStatus, error) {
        console.log(xhr);
        console.log(textStatus);
        console.log(error);
    }
   });
 };

in this way, simply does not do nothing:

      $( document ).ready(function() {
  <?php
  $js_array = json_encode($GLOBALS['gpio']); // got from included file, working
  echo "var pins = ". $js_array . ";\n";
  ?>
  console.log( "Document ready." );
  for (i = 0; i < pins.length; i++) {
        var mode = "m" + pins[i];
        function initMode(){
        readPinMode(function(ret){
        console.log(ret);
        $(mode).text(ret);
        console.log(mode);
      }, pins[i]);
    };
  }

It enters the for loop (I can log in console mode and pins[i], they are working) but the function seems to not be called. Console does not show anything.

Is there a way to solve this? Thanks

Upvotes: 2

Views: 1340

Answers (3)

CodeGodie
CodeGodie

Reputation: 12132

There's nothing wrong with using callback functions, however you did miss a couple of things. You are forgetting to call your initMode function and mode should be an ID like you mentioned:

<script>
    function readPinMode(callback, pin) {
        $.ajax({
            type: 'GET',
            url: 'SGWEB/header.php',
            data: {
                'funct': "readPinMode", //function included and working ou of loops
                'pin': pin,
                'php': 0
            },
            success: function (result) {
                callback(result);
            },
            error: function (xhr, textStatus, error) {
                console.log(error);
            }
        });
    }

    function initMode(mode, pin) {
        readPinMode(function (ret) {
            $(mode).text(ret);
        }, pin);
    }

    $(document).ready(function () {
        var pins = <?= json_encode($GLOBALS['gpio']) ?>;
        for (i = 0; i < pins.length; i++) {
            var mode = "#m" + pins[i];
            initMode(mode, pins[i]);
        }
    });
</script>

Here's a FIDDLE I created so that you can see how it works.

Upvotes: 1

mplungjan
mplungjan

Reputation: 178293

I suggest to not use a real loop which needs a proper closure, but instead run again in the success

<?php
  $js_array = json_encode($GLOBALS['gpio']); // got from included file,  working
  echo "var pins = ". $js_array . ";\n";
?>
var cnt = 0;
function readPinMode(){
  if (cnt>=pins.length) return;      
  $.ajax({
    type: 'GET',
    url: path,
    data: {
    'funct': "readPinMode", //function included and working ou of loops
    'pin': pins[cnt],
    'php': 0
   },
   success: function (result) {
      //console.log(result);
      $("#mode").append(result)
      cnt++;
      readPinMode();
   },
   error: function (xhr, textStatus, error) {
    console.log(xhr);
    console.log(textStatus);
    console.log(error);
   }
 });
}
$(function() { readPinMode(); });

Proof of concept:

var pins = ["pin1", "pin2", "pin3"];
var cnt = 0;

function readPinMode() {
  if (cnt >= pins.length) return;

  document.write('<br/>pin:' + pins[cnt]); // your Ajax

  cnt++;
  readPinMode();
}
$(function() {
  readPinMode();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 3

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

I think its syntax error, Try this code 

console.log( "Document ready." );
  for (i = 0; i < pins.length; i++) {
        var mode = "m" + pins[i];       
        readPinMode(function(ret){
        console.log(ret);
        $(mode).text(ret);
        console.log(mode);
      }, pins[i]);       
  }

I removed the function initMode() as it creates same function definition over and over again which overrides the exiting function, and its all messy. You should not define a function inisde a loop as the final function will be of the last loop. Also there is no need for you to define the function inside a loop in this scenario.

Here is a Working Prototype Fiddle

Upvotes: 0

Related Questions