Jquery path not loading in Django

Question

I want to use this pluggin for watermarking images in my django website. After following the instruction I made it work in plain html server (wampserver) after trying it in my django environment, it's not working.

HTML (wampserver)

html lang="en">
<title>cool</title>
<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


</head>
<body>
<script type="text/javascript" src="js/watermark.jquery.js"></script>
<script type="text/javascript" src="js/watermark.jquery.min.js"></script>
    <script language="javascript">
    var config = {
        "path": "images/watermark.png"};
     $(document).ready(function() {
     $(document).watermark(config);
    });
</script>

    <img src="images/hall1.jpg" alt="" class="watermark"/>
    <img src="images/hall3.jpg" alt="" title="This is an example of a caption" class="watermark"/>
    <img src="images/main.jpg" alt="" class="watermark"/>


</body>
</html>

The above code is working fine.

Django Environment(Not working)

  </head>
  <body>    
   <script type="text/javascript" src="{{MEDIA_URL}}/css/watermark.jquery.js"></script>
   <script type="text/javascript" src="{{MEDIA_URL}}/css/watermark.jquery.min.js"></script>
    <script language="javascript">
    var config = {
        "path": "/media/css/watermark.png" };
     $(document).ready(function() {
     $(document).watermark(config);
    });
  </script>

  <li><img src="{{ MEDIA_URL }}/{{post.main}}" class="watermark"/> </li>
  <li><img src="{{ MEDIA_URL }}/{{post.side}}" class="watermark"/> </li>
  <li><img src="{{ MEDIA_URL }}/{{post.sitting}}" class="watermark"/> </li>

  </body>

How can I fix this issue?

check the network tab of your browser to see the actual location of the file being requested — Arun P Johny
– Arun P Johny, Commented Mar 23, 2013 at 9:03
There is no reason to load jQuery and the jQuery plugin twice! Once is enough. — Felix Kling
– Felix Kling, Commented Mar 24, 2013 at 0:46

Alireza Savand · Accepted Answer · 2013-03-23 21:35:10Z

0

If you want to address your static files like your css/js files, Then you have to use STATIC_URL.

   <script type="text/javascript" src="{{ STATIC_URL }}/css/watermark.jquery.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}/css/watermark.jquery.min.js"></script>

So the same way will be used for watermark.png path:

"path": "{{ STATIC_URL }}/css/watermark.png"

Also consider that MEDIA_ROOT where you can refer to it with MEDIA_URL is absolute filesystem path to the directory that will hold user-uploaded files is not a right place for your assets, You should config it correctly then you will be able to address them by STATIC_URL.

For more on this topic:

edited Mar 23, 2013 at 21:35

answered Mar 23, 2013 at 9:16

Alireza Savand

3,5063 gold badges28 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Jquery path not loading in Django

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