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.
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">