CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uiaccordion
John Schultz
John Schultz

Reputation: 672

passing, dynamically created objects, to a function

I've created a jQuery UI Accordion image loader that dynamically adds or removes panels. Inside each panel is an image input form control and at the end of the document is a function that is supposed to change the img src in the panel to the newly selected image. Unfortunately, I am getting: cannot read 'files' of undefined. I understand why its doing this, I just need a way to dynamically add the panels AND be able to update the img src for the panel that loaded the image.

My code, so far, is:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- css links -->
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
    <!-- /css links -->
    <!-- js files  -->
    <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
    <!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    <script lang="en" type="text/javascript">
        $(function () {
            $("#PrimaryImageAccordion").accordion({
                collapsible: true
            });
        });
    </script>
    <br /><br />
    <button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
    <div id="PrimaryImageAccordion">
        <h4 class="PrimaryImageTitle">Primary Image</h4>
        <div>
            <div class="row form-group">
                <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
                <div class="col-md-10">
                    <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
                    <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
                </div>
            </div>
        </div>
    </div>
    <script lang="en" type="text/javascript">
        function btnAddPrimaryImage_Click() {
            var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
            template += "<div class='AccordionPanel'><div class='row form-group'>\n";
            template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
            template += "<div class='col-md-10'>\n";
            template += "<input type='file' id='Image1Selector' /><br />\n";
            template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
            template += "</div></div></div>\n";

            $("#PrimaryImageAccordion").append(template);

            $("#PrimaryImageAccordion").accordion("refresh");
        }

        function removePanel(a) {
            $(a).parent().next().remove();
            $(a).parent().remove();
            $("#PrimaryImageAccordion").accordion("refresh");
            return false;
        }

        function ImageSelector_Change(object, input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    object.attr("src", e.target.result);
                    object.css("visibility", "visible");
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>

</html>

Update 1

Changed my main selector/loader function as follows:

function ImageSelector_Change(input) {
    var object = $(input).parent().find('img#Image');

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            object.attr("src", e.target.result);
            object.css("visibility", "visible");
        }

        reader.readAsDataURL(input.files[0]);
    }
}

only problem is that it loads the first image only, not the additional images

Upvotes: 2

Views: 449

Answers (3)

kernal_lora
kernal_lora

Reputation: 1155

I think you have to change this function parameters as single like this. Because your onchange event fires this function with single parameter. So it will receive the object but your trying to access the input which has the undefined value Here take one global variable increment because as many times your clicking the button those many times DOM image element having the samaID

var vrImgeID=0;
 function btnAddPrimaryImage_Click() {
   var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
   template += "<div class='AccordionPanel'><div class='row form-group'>\n";
   template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
   template += "<div class='col-md-10'>\n";
   template += "<input type='file' id='Image1Selector' /><br />\n";
   template += "<img id='Image"+vrImgeID+"' src='#' style='width: 100px; visibility: hidden;' />\n";
   template += "</div></div></div>\n";

   $("#PrimaryImageAccordion").append(template);
   vrImgeID++;

   $("#PrimaryImageAccordion").accordion("refresh");
 }



function ImageSelector_Change(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    input.attr("src", e.target.result);
                    input.css("visibility", "visible");
                }

            reader.readAsDataURL(input.files[0]);
        }
    }

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

The IDs must be unique.

So in the function btnAddPrimaryImage_Click I corrected how the new elements are added to the accordion using an incremental variable.

The function ImageSelector_Change needs to get two parameters:

  • this: in order to get image
  • image id where to put the loaded image.

Moreover, because you are using bootstrap I suggest you to avoid jQuery 3.x for compatibility issues.

The snippet:

$(function () {
  $("#PrimaryImageAccordion").accordion({
    collapsible: true
  });
});

 var idCounter = 0;
    function btnAddPrimaryImage_Click() {
        idCounter++;
        var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
        template += "<div class='AccordionPanel'><div class='row form-group'>\n";
        template += "<label for='ImageSelector'" + idCounter + " class='control-label col-md-2'>Project Image</label>\n";
        template += "<div class='col-md-10'>\n";
        template += "<input type='file' id='ImageSelector" + idCounter + "' onchange='ImageSelector_Change(this,\"Image" + idCounter + "\");' /><br />\n";
        template += "<img id='Image" + idCounter + "' src='#' style='width: 100px; visibility: hidden;' />\n";
        template += "</div></div></div>\n";

        $("#PrimaryImageAccordion").append(template);

        $("#PrimaryImageAccordion").accordion("refresh");
    }

    function removePanel(a) {
        $(a).parent().next().remove();
        $(a).parent().remove();
        $("#PrimaryImageAccordion").accordion("refresh");
        return false;
    }

    function ImageSelector_Change(object, input) {
        if (object.files && object.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById(input).src = e.target.result;
                document.getElementById(input).style.visibility = "visible";
            }

            reader.readAsDataURL(object.files[0]);
        }
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
    <h4 class="PrimaryImageTitle">Primary Image</h4>
    <div>
        <div class="row form-group">
            <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
            <div class="col-md-10">
                <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this, 'Image');" /><br />
                <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
            </div>
        </div>
    </div>
</div>

Upvotes: 1

John Schultz
John Schultz

Reputation: 672

My finished code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- css links -->
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
    <!-- /css links -->
    <!-- js files  -->
    <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
    <!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    <script lang="en" type="text/javascript">
        $(function () {
            $("#PrimaryImageAccordion").accordion({
                collapsible: true
            });
        });
    </script>
    <br /><br />
    <button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
    <div id="PrimaryImageAccordion">
        <h4 class="PrimaryImageTitle">Primary Image</h4>
        <div>
            <div class="row form-group">
                <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
                <div class="col-md-10">
                    <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
                    <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
                </div>
            </div>
        </div>
    </div>
    <script lang="en" type="text/javascript">
        function btnAddPrimaryImage_Click() {
            var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
            template += "<div class='AccordionPanel'><div class='row form-group'>\n";
            template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
            template += "<div class='col-md-10'>\n";
            template += "<input type='file' id='ImageSelector' onchange='ImageSelector_Change(this);' /><br />\n";
            template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
            template += "</div></div></div>\n";

            $("#PrimaryImageAccordion").append(template);

            $("#PrimaryImageAccordion").accordion("refresh");
        }

        function removePanel(a) {
            $(a).parent().next().remove();
            $(a).parent().remove();
            $("#PrimaryImageAccordion").accordion("refresh");
            return false;
        }

        function ImageSelector_Change(input) {
            var object = $(input).parent().find('img#Image');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    object.attr("src", e.target.result);
                    object.css("visibility", "visible");
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>

</html>

Found out the hard way that when you add code to the first object (the accordion panel) you also have to add the same code to the template in order to make the image loader work :p.

Upvotes: 0

Related Questions