Editor.dependent infinite loop

Bynv · October 2020

I have 4 dependent on my datatable, when I open Editor it works, but its never stopping, which makes it not able to save the information.

editor.dependent('ProdutoEdit', function () {
$.ajax({
url: "/PedidoVenda/GetProdutos/",
dataType: 'json',
success: function (retorno) {
editor.field('ProdutoEdit').update(retorno)
}
});
});

editor.dependent('CorEdit', function (val, data, callback) {        
    $.ajax({
        url: "/PedidoVenda/GetCores?Produto=" + data.values.ProdutoEdit,
        dataType: 'json',
        success: function (retorno) {
            editor.field('CorEdit').update(retorno)
        }
    });        
});

editor.dependent('TamanhoEdit', function (val, data, callback) {
    $.ajax({
        url: "/PedidoVenda/GetTamanhos?Produto=" + data.values.ProdutoEdit,
        dataType: 'json',
        success: function (retorno) {
            editor.field('TamanhoEdit').update(retorno)
        }
    });
});

editor.dependent('ValorUnEdit', function (val, data, callback) {
    var Url = "/PedidoVenda/GetPreco?Produto=" + data.values.ProdutoEdit + "&Cor=" + data.values.CorEdit + "&Tamanho=" + data.values.TamanhoEdit;
    $.ajax({
        url: Url,
        dataType: 'json',
        success: function (retorno) {
            editor.field('ValorUnEdit').val(retorno);
        }
    });
});

All of them have a valid return and it shows on Editor, but it keeps on looping

rf1234 · October 2020

Well, you are making an ajax call when the value changes and the ajax call changes the value: That is an infinite loop by definition.

Why are you doing this? What is the business context?

Bynv · October 2020

I have
1. a list of products
2. a list of colors
3. a list of sizes
4. the price

to get colors and sizes I need product.
to get price i need everything.

Will make something so i does not update if the value is the same

rf1234 · October 2020

Will make something so i does not update if the value is the same

Bynv · October 2020

i changed so it does not call the server. it keeps on loop anyways

editor.dependent('ProdutoEdit', function (val, data, callback) {
if (data.values.ProdutoEdit == null) {
$.ajax({
url: "/PedidoVenda/GetProdutos/",
dataType: 'json',
success: function (retorno) {
editor.field('ProdutoEdit').update(retorno)
}
});
}
});

rf1234 · October 2020

Then you would need to post a test case as per the forum rules.

Bynv · October 2020

how to do it ?

rf1234 · October 2020

Try replacing this

if (data.values.ProdutoEdit == null)

with

if ( editor.val("ProdutoEdit") <= '' )

because "data" might retain the original values read from the server - but not sure

I use dependent 204 times in my code - and I never had an infinite loop. I never use the "data" parameter - but I forgot why ...

https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest

Are you aware that "upate()" doesn't update the field content but only the options of a select field?? Are your fields select fields?
https://editor.datatables.net/reference/api/field().update()

If you wanted to update the field content you would need to replace
editor.field('ProdutoEdit').update(retorno)
with
editor.set( { "ProdutoEdit": retorno } );

Bynv · October 2020

http://live.datatables.net/xujunata/2/edit

Bynv · October 2020

not sure why does not show the editor buttons on live

Bynv · October 2020

So with validations it only calls once, but visually it never ends to load

https://datatables.net/forums/uploads/editor/sw/lzwfhzwkfq37.png

Bynv · October 2020

editor.dependent('ProdutoEdit', function (val, data, callback) {
if (editor.val("ProdutoEdit") <= '') {
$.ajax({
url: "/PedidoVenda/GetProdutos/",
dataType: 'json',
success: function (retorno) {
editor.field('ProdutoEdit').update(retorno);
}
});
}
});

kthorngren · October 2020

not sure why does not show the editor buttons on live

The browser's console has lots of errors. You can start with this basic Editor template:
http://live.datatables.net/guwafemu/1/edit

So with validations it only calls once, but visually it never ends to load

Look at your browser's console for errors.

Kevin

rf1234 · October 2020

