We Keep Coding

How do I send a django model to javascipt?

How do I pass a django model to javascript?
Specifically, I want to pass a django Movie model to javascript.
In javascript, I would like to display the id something in the movie model at the time of score with an if statement.
def index(request):
if Movie.objects.order_by('-stars').exists():
movie = list(Movie.objects.order_by('-stars'))
if TV.objects.order_by('-stars').exists():
tv = TV.objects.order_by('-stars')
print(tv)
context = {
'movie':movie,
}
return render(request, 'Movie/index.html',context)
fetchTrendingResults("all", "week")
var mediaType = document.getElementById("media_type")
mediaType.addEventListener("change", function(event) {
fetchTrendingResults(mediaType.options[mediaType.selectedIndex].value, "day")
})
function fetchTrendingResults(media_type, time_window) {
var trendingDiv = document.getElementById("trendings")
trendingDiv.innerHTML = ""
if (media_type == "score"){
var js_list = {{movie}};
}
else{
fetch(`/api/trendings?media_type=${media_type}&time_window=${time_window}`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}}
// todo:movieとTVのIDをもらってこれをURLにFethして映画とTVの情報をそれぞれでスターが高い順に表示する。
)
.then(res => res.json())
.then(data => {
for (let i=0; i<data.results.length; i++) {
var mainDiv = document.createElement("div");
mainDiv.setAttribute("class", "card");
mainDiv.setAttribute("style", "width: 18rem;");
var img = document.createElement("img");
img.setAttribute("src", "https://image.tmdb.org/t/p/w200" + data.results[i].poster_path);
img.setAttribute("class", "card-img-top");
img.setAttribute("alt", "...");
var body = document.createElement("div");
body.setAttribute("class", "card-body");
var title = document.createElement("h5");
title.setAttribute("class", "card-title");
if (data.results[i].name) {
title.innerHTML = data.results[i].name;
} else {
title.innerHTML = data.results[i].title;
}
//var text = document.createElement("p");
//text.setAttribute("class", "card-text");
//text.innerHTML = data.results[i].overview;
var link = document.createElement("a");
link.setAttribute("href", "/" + data.results[i].media_type + "/" + data.results[i].id + "/");
link.setAttribute("class", "btn btn-primary");
link.innerHTML = "View Details";
body.appendChild(title);
//body.appendChild(text);
body.appendChild(link);
mainDiv.appendChild(img);
mainDiv.appendChild(body);
document.getElementById("trendings").appendChild(mainDiv);
}
})
}
}
How do I pass a django model to javascript?
Specifically, I want to pass a django Movie model to javascript.
In javascript, I would like to display the id something in the movie model at the time of score with an if statement.

You can send model data by just returning JsonResponse from the view (and for example creating JSON dict by forlooping QuerySet, or using model_to_dict Django built-in method) or by preserving your logic and sending html you need to override - even better - you can do both ways at the same time.
So, basically you write view like this:
from django.forms import model_to_dict
from django.http import Http404
def custom_ajax_view(request):
if request.method != 'POST':
raise Http404
movies = Movie.objects.order_by('-stars')
movie_dict = {}
if movies.exists():
movie_dict = {obj.id: model_to_dict(obj) for obj in movies}
tv = TV.objects.order_by('-stars')
tv_dict = {}
if tv.exists():
tv_dict = {obj.id: model_to_dict(obj) for obj in tv}
context = {
'movie': movie,
}
html = render_to_string(
'Movie/index.html', context=context)
return JsonResponse({
'movies': movie_dict,
'tvs': tv_dict,
'html': html,
})
And then you retrieve data via Ajax method (I prefer using jQuery for that) by writing:
$.ajax({
url: CUSTOM_AJAX_URL,
type: 'post',
dataType: 'json',
success: function (data) {
// Here you retrieve your data and you can do something with it.
console.log(data)
}
});
You also can resolve your CUSTOM_AJAX_URL using template logic (post it at the end of template)
<script>
const CUSTOM_AJAX_URL = "{% url 'custom_ajax_view' %}";
</script>
<script src="{% static 'your_script_name.js' %}"></script>
Then your script should see the CUSTOM_AJAX_URL (if you use script not directly by using inline method, but including script via script tag and placing it with static method in the code). If you place it directly, you can pass URL directly to the AJAX method.

