Pinterest images returning broken after ajax call - javascript

So I'm trying to make a mini app where I can access a bunch of drawing references I pinned on my pinterest board. I managed to get ajax call to work and SOME of the images are appending but then some do not.
I originally used the url property but then everything broke so I switched to link where I managed to get some images but some were still broken. Afterward I added an if statement to weed out images that didn't have a link url.
This worked as I can see the urls popping up in the console, they just don't render images.
Does anyone have any ideas?
//on document start up
$(document).ready(function(){
//declare the global variables:
var queryURL, results, resultURL, imageHolder, image;
//create the url where we will get the images from pintrest
queryURL = "https://api.pinterest.com/v1/boards/gasulliv/concept-art-inspiration/pins/?access_token=AXHj1v5z8_oy5kcy6NtLlZaoY_XAFQ-h5sli9PNErKPqdSA7cQAAAAA&fields=id%2Clink%2Cnote%2Curl";
//empty the div
$("#images").empty();
//performing ajax call
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
console.log(response.data);
//creating a variable for the repsonse data
results = response.data;
//loop through the data
//this is the shorthand for a forloop
for (var i in results){
resultURL = results[i].link;
console.log(results[i].url);
if (results[i].link !== ""){
//put results in a variable and then with each loop append them to the div
imageHolder = $("<div class='imageHolder'>");
image = $("<img>").attr("src", resultURL);
imageHolder.append(image);
$('#images').prepend(imageHolder);
}
}
});
});

Figured it out.
Just a head's up if you do ever run into this problem with pinterest's api, you'll need to make sure your queryURL includes the original be sure to return it like this:
resultURL = results[i].image.original.url;
this should return the original image's url

Don't make your access token accessible to everyone !
then for readability, you can make a code like this :
var tpl = [
"<div class='results'>",
"<div class='card'>",
"<div class='card-result'>",
"<p class='pBlack20'>" + data.response.docs[i].lead_paragraph + "</p>",
"<p class='pBlack14'>" + data.response.docs[i].pub_date + "</p>",
"<a class='FontRed link' target='_blank' href='" + data.response.docs[i].web_url + "'>For more detail</a>",
"<hr>",
"</div>",
"</div>",
"</div>"
]
$('.results-content').append(tpl.join(''));

Related

Multiple independent blob link's on a static Rails web UI

I am creating a web page for a project using Ruby on Rails that will run scripts selected by a user and will build elements on the bottom of the page using JavaScript to display the results. Each result element consists of a Bootstrap collapsible presentation area containing the results. I am implementing a download link at the bottom of each presentation block, which just saves all the text inside as a .txt file to be downloaded. I am using JavaScript blob's to achieve this, but have run into an issue. I need to have a limitless number of links to hold data to be downloaded, but every time a new link is made the previous one stops working for downloads. I have tried saving the blob links into an array and returning resulting link from that, to no avail. The function that builds the blobs is as follows:
var textFile = null,
makeTextFile = function(text){
data = new Blob([text], {type: 'text/plain'});
if(textFile !== null) { window.URL.revokeObjectURL(textFile); }
textFile = window.URL.createObjectURL(data);
return textFile;
};
I could handle the downloads using Ruby on Rails "send_file", but that requires the web page to reload which will lose all the other results. The code that builds the result elements is as follows:
if(document.getElementById("dig").checked == true)
{
$('#dig_wait_img').addClass('hidden');
$('#dig_loading_img').removeClass('hidden');
results = $.ajax({
type:"POST",
url: "/console/discovery/dig",
data: { domain_name : domainInput },
success: function(data) {
resultArr.push(data["value"]);
$('#dig_loading_img').addClass('hidden');
$('#dig_check_img').removeClass('hidden');
$("#results")
.append(
$("<div class=\"panel panel-default\">")
.append(
$("<h4 class=\"panel-title\">")
.append(
$("<a data-toggle=\"collapse\" href=\"#collapse" + count + "\">DIG - " + domainInput + "</a>")
)
)
.append(
$("</h4>")
)
.append(
$("</div>")
)
.append(
$("<div id=\"collapse" + count + "\" class=\"panel-collapse collapse\">")
.append(
$("<pre><div class=\"panel-body\" id=\"body" + count + "\">" + data["value"] + "</div><a id=\"" + count + "\" href=\"" + makeTextFile(data["value"]) + "\" download=\"" + data["file"] + "\">Download</a><div class=\"panel-footer\"></div></pre>")
)
)
.append(
$("</div>")
)
.append(
$("</div>")
)
);
count++;
},
error: function(data)
{
$('#dig_loading_img').addClass('hidden');
$('#dig_x_img').removeClass('hidden');
},
});
}
If anyone has any experience with handling multiple download links made with blob on a static web page, or if you just have any suggestions in general, any help would be appreciated. Thanks in advance
Oh the joys of being tired... After taking a step back and thinking maybe it's not how I'm approaching the problem, but something I assumed was required. The actual problem didn't reside in how I was trying to store the blob links, but the fact that the textFile variable doesn't get reset to null, and I check if the file is not null and revoke the link if so. Removing the if statement in the makeTextFile function solved the problem!

How do I save twitch api image url to png file in a local directory?

