Get .ajax results per post ID - ajax

On Tumblr, I've got several posts that I'm trying use .ajax to get data from specifically. I'm using an .each to only get data for audio posts. But the problem I'm running into is that it's returning all the posts, not just audio posts. I'm even specifying the json path for each specific post ID. I know I'm probably setting this up completely wrong as I'm not too familar with using .ajax.
$('.audio.post').each(function() {
var audiopostID = $(this).attr('id');
var audioPath = '/api/read/json?id=' + audiopostID;
$.ajax({
url: audioPath,
dataType: 'jsonp',
timeout: 5000,
success: function(data) {
console.log(data);
}
});
});
As I mentioned, it returns all the posts, not the specific posts I'm trying to get with audioPath. The individual json paths do exist, it just seems the .ajax ignores the individual ones and grabs everything. Here's the first two audio post json paths:
http://testrtheme.tumblr.com/api/read/json?id=46623753663
http://testrtheme.tumblr.com/api/read/json?id=46483357977

You're pulling the ID field from the following code:
<article class="post text brick" id="post-46308156089" data-postID="46308156089" data-permalink="http://testrtheme.tumblr.com/post/46308156089/test">
The id here is:
post-46308156089
Based on that you're URL looks like:
/api/read/json?id=post-46308156089
Try and change your code to the following:
$('.audio.post').each(function() {
var fullaudiopostID = $(this).attr('id').split('-');
var audiopostID = fullaudiopostID[1];
var audioPath = '/api/read/json?id=' + audiopostID;
$.ajax({
url: audioPath,
dataType: 'jsonp',
timeout: 5000,
success: function(data) {
console.log(data);
}
});
});

Related

Search form query in URL

I have a regular POST form for my search function. I currently have the following route:
Route::post('/search', 'PostController#search');
I get the form data using jQuery/AJAX:
$('form').on('submit', function(event)
{
event.preventDefault();
var form = $(this);
$.ajax({
url: '/search',
type: 'post',
data: form.serialize(),
dataType: 'json',
success: function(data)
{
//
},
error: function(data)
{
//
}
});
});
However, when the results page is shown, it only shows /search in the URL without the user's query, like:
http://www.website.com/search
What I want is to do something like /search/{user query here}, like:
http://www.website.com/search/bob
Essentially, I want to be able to show the user's query within the URL.
How can I do this and how can I do this safely?
You have two options.
Use normal form and give action as "user/{user_name}" when submit without using jQuery.
For that add a route like that.
Route::get('/search/{user_name}', 'PostController#show');
When your ajax success redirect it to the page "user/{user_name}"

jquery ajax get XML from another domain

Hey all here is my code i have to read an XML file from a Vimeo website:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://vimeo.com/api/v2/video/51229736.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('video').each(function(){
var thumbURL = $(this).attr('thumbnail_small');
alert(thumbURL);
$('#vidThumb').html('<img src="' + thumbURL + '">');
});
},
error: function(err) {alert('err');}
});
});
The XML looks like this:
<videos>
<script/>
<video>
<id>51229736</id>
<title>CHATT HISTORY CENTER FILMS CAVALIER</title>
<description/>
<url>http://vimeo.com/51229736</url>
<upload_date>2012-10-11 13:08:51</upload_date>
<thumbnail_small>http://b.vimeocdn.com/ts/353/072/353072229_100.jpg</thumbnail_small>
<thumbnail_medium>http://b.vimeocdn.com/ts/353/072/353072229_200.jpg</thumbnail_medium>
......
</video>
</videos>
Problem being is that it errors out. I'm sure its because of the different domain name trying to read it so how can i fix that in order to do that?
You can not do that through jQuery's ajax across different domains using XML , you can use callback=? to get jsonp response back like in the other answer , if it is possible to get json response from that url
You should have no problem getting an XML response from your server side , you should probably try that route
Achieved it by doing the following:
var vimeoVideoID = '51229736';
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(json) {
$("#vidThumb").attr('src', json[0].thumbnail_small);
});
I think the answer is in setting the callback to "?" at least it usually is for me. This at least works with JSON. And if it were JSON, this is how I would do it:
var query = 'http://vimeo.com/api/v2/video/51229736.xml&callback=?';
$.ajax({
url: query,
type: 'GET',
dataType: 'json',
success: function(s) {
console.log('success' + s)
},
error: function(e) { console.log('something went wrong!', e)}
});

How do I use data passed back in the response from ajax jQuery?

