I'm developing a web app, using Jquery Mobile, I have to make an Ajax/Json to a PHP to retrieve MySQL data, when I get the JSON Callback, and create the "list" from the array, the path of the jquery mobile css file get lost, and my is not well formed. This is my code :
$.ajax({
url: "busca_reservas.php",
data: "fecha=" + fecha + "",
dataType: 'json',
type: "POST",
cache: false,
success: function(data){
var output = '<ul data-role="listview" data-inset="true" id="reservas" class="listareservas">';
var logsData = data;
for (var i in logsData.logs){
regis = logsData.logs[i].recid;
nombre = logsData.logs[i].nombre;
ape = logsData.logs[i].apellido;
output+= '<li>' + regis + " " + nombre + " " + ape + '</li>';
}
output+='</ul>';
$('.listareservas').listview('refresh');
$("#result").append(output).fadeIn(500);
console.log(output)
}
});
The content in my looks like plain text, instead of Jquery Mobile "List View".
Any help wil be welcome ?
Thanks in advanced
Try putting the refresh after the append:
$("#result").append(output).fadeIn(500);
$('.listareservas').listview('refresh');
I vaguely remember this issue when I was working on a jquery mobile project ahwile back. I basically came to this solution
function refreshLayout() {
$("div[data-role=page]").page("destroy").page();
}
which I would call with every ajax success function. You may have to modify the data-role portion to fit what needs to be refreshed in your project. Hope that helps
Related
I would like to have the recent posts of an specific user, like Banksy.
I came up with the following, but it will give me an error of:
GET https://api.instagram.com/v1/users/banksy/media/recent/?access_token={token}&callback=jQuery11110924438442569226_1445956181244&_=1445956181245
My ajax call looks like this:
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/banksy/media/recent/?access_token={token}",
success: function(response) {
console.log('jfsdahuifhasudh')
console.log(response);
// placing the images on the page
// for (var i = 0; i < 6; i++) {
var html = '<a href="' + response.data[i].link + '" >'+
'<img src="' + response.data[i].images.low_resolution.url + '" alt="thumbnail" /></a>';
$(".instafeed").html(html);
// }
},
error: function(data) {
console.log('We have a problem!');
}
});
You're using the username in your query; banksy in your case. Resolve the username into ID then use the id in your query. For example;
https://api.instagram.com/v1/users/45951573/media/recent/?access_token={token}
*The API will return posts only if the account is public.
Edit
To get posts tagged with a specific hashtag use:
https://api.instagram.com/v1/tags/{tag-name}/media/recent?access_token={token}
Further reading: Instagram API; Tags
Update
instaJS is a jQuery plugin I wrote in past. What makes this plugin unique is that it accepts username instead of forcing users to resolve their id. Completely Free to use :), and of course contribution is always welcomed InstaJS on Github
I am relatively new at AJAX/JSON, So apologies in advance if this turns out to be a bit of stupid question.
To practice my AJAX/JSON skills I am trying to make an weather web application. So I managed to find an api on the openweathermap website.
By using the .ajax() jQuery function I managed to load the data on my page. So I tried to take it to the next level by using an input field to change the location of the weather forecast. This is where I got stuck. I tried variety functions and approaches but I can't wrap my head around it.
This is what I've got right now.
$(document).ready(function(){
var $city = "New York, USA";
var $parameter = "Imperial";
var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
var $input = $('.search'); //input field
$input.blur(function(){
$city = $input.val();
console.log($city);
});
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
});
I searched for a while on this forum but I couldn't quite find what I'm looking for.
I hope someone can help me!
Thanks!
EDIT
Thanks a lot guys for the great and fast response!!
The easiest way to achieve what you want would be to put the AJAX call inside the blur event you linked to input field.
And you will also need to regenerate the $urlLocal value before doing the AJAX call.
It could be something like that:
$input.blur(function(){
$city = $input.val();
$urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
});
The reason your code is not working is because you're not calling the ajax in your blur event. the map is loaded in the document.ready event since the ajax function is written in the document.ready event. you need to create it as a function and call it both in the document.ready and the input blur event.
try enclosing your ajax call in a method like this
function LoadMap(){
var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
$.ajax({
dataType: "json",
url: $urlLocal,
success: function(data) {
console.log("success", data);
$('.temp').html(data.main.temp + "℉");
$('.location').html(data.name);
}
});
}
and call this method in the document.ready event as well as the input blur event.
$input.blur(function() {
$city = $input.val();
console.log($city);
LoadMap();
});
here's a working JSFIDDLE for the same.
i have an ajax call and i am getting a response from the call. the code is like this:
<div id="flow_#id#~#sid#" style="margin: 0 10px 0 0;float:right;height:150px;" class="code">
<img src="/assets/codes/#code#.jpg" style="max-height: 230px;">
</div>
What i am doing is the response i get from my ajax, i want to replace the contents of the div tag with the value coming from my ajax success
ajax call is like this
$.ajax({
url: 'bc.cfm?ID=' + getID + '&ssID=' + getSID,
type: "GET",
cache: false,
success: function(data){
$("#flow_" + getID + "~" + getSID + " img:last-child").remove();
$("#flow_" + getID + "~" + getSID).html(data);
}
});
But a complete html page is coming in success, i can the img in firebug, but a complete html source is there, how can i extract that img tag and replace with the one which is already there above [the id is going to be same for both for identification, only 1 will be used, we will be removing and adding again]
If you want to just extract image from the response, you can try this. I have not tested the code, but it should work. Please check it.
success: function(data){
// get the image tag from the response
var $img = $(data).find('img');
$("#flow_" + getID + "~" + getSID + " img:last-child").remove();
// replace
$("#flow_" + getID + "~" + getSID).html($img.html());
}
Use JSON instead
for example:
javascript
$.ajax({
type: 'POST',
url: 'yourphpfile.php',
dataType: 'json',
success: function (x) {
console.log(x.imgtag); // img
}
});
return false;
php
<?php
header('Content-Type: application/json');
$output=array();
$output['imgtag']='<img src="myimg.jpg">';
echo json_encode($output);
?>
Place whatever you want into the $output array (such as img tags) and you may easily access it in JavaScript.
I have this written up for send a few variables to a php script:
$(function() {
$('a[class="removeUnread"]').click(function(){
var markedtopicid = $(this).attr("id");
var sessionvar = \'', $context['session_var'], '\';
var sessionid = \'', $context['session_id'], '\';
$.ajax({
url: "index.php?action=quickmod;board=', $context['current_board'], '",
type: "POST",
data: sessionvar + "=" + sessionid + "&topics[]=" + markedtopicid + "&qaction=markread",
});
});
});
I think this is the correct way to send post data via ajax, but it doesn't appear to be sending. Was I right to wrap the code in the ready function?
I can tell you right off the bat you should not have a semicolon between quickmod and board in your URL. I'm answering here because i cannot post comments yet. One good tool to use in web development ESPECIALLY with GET and POST requests is googles PostMan app. Its free to use and what it does is it will show you the exact output of any link you send it. So you can try putting the link that you make via javascript into postman and see what errors it spits out.
In this example i'm pretty sure your URL is all kinds of screwed up though. Try this instead...
"index.php?action=quickmod&?board="+$context['current_board']
fyi, i did not test that link so it may not work. If it doesnt work, google some ajax examples and javascript string concatenation. You're string is not suitable for ajax.
is should be like this...
$.ajax({
url :'index.php',
type : 'POST',
data : { sessionvar: sessionid, topics:markedtopicid},
success : function (data) {
},
error : function () {
}
Try handling the error:
$.ajax({
url: "index.php?action=quickmod;board=', $context['current_board'], '",
type: "POST",
data: sessionvar + "=" + sessionid + "&topics[]=" + markedtopicid + "&qaction=markread",
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
}
});
I'm doing ajax calls in a specific time interval using javascript setInterval function however the ajax code is being executed twice, so I'm getting the same response twice and I have no idea why this is happening, here's the code:
setInterval(function () {ajaxCall();},15000);
function ajaxCall(){
var uri = "url here";
$.ajax({
type: "GET",
url: uri,
dataType: "jsonp",
success: function(response){
console.log(response);
var txt = $("#textarea");
txt.val( txt.val() + response.user + " (" + response.time + ") > "
+ response.text + '\n');
}
});
}
Any help would be appreciated.
Thanks
Ok so I just figured it out, I had that script inside the html body tag but if I move it inside head tags it stops calling it twice, not sure why this is but it solved the problem.
Sorry for wasting your time for something that simple xD