Django : Display image example jquery not working - Uncaught Reference Error

Question

I am attempting to run the following jquery example in my django based website.I am still in the learning phase so please bear with me.

This is what portion of my code looks like so far

 {% extends "base.html" %}
{% load crispy_forms_tags %}
  {% block content %}


  <input type='file' />
  <img id="myImg" src="#" alt="your ...image" />

<script>
$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});


function imageIsLoaded(e) {
    alert("dsdsdsd")
    $('#myImg').attr('src', e.target.result);
};
</script>



{% endblock %}

It seems like when I select a file the $(":file").change function is not called. Any ideas why that might not be called. I tried this on jsfiddle and it works. I am on chrome. This is what the chrome debug output shows

On hoovering over the x it states

Uncaught Reference Error $ is not defined.

My jquery is loaded. Thats what chrome says

Update:

so it works like this

<script>
        function startup()
        {

                $(function () {
                    $(":file").change(function () {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            reader.onload = imageIsLoaded;
                            reader.readAsDataURL(this.files[0]);
                        }
                    });
                });

                function imageIsLoaded(e) {
                    $('#myImg').attr('src', e.target.result);

                };

        }
      </script>


 <body onload="startup()">

I am not sure why it works like this. Any explanation would be appreciated. Why does it need to be inside the startup

That means your jQuery most likely isn't loaded when the script is being read/executed. Make sure your jQuery library is read in first. — Adjit
– Adjit, Commented Jun 23, 2016 at 18:13
I placed the it inside the <script> tag and that is at the end — James Franco
– James Franco, Commented Jun 23, 2016 at 18:13
@JamesFranco did you get a 200 response on the jquery request? — MorningDew
– MorningDew, Commented Jun 23, 2016 at 18:25

James Franco · Accepted Answer · 2016-06-23 19:03:40Z

0

This is how I solved the problem

<script>
        function startup()
        {

                $(function () {
                    $(":file").change(function () {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            reader.onload = imageIsLoaded;
                            reader.readAsDataURL(this.files[0]);
                        }
                    });
                });

                function imageIsLoaded(e) {
                    $('#myImg').attr('src', e.target.result);

                };

        }
      </script>


 <body onload="startup()">

answered Jun 23, 2016 at 19:03

James Franco

4,78610 gold badges48 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django : Display image example jquery not working - Uncaught Reference Error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related