I am trying to use the response from a jQuery ajax request to set the innerHTML of a div with a certain id. This is the code I am using:
$(".show_comments").click(function(){
var articleName = $(this).closest("article").find(".articlename").attr('id')
$.ajax({
url: "commentView.php",
data: { 'articleName': articleName },
cache: false,
dataType: "html", // so that it will auto parse it as html
success: function(response){
$(this).closest("article").find(".comments").html(response);
}
});
however it doesn't seem to be doing anything at all, I've tried googling around, but everything I can find says to do it the way I am doing it... I have tested in Firebug and the ajax request is giving me the exact response I want it too... But I just cant access this to set the innerHTML of the div to the response!
In your ajax success handler there is another scope and this points to not what you think. So change your code to:
var articleName = $(this).closest("article").find(".articlename").attr('id'),
that = this;
$.ajax({
url: "commentView.php",
data: { 'articleName': articleName },
cache: false,
dataType: "html", // so that it will auto parse it as html
success: function(response){
$(that).closest("article").find(".comments").html(response);
}
});
What I've changed: I added that variable that points to this instance and use it in the success handler instead.
How would you debug it yourself: if you tried to output console.log(this) and console.log($(this).closest("article").find(".comments")); you would see that it returns a wrong object (in first case) and nothing in second.

jQuery AJAX data to HTML

EDIT: Ok, so the solution i came up with, is basically count the characters and see the difference between the numbers. One headache i had was related with the fact that the .html() didn't showed me the with the slash, instead, . Annoying....
function verifica(){
$.ajax({
type: "GET",
datatype: "html",
url: 'icallverifica.php',
data: "valor=0",
success: function(data) {
var verificando = $('#results').html();
var verificandox = (verificando.length);
var verificador = data.length;
if(verificandox != verificador){
$('#results').html(data);
}
}
});
}
I'm creating a little script using AJAX that retrieves data from a database. The problem is that I've used setInterval and it's refreshing all the time.
I don't have a problem with too many accesses to the database, my problem is that I want the content as static as possible until there are new entries on the database:
function verifica() {
$.ajax({
type: "GET",
datatype: "html",
url: 'icallverifica.php',
data: "valor=0",
success: function(data) {
var verificando = $('#results').html();
if (verificando != "<html>"+data+"</html>") {
$('#results').html(data);}
}
});
}
The function changes the #results div introducing the database information, the thing is that I don't want to change the div content unless there are any new entries.
What I did was check on the database and compare the previous content on the div, if it's the same, it will not overwrite.
BUT, i can't put data in html format...
Try changing the success handler to:
success: function(data) {
var verificando = $('#results').html();
if (verificando != data) {
$('#results').html(data);}
}
}
Did you try this instead ?
if ( verificando != data ){
$('#results').html(data);
}
You shouldn't need to concatenate <html> to the data while comparing it.
Such comparison is a overkill. You can basically check the ids associated to each result and then just refresh only the part which is new.
May be you can send the ids along with the ajax request itself and then filter out the response and send only which are the new results.

How do I get data out of the "data" variable in jQuery and Django

I think it goes a little something like this:
In my view:
from django.core import serializers
And later....
data = serializers.serialize('json', MODEL.objects.filter(id=id), fields=('points'))
return HttpResponse(data)
In my jQuery:
$.ajaxSetup({
dataType: "json"
});
$('#selector .selector_detail a').click(function() {
var call_to = $(this).attr('href');
$.ajax({
url: call_to,
type: "POST",
complete: function() {
console.log('Ajax Complete')
},
success: function(data) {
points = data(fields.points)
console.log('Ajax Successful')
console.log(data);
},
error: function(xhr) {
console.log('Whoops, something went wrong. XHR Response:' + JSON.stringify(xhr));
},
});
return false;
});
I want the value of points, but I have no idea how to get it out. I can see it in the console.log when I look at the data Objects. What am I missing?
if data is a json object and the correct headers are set, you can access it's properties using a dot:
data.points
data[0].points //if points is an array
//this is not correct
data(fields.points);
I don't know what's the exact structure of 'data' but you can derive it from your console.log(data);
EDIt - if data has the structure you outlined in the comment you can access points like this:
alert(data[0].fields.points);
add dataType: 'json' to your .ajax call.
$.ajax({
url: call_to,
dataType: 'json',
type: "POST",
then its jut data.points in your success function, or perhaps data.field.points. I can't tell from your post.

Resources