Phonegap change image src with jquery not working on Android

I try to change the src of a img tag with jquery. In firefox it is working fine, but in the phonegap developer app on android, nothing happens.
What I'm doing:
I'm getting an image as base64 with a ajax request. If the request is complete, I'm making an URL Object from the image, and change the src of the img tag to the url Object. Here my code:
$.ajax({
type: 'GET',
dataType: 'json',
url: MySecretPHPFunctionOnAServerThatReturnsABase64Image...,
complete: function(data) {
var base64Image = data.responseText;
var image = makeUrlObject(base64Image, "image/jpeg");
// ERROR!!! :-)
// Only working in Browser, not on android...
$("#scanPreview").prop("src", image + '?' + genTimestamp());
},
error: function() {}
});
I think the makeUrlObject Function is not the reason for the error, but if you want to see it, for making sure, or if I'm overlooking something ;-)
function makeUrlObject(dataURL, typeURL) {
var binStr = atob(dataURL);
var buf = new ArrayBuffer(binStr.length);
var view = new Uint8Array(buf);
for(var i = 0; i < view.length; i++)
view[i] = binStr.charCodeAt(i);
var blob = new Blob([view], {type: typeURL});
binStr=null;
buf = null;
view = null;
URL = window.URL || window.webkitURL;
return URL.createObjectURL(blob);
};