Why do you update the options of the field if the field is empty? I can't think of a business reason for that.

Bynv · October 2020

I was able to reproduce the problem.

http://live.datatables.net/guwafemu/130/

Bynv · October 2020

if you click on New you can see it loads but "keeps loading" and if you try to save it does nothing.

Bynv · October 2020

rf1234 to fill the empty one is not a problem, the problem are the other 3 fields. but the problem happens with any of them.

rf1234 · October 2020

Sorry, I don't understand what you are trying to achieve in terms of business outcome. So I am unable to help you further.

rf1234 · October 2020

Speaking about "business outcome" ... I saw this on LinkedIn today.
Great stuff and 100% correct I don't remember how many ppt-slides I used to make "pretty and fast" ...

rf1234 · October 2020

For the sake of completeness:

Partner Level: convince client boards that everyone else in the industry believes in the impact of pretty slides.

Bynv · October 2020

the bussiness porpuse is this:

I have a list of Produt, Color, Size imagine like 1k products;

Color and Size is linked with Product, the real point is when someone selects a product i will get the color and size for this product.

In the example it does not show this, but that whats really happening, in the example there is a error even with the simple example.

I must be forgetting something.

Bynv · October 2020

The whole point is to make this one work.

editor.dependent('CorEdit', function (val, data, callback) {
$.ajax({
url: "/PedidoVenda/GetCores?Produto=" + data.values.ProdutoEdit,
dataType: 'json',
success: function (retorno) {
editor.field('CorEdit').update(retorno)
}
});
});

rf1234 · October 2020

the real point is when someone selects a product i will get the color and size for this product.

Ok what you say is:
When someone selects a product you need to show the available options for the selected product in terms of color and size. Subsequently when product, color and size have been selected the price needs to be retrieved for that combination.

editor.dependent('ProdutoEdit', function (val, data, callback) {    
    //if product is > ''   
    //do two ajax calls to get the available colors and sizes for the selected product
    //and update the options for fields color and size
    //empty fields color, size and price (the field values, not the options)
});
editor.dependent('CorEdit', function (val, data, callback) {    
    //if corEdit is > '' and TamanhoEdit > '' and ProductoEdit > ''
    //do one ajax call to get the price and update the price field value (not the options 
    //because there are none for price!)
});
editor.dependent('TamanhoEdit', function (val, data, callback) {    
    //if corEdit is > '' and TamanhoEdit > '' and ProductoEdit > ''
    //do one ajax call to get the price and update the price field value (not the options 
    //because there are none for price!)
});

Sorry, I am a business person by profession, but coding is my passion.

Bynv · October 2020

I can't do color and size befeore they choose the product, but assuming i could, im still getting error

rf1234 · October 2020

I can't do color and size befeore they choose the product

True, and I never said you could.

but assuming i could, im still getting error

No, you shouldn't assume that because it makes no sense!

kthorngren · October 2020

I haven't used dependent() much but I did mess with your test case. It seems that dependent() expects some sort of positive return value. See this example:
http://live.datatables.net/nesoyune/1/edit

Made this updare:

editor.dependent('ProdutoEdit', function () {
  /* These work together */
  editor.field('ProdutoEdit').update(xx);
  return true;
  
  /* or use this */
  //return {'options': {'ProdutoEdit': xx}};
});

With this either the combo of field().update() and return true or simply returning the options in the in the format above seems to work. I could be way off base though

Kevin

rf1234 · October 2020

I've done dependents more than two hundred times ...

This code should do the job if it doesn't have typos.

