0

I'm using jquery flow chart https://github.com/sdrdis/jquery.flowchart.

If I create the object dynamically it doesn't generate any chart ( meaning that $('#testCaseConnections').flowchart doesn't do anything but also doesn't give any error).

But if I copy the object from the Chrome development tools and say var flowData = that object that I copied it works.

What the hell? Why?

var flowData = {};
                    var operators = {};
                    var data = ["FIRST","SECOND"];
                    
                      $.each(data, function (index, value) {
                      
                      var operator = {};
                        $.ajax({
                            type: 'post',
                            url: '/flow/getInputs?testCaseName=' + value,
                            success: function (inputs) {
                                //Create test case container
                                var properties = {};
                                properties["title"] = testCaseName;
                                var operatorInputs = {};
                                for (var i = 0; i < inputs.length; i++) {
                                    operatorInputs["input_" + i] = {
                                        label: inputs[i].name
                                    };
                                }
                                properties["inputs"] = operatorInputs;
                                properties["outputs"] = {};
                                operator = {
                                    top: 80,
                                    left: 300
                                };
                                operator["properties"] = properties;
                                operators["operator" + index] = operator;
                            }
                        });
                    });

                    flowData["operators"] = operators;
                    console.log(flowData);

 // Apply the plugin on a standard, empty div...
                $('#testCaseConnections').flowchart({
                    data: flowData
                });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  • The `$.ajax` call is asynchronous. This means that your `flowData['operators']` isn't set until *after* you've attempted to use it. See the duplicate question I marked for a more comprehensive explanation and solution – Rory McCrossan Apr 26 '18 at 08:51
  • lol you are right. but I wanted to avoid using `async=false`. Is there any other way? Can you see my code pls? I can't put `flowData["operators"] = operators;` inside because it will also loop for each `data` –  Apr 26 '18 at 08:53
  • Never use `async: false`. That's also not the solution in the question I linked to. You need to place all logic dependent on the AJAX response within the callback handler. I'd suggest you read the duplicate fully to understand why this is. – Rory McCrossan Apr 26 '18 at 08:54
  • I do understand it but I don't see how I can set `flowData["operators"] = operators;` inside the success function –  Apr 26 '18 at 08:59
  • Copy and paste it in. Then also move the `$('#testCaseConnections').flowchart(...` line in there too – Rory McCrossan Apr 26 '18 at 09:01
  • I don't think you are understanding. If I put `flowData["operators"] = operators;` inside the success it it also loop again because of the foreach data. The operator + index is inside the loop but to group the operator I need operators outside the loop –  Apr 26 '18 at 09:06
  • Ah I missed there was an `each()` loop. That's a bad idea in itself as you're flooding your own server with AJAX requests. Send all data in a single one instead. If you can't do that and have to stick with your current pattern, make all requests and store the deferred objects in an array. Then apply that array to `$.when`. See [this question](https://stackoverflow.com/questions/4368946/jquery-callback-for-multiple-ajax-calls) for more information on that. – Rory McCrossan Apr 26 '18 at 09:09

0 Answers0