Recently I've been working on a custom twitch chat widget for my stream and I've come across a few issues I need to address first.
Here is the code:
var userName = obj.user;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/channels/" + userName,
headers: {
'Client-ID': 'ql93k2lg41xsnebz7kgyfjsrg28j532'
},
success: function(data1) {
var userLogo = data1.logo;
if (userLogo === null) {
userLogo = "https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_70x70.png";
$("#logo").prepend("<div id='logo' class='image'>" + "<img src='" + userLogo + "' style='width:40px;height:40px;'>" + "</div>");
} else {
$("#logo").prepend("<div id='logo' class='image'>" + "<img src='" + userLogo + "' style='width:40px;height:40px;'>" + "</div>");
}
}});
As you can see the script grabs the username from obj.user to create the api url link for each user. Then we pull the logo from the users api.
If logo returns null then we set it to the default image link. Otherwise we pull the url from the user api for their logo and display it on screen.
Now I want to take these urls and have them save to my projects directory as .png's as they are loaded for the first time. This way if we have the image already on hand we can call it from our own personal database instead of constantly calling for it from the twitch api.
How could I edit my script to add a function to check if the .png is in directory, then if not pull it from the api call and save a copy to directory for future use in overlays?
It would also have to name the .png's after each user it's pulling from.

Append image in function jquery

Good evening.
I have this jquery code which allows me, once you press the Enter key, to post a comment.
Fattio that I run an append with the username and the content that the user wants to publish.
In addition to the username I would also like to "hang" the profile picture using their path. How do I post a photo?
Thanks for your help. Here's the code:
function commento_post(id_post)
{
$('.form-commento'+id_post).click(function ()
{
$('#ins_commento'+id_post).keydown(function (e)
{
var message = $("#commento"+id_post).val();
var username = $("#username").val();
var id_user = $("#id_user").val();
if(e.keyCode === 13)
{
$.ajax(
{
type: 'POST',
url: 'http://localhost/laravel/public/index.php/post/ins_commento',
data: { commento: message, id_post: id_post },
success: function(data)
{
$('#commento'+id_post).val('');
$('#commentscontainer'+id_post).append
(
/*$(".username-commento"+id_post).html
(*/
$('<a/>',
{
text : username, href : 'http://localhost/laravel/public/index.php/utente/'+id_user
}).css({'font-weight':'bold'})
//)
).append(' ').append(message).append($('<br/>'));
var el = $('#numero_commenti'+id_post);
var num = parseInt(el.text());
el.text(num + 1);
}
});
}
});
});
}
In your success function, you could simplify everything quite a bit in the following way while not using jQuery append so much, but just using a variable to store your code and then appending it in one go. This will allow you to append all sort of elements, it's easily parseable for the you and it reduces the amount of calls you have to make.
// Add whatever you want your final HTML to look like to this variable
var html = "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a>";
html += message;
// add an image
html += "<img src='path/to/image.jpg' />"
html += "<br />";
// append to code you constructed above in one go
$('#commentscontainer' + id_post).append(html);
Update
I amended an incorrect quote and changed + id_user + "to + id_user + "', which makes everything after it work.

Remove multiple records serverside with ajax and jquery

I'm trying to delete multiple tables with a same class name, my js code snippet works once and it doesn't loop to the next table unless the page is refreshed again.
when I comment my ajax call and just run it plain jquery it works fine. , I think there's an issue with my ajax call somewhere....
This jsfiddle url http://jsfiddle.net/ehsansajjad465/ExnkV/ has the snippet without the ajax....how do I make sure the ajax call works properly rather refreshing my page every time?
$(".closeprod").live("click",function(e){
e.preventDefault();
elem = $(this).parents('.tbl');
//get serial number
prodsn = $(".tbl").find(".prodsn:eq(0)");
sn = $(prodsn[0]).html().substr(5);
tpl = "anything";
url = "delprod.asp?email=<%=email%>&sn=" + sn + "&t=" + tpl + "&nf=notfeatured";
//remove product from xml file
$.get(url, function(data,status){
if (data == "OK") {
//remove product from template
elem.remove();
}else{
alert("opps something is wrong")
}
});
});
I figured it out this line prodsn = $(".tbl").find(".prodsn:eq(0)"); should be prodsn = elem.find(".prodsn:eq(0)"); and it worked like this

FB api call in for loop

I'm trying to get all facebook comments with profile pictures of commentators through fb.api() call. Currently all comments gets outputed i just can't get profile pictures to append to appropriate comment.
In for loop which loops through all comments is another FB.api call which gets the profile pic of user who commented on video and than append them into single comment block. With this code i get profile pictures of all users who commented in every single comment.
What am i doing wrong?? Thank you in advance!
var komentarji_length = response.comments.data.length;
for (var i = 0; i < komentarji_length; i++) {
var user_id = response.comments.data[i].from.id;
FB.api("/" + user_id + "/picture", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});
var ime = response.comments.data[i].from.name;
var message = response.comments.data[i].message;
$(".fb_comments").append('<div class="single_comment"><div class="comments_profile_pic' + i + '"></div><div class="name">' + name + '&nbsp says:</div><div class="single_message">' + message + '</div></div>');
}
Issue 1: comments_profile_pic_link is not defined, the variable is: profile_pic_link.
But then also the problem will not be solved. When you call "/" + user_id + "/picture" it is redirected to the image url automatically. So you can directly use the image url as: https://graph.facebook.com/{user-id}/picture. No need to make the API call unnecessarily.
Example
Still if you wish to get the proper image url (not required though), use redirect=0 with your call-
FB.api("/" + user_id + "/picture?redirect=0", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});

Categories