JavaScript from Django Base Not Working On Startup

Question

I am attempting to get a customer logo to load when a user signs into my app. The JS function is not firing and I do not see any information in the logs

To do that I am using the views function below to generate the logo url:

Views:

def view_company_logo(request):

print("GETTING LOGO")

client = Client.objects.get(user=request.user)
logo = ""


try:
        logo = client.customer.first().logo.url + settings.MEDIA_URL
        print("GOT LOGO")

    except Exception as e:
        logo = ""
        print(e)
        print(f'ERROR FOR LOGO {e}')
    finally:
        return JsonResponse({"logo": logo}, safe=False)

The function is attached the url below:

url(r"^get/company_logo/$", views.view_company_logo),

This is called in the base.html file in order to show the

  $(document).ready(function () {
  function get_company_logo() {
    log('TEST');

    $.ajax({
      url: '/get/company_logo/',
      method: 'GET',
      success: function (data) {
        return create_image(data['logo'])





      },
      error: function () {
        console.log('HERE IS THE ERROR!!!')
        log('HERE IS THE ERROR!!!')
      },
    
    })
  }

  function create_image(logo) {
    document.getElementById("logo").src = logo;

  }


  get_company_logo()

Which connects to the source of this image that gets generated when the pages loads:

      <img class="img-square center" id="logo" alt="logo" style="opacity: 1" height="45" width="125">

Could someone tell me why the image is not loading? It seems like the function is never called and I am not sure why.

Answer 1

You have multiple problems in your Javascript. The only thing that needs to be in the "ready" function is the call to get_company_logo. The other functions can be defined directly.

This works for me:

<script src="https://code.jquery.com/jquery-2.2.4.js">
</script>
<script>
function get_company_logo() {
    console.log('TEST');

    $.ajax({
      url: '/get/company_logo/',
      method: 'GET',
      success: function (data) {
        return create_image(data['logo'])
      },
      error: function () {
        console.log('HERE IS THE ERROR!!!')
        log('HERE IS THE ERROR!!!')
      },
    
    })
}

function create_image(logo) {
  document.getElementById("logo").src = logo;
}

$(document).ready(get_company_logo);

</script>

<img class="img-square center" id="logo" alt="logo" style="opacity: 1" height="45" width="125">