Instead of .prop("src"
try
var elem = document.getElementById('myimg');
myimg.src="theimage.jpg";
also case sensitive

Get Meta Description from URL using jQuery or javascript

i want to get the meta description of the parent page from an iframe, what i did uptill now is that i get the url of the parent page, pass that url to jquery and try to get the meta description but it doesn't work, my code is as follows
<script type="text/javascript">
function addToInterest() {
var URL = parent.window.location;
var Title = parent.document.getElementsByTagName("title")[0].innerHTML;
var MetaDescription = "";
var Img_Src = "";
var metaDesc = $.get('http://myURL.com', function (data) {
MetaDescription = $(data).find('meta[name=description]').attr("content");
Img_Src = $(data).find('link[rel=image_src]').attr("href");
});
alert(MetaDescription);
alert(Img_Src);
}
</script>
But in both alerts, it shows nothing.. i have already tried the methods told here
but did not successfull.
any sample code please....
Regards:
Mudassir

$.get is asynchronous. Both your alerts executed just after $.get call, but at this moment HTTP request can be still in progress. You need to move your alerts inside of callback function:
<script type="text/javascript">
function addToInterest() {
var URL = parent.window.location;
var Title = parent.document.getElementsByTagName("title")[0].innerHTML;
var MetaDescription = "";
var Img_Src = "";
var metaDesc = $.get('http://myURL.com', function (data) {
MetaDescription = $(data).find('meta[name=description]').attr("content");
Img_Src = $(data).find('link[rel=image_src]').attr("href");
alert(MetaDescription);
alert(Img_Src);
});
}
</script>
Also note, what your code will hit Same Origin Policy. By default you can't dynamically load resources, placed on other host, than you script.

Function Not Defined OEmbed Vimeo API

Started messing around with Vimeo API in an attempt to create a clickable gallery like this (http://www.aideffectiveness.org/busanhlf4/vimeo/php-example.php). However, when I moved some of the code into a "script.js" file as a way to organize my code from the other parts of the site, the json callback keeps saying that the 'embedVideo' function is not defined. Any ideas?
The "script.js" file is placed at the bottom of the page and has the following:
var NS = NS || NS;
NS = {
videoInit: function() {
var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
var oEmbedCallback = 'embedVideo';
var videoid = "";
if(videoid == '' ){
videoid = '23515961';
}
function embedVideo( video ) {
var videoEmbedCode = video.html;
document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
}
function init() {
loadScript(oEmbedUrl + '?url=http://vimeo.com/' + videoid + '&height=380&width=700&callback=' + oEmbedCallback);
}
function loadScript( url ) {
var js = document.createElement('script');
js.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(js);
}
init();
}
}
$(function() {
NS.videoInit();
});
The HTML:
<div id="wrapper">
<div id="embed"></div>
</div>

embedVideo is a local (private) function inside of the init method. Nothing outside it can see it. That's why your AJAX callback is throwing that error.
You can fix this by making embedVideo a proper method of NS, so that's it's visible to your ajax callback
NS = {
embedVideo: function( video ) {
var videoEmbedCode = video.html;
document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
},
videoInit: function() {
var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
var oEmbedCallback = 'embedVideo';
var videoid = "";
if(videoid == '' ){
videoid = '23515961';
}

How to get a youtube playlist using javascript API and json

This is part of my youtube project. I try to extract video information from JSON format but I have problem in this line:
var videoId = data.feed.entry[i].link[1].href;
When I do this in single line not in cikle evrithing is ok but in cikle for or while I have error.
//get youtube ID
function extract(url){
pos1=url.indexOf("videos/");
pos2=url.substr(42,11);
return pos2;
}
//My playlist LINK
var url2="http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json";
function playlistinfo(url1) {
$.ajax({
url: url1,
dataType: "jsonp",
success: function (data) { parseresults(data); }
});
}
//whit this get playlist data
function parseresults(data) {
//return playlist clip number
var klipove= data.feed.openSearch$totalResults.$t;
//put clips in <li>
for(i=0;i<=klipove-1;i++) {
var videoId = data.feed.entry[i].link[1].href;
//get video id ID
var id= extract(videoId);
thumb = data.feed.entry[i].media$group.media$thumbnail[0].url;
$('<li><img src="'+thumb+'" alt="'+id+'" class="thumb"/></li>').appendTo('.cont');
}
}

IMHO, you code can be much shortened if you use $.getJSON, $.each
Try this.
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
if (videoID !='videos') {
list_data += '<li><img alt="'+ feedTitle+'" src="'+ thumb +'"</li>';
}
});
$(list_data).appendTo(".cont");
});
Demo: Fiddle for the playlist you have provided
P.S: Keep in mind that thumbnail for a youtube video could be found at
http://img.youtube.com/vi/{video-id}/default.jpg
( More Info here )

I found that these lines:
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
are expecting item.link[1].href to be in this format:
http://gdata.youtube.com/feeds/api/videos/NAs5it-xjnQ/responses?v=2
However, it does not necessarily work as sometimes item.link[1] gives an URL like
http://www.youtube.com/watch?v=Vcp7xz6dfWE&feature=youtube_gdata
Fragments[fragments.length - 2] will end up being "www.youtube.com" instead of the video ID.
I modified it to retrieve the link from item.content.src which always has a fixed format in the URL e.g.
http://www.youtube.com/v/NAs5it-xjnQ?version=3&f=playlists&app=youtube_gdata
So the final code snippet is something like:
var tmp = item.content.src.split("/").reverse()[0];
var videoID = tmp.substring(0, tmp.indexOf("?"));
which so far has not failed me yet.
Hope this helps those who are stuck or is having problems retrieving the video ID.
Regards
CK

Simplified the solution and got rid of the string manipulation stuff.
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
var vids = new Array();
$.getJSON(playListURL, function(data) {
$.each(data.feed.entry, function(i, item) {
vids.push( item["media$group"]["yt$videoid"]["$t"] );
});
console.log( vids );
});