Editor.dependent infinite loop

Bynv

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

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

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

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

Bynv

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

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

Bynv

how to do it ?

rf1234

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

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

Bynv

not sure why does not show the editor buttons on live

Bynv

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

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

Bynv

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

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

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

I was able to reproduce the problem.

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

Bynv

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

Bynv

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

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

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

For the sake of completeness:

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

Bynv

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

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

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

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

rf1234

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

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

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

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

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

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 ...