editor
    .dependent('ProdutoEdit', function (val, data, callback) {
        if ( val > '' ) {
            //empty field price when product changes
            editor.field('ValorUnEdit').val('');
            
            $.ajax({
                url: "/PedidoVenda/GetCores?Produto=" + val,
                dataType: 'json',
                success: function (retorno) {
                    //update options
                    editor.field('CorEdit').update(retorno);
                    //empty field
                    editor.field('CorEdit').val('');
                }
            });
            $.ajax({
                url: "/PedidoVenda/GetTamanhos?Produto=" + val,
                dataType: 'json',
                success: function (retorno) {
                    //update options
                    editor.field('TamanhoEdit').update(retorno)
                    //empty field
                    editor.field('TamanhoEdit').val('');
                }
            });
        }
    })
    .dependent('CorEdit', function (val, data, callback) {
        //empty field price when color changes
        editor.field('ValorUnEdit').val('');

        if ( editor.val("ProdutoEdit")  > '' &&
             editor.val("CorEdit")      > '' && 
             editor.val("TamanhoEdit")  > ''    ) {
            var Url = "/PedidoVenda/GetPreco?Produto=" + editor.val("ProdutoEdit") + "&Cor=" + editor.val("CorEdit") + "&Tamanho=" + editor.val("TamanhoEdit");
            $.ajax({
                url: Url,
                dataType: 'json',
                success: function (retorno) {
                    editor.field('ValorUnEdit').val(retorno);
                }
            });
        }
    })
    .dependent('TamanhoEdit', function (val, data, callback) {
       //empty field price when size changes
        editor.field('ValorUnEdit').val('');

         if ( editor.val("ProdutoEdit")  > '' &&
              editor.val("CorEdit")      > '' && 
              editor.val("TamanhoEdit")  > ''    ) {
             var Url = "/PedidoVenda/GetPreco?Produto=" + editor.val("ProdutoEdit") + "&Cor=" + editor.val("CorEdit") + "&Tamanho=" + editor.val("TamanhoEdit");
             $.ajax({
                 url: Url,
                 dataType: 'json',
                 success: function (retorno) {
                     editor.field('ValorUnEdit').val(retorno);
                 }
            });
        }
    });

The code inside the last two dependents is identical. So you might move it into a function.

update: fixed some typos replaced [ ] with ( ). Now they should be ok ... hopefully.

rf1234 · October 2020

As a simplification it should also work with an array of field names:

So the code could be shortened like this (haven't tried it myself yet):

editor
    .dependent('ProdutoEdit', function (val, data, callback) {
        if ( val > '' ) {
            //empty fields when product changes
            editor.set( { 'ValorUnEdit': '',
                           'CorEdit': '',
                           'TamanhoEdit': '' } );
             
            $.ajax({
                url: "/PedidoVenda/GetCores?Produto=" + val,
                dataType: 'json',
                success: function (retorno) {
                    //update options
                    editor.field('CorEdit').update(retorno);
                }
            });
            $.ajax({
                url: "/PedidoVenda/GetTamanhos?Produto=" + val,
                dataType: 'json',
                success: function (retorno) {
                    //update options
                    editor.field('TamanhoEdit').update(retorno)
                }
            });
        }
    })
    .dependent( ['CorEdit', 'TamanhoEdit'], function () {
        //empty field price when color changes
        editor.field('ValorUnEdit').val('');
 
        if ( editor.val("ProdutoEdit")  > '' &&
             editor.val("CorEdit")      > '' &&
             editor.val("TamanhoEdit")  > ''    ) {
            var Url = "/PedidoVenda/GetPreco?Produto=" + editor.val("ProdutoEdit") + "&Cor=" + editor.val("CorEdit") + "&Tamanho=" + editor.val("TamanhoEdit");
            $.ajax({
                url: Url,
                dataType: 'json',
                success: function (retorno) {
                    editor.field('ValorUnEdit').val(retorno);
                }
            });
        }
    });

kthorngren · October 2020

This may still be something with the test case but I need to use return true; in the dependent function to for the edit modal to be happy. This example simulates an ajax response.
http://live.datatables.net/woqebafo/1/edit

Commenting out the return true; statement causes the issue described by @Bynv .

Kevin

rf1234 · October 2020

Amazing; I never needed to return true in my over 200 use cases ...

But anyway if you can implement the logic above and you need to return true: So be that as it may ...

Editor.dependent infinite loop

Editor.dependent infinite loop

Answers

Howdy, Stranger!

Categories

DataTables

Editor.dependent infinite loop

Editor.dependent infinite loop

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables