How to Kendo DataSource read new data with the same name (url string), and read with disable cache mode ( runs normally when disable cache in DevTools is open)

[Stark]

Hi Admin and everybody,

As title above, I using datasource to read data (url string) for Kendo Image Editor.

But when read new data with the same name (name = url string), it only retrieves the original preloaded images. But It runs normally when  I open F12 and check to "disable cache"  (image will show you)

Easier to understand, when starting to reload the page, the cache is empty, I load an image url string, it will show the image (Come here, run very well).

Then My Json read another image (it's a different picture) have the same name (name = url string) as the original image. It still shows the original image.

When I "F12" open DevTools then Network and check "Disable cache" (i understand it is not save cache), every time I run it, it's normal. It will show true/new image have the same name as the original image

What happend in my code.???

My code will show you :

var dataSourceGetImageUrlWithDrawing = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/_layouts/xyz/getimageurl,   //my link API 
                    type: 'GET',
                    cache: false,
                    scriptCharset: "utf8",
                    dataType: "json",
                    data: {
                        models: kendo.stringify(options.data.models)
                    },
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
        },
        schema: {
            data: 'data',
            model: {
                id: "imageUrlWithDrawing"
            }
        },
        change: function (e) {
            var view = dataSourceGetImageUrlWithDrawing.view()[0].imageUrlWithDrawing; //url in json data
            $("#imageEditorWithDrawing").kendoImageEditor({


                imageUrl: view,
                width: "100%",
                height: 650,
                saveAs: {
                    fileName: "image_edited.png"
                }
            });

            var imageEditorWithDrawing = $("#imageEditorWithDrawing").getKendoImageEditor();
            imageEditorWithDrawing.one("imageRendered", function () {
                imageEditorWithDrawing.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditorWithDrawing.getZoomLevel() - 0.2 });
            });
        }
    });

Hope Admin and everybody help me. THanks so much.

[Martin]

Could you please try to isolate the problem in a runnable Dojo example? As far as I understand the scenario, you wish to use a read call of the dataSource to get a link which is passed to the imageUrl of the ImageEditor. As the initialization of the latter is done in the change event of the dataSource, every time the event is triggered the ImageEditor will be initialized anew from the same html element, which should be avoided. In that case you will have to destroy the widget instance first (if any) before initializing the ImageEditor. That way you will avoid multiple instances of the widget from the same element and thus avoid undesired behavior.