locked
Get html of a div return undefined ? Why ?

    Question

  • folder.getFilesAsync().done(function (images) {
                                images.forEach(function (image) {
                                    image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                                        var imgWidth = chiTiet.width;
                                        var imgHeight = chiTiet.height;
                                        var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                                        var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                                        $("#hiddenData").append(dataString);
                                    });
                                });
                            });
                            var mydata = document.getElementById("hiddenData").innerHTML;
    mydata return undefined why ????

    Tuesday, October 21, 2014 9:14 PM

Answers

  • You are defining 2 done handlers, try:

    folder.getFilesAsync().then(function (images) {
                                images.forEach(function (image) {
                                    image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                                        var imgWidth = chiTiet.width;
                                        var imgHeight = chiTiet.height;
                                        var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                                        var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                                        $("#hiddenData").append(dataString);
                                    });
                                });
                            }).done(function(){
                            var mydata = $("#hiddenData").html();
                            });
    For more info on chaining promises see this link.

    Wednesday, October 29, 2014 4:56 PM
  • Hi,

    And for even more robust solution, please consider the following:

    folder.getFilesAsync().then(function (images) {
        var imagePromises = [];
        images.forEach(function (image) {
            var imagePromise = image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                var imgWidth = chiTiet.width;
                var imgHeight = chiTiet.height;
                var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                $("#hiddenData").append(dataString);
            });
    
            imagePromises.push(imagePromise);
        });
    
        return WinJS.Promise.join(imagePromises);
     }).done(function(){
         var mydata = $("#hiddenData").html();
    });

    This ensures that all imageProperties fetches (= .append() calls) are done before reading the html in .done(). 

    Unrelated note: for performance reasons, one could consider doing the .append() only once. This would be fairly straightforward once modelling the process to Promises as above.

    Tuesday, November 04, 2014 4:54 PM

All replies

  • Hi nhattuanbl,

    How about change your code like below:

    folder.getFilesAsync().done(function (images) {
                                images.forEach(function (image) {
                                    image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                                        var imgWidth = chiTiet.width;
                                        var imgHeight = chiTiet.height;
                                        var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                                        var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                                        $("#hiddenData").append(dataString);
                                    });
                                });
                            }).done(function(){
                            var mydata = document.getElementById("hiddenData").innerHTML;});

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, October 22, 2014 6:33 AM
    Moderator
  • folder.getFilesAsync().done(function (images) {
                                images.forEach(function (image) {
                                    image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                                        var imgWidth = chiTiet.width;
                                        var imgHeight = chiTiet.height;
                                        var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                                        var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                                        $("#hiddenData").append(dataString);
                                    });
                                });
                            }).done(function(){
                            var mydata = document.getElementById("hiddenData").innerHTML;
                            $("p").html(typeof(mydata)); // Return string
                            $("p").html(mydata); // This is NULL ??
                            });
    
    
    

    Not work... mydata is a string but when i show it again it's null why ?
    • Edited by nhattuanbl Wednesday, October 22, 2014 10:46 AM
    Wednesday, October 22, 2014 10:42 AM
  • Could you validate if your dataString is a not null string?

    And could you try to use for test purpose, however if this does not work, I would suggest you to share a demo with us for a better analysis.

    var mydata = $("hiddenData").html();

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, October 23, 2014 10:56 AM
    Moderator
  • You are defining 2 done handlers, try:

    folder.getFilesAsync().then(function (images) {
                                images.forEach(function (image) {
                                    image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                                        var imgWidth = chiTiet.width;
                                        var imgHeight = chiTiet.height;
                                        var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                                        var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                                        $("#hiddenData").append(dataString);
                                    });
                                });
                            }).done(function(){
                            var mydata = $("#hiddenData").html();
                            });
    For more info on chaining promises see this link.

    Wednesday, October 29, 2014 4:56 PM
  • Yes, you are right, I did not recognize there is two done() keywords.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, October 30, 2014 1:54 AM
    Moderator
  • Hi,

    And for even more robust solution, please consider the following:

    folder.getFilesAsync().then(function (images) {
        var imagePromises = [];
        images.forEach(function (image) {
            var imagePromise = image.properties.getImagePropertiesAsync().then(function (chiTiet) {
                var imgWidth = chiTiet.width;
                var imgHeight = chiTiet.height;
                var imgBlob = URL.createObjectURL(image, { oneTimeOnly: true });
                var dataString = imgWidth + "|" + imgHeight + "|" + imgBlob + "~";
                $("#hiddenData").append(dataString);
            });
    
            imagePromises.push(imagePromise);
        });
    
        return WinJS.Promise.join(imagePromises);
     }).done(function(){
         var mydata = $("#hiddenData").html();
    });

    This ensures that all imageProperties fetches (= .append() calls) are done before reading the html in .done(). 

    Unrelated note: for performance reasons, one could consider doing the .append() only once. This would be fairly straightforward once modelling the process to Promises as above.

    Tuesday, November 04, 2014 4:54 PM