I am trying to return the function result for all the items using an AJAX function, as it is only showing the data for the latest item. Code is working fine when it only has to show the data for 1 item, however when it has to show it for more than 1, it shows the same one for all of them.
I was testing with alert and it was working fine, it was rendering the data from the image size correctly for each of the items..
I am using this:
var xhr = $.ajax({
type: "HEAD",
url: imageBase,
success: function(result){
$(".banner-block .title").html(xhr.getResponseHeader('Content-Length') + ' bytes');
}
});
What is missing so each item displays its particular image size correctly?
Thank you in advance
Your probelm might be that jquerys .html() function replaces. Does it work if you change it to $(".banner-block .title").append(xhr.getResponseHeader('Content-Length') + ' bytes');
Related
I have the following code:
var zoneListEl = $("#zones-list"),
zoneListPopupEl = $("#zones-list-popup");
$.ajax({
type: 'GET',
url: 'https://my-domain.com/api/v1/zone/get-zone-by-ip'
}).then(function (data) {
var zone = data.data.zones,
option = new Option(zone.name + ", " + zone.abbreviated_state_name, zone.id, true, true);
zoneListEl.append(option).trigger('change');
// zoneListPopupEl.append(option).trigger('change');
});
The code above works well. I mean, on the page load that ajax call happens and puts the response as an option inside the $("#zones-list") (which is a select element) as a default value.
My problem is, I have two different select elements that I want to do the same for both. When I uncomment the following line
zoneListPopupEl.append(option).trigger('change');
Then the code doesn't work (without throwing error) and I cannot see any default value (<option>) for neither selects. Why? Why when I do that for one select it works well but for two selects, it doesn't?
Update: I set that line inside setInterval like this:
setInterval(function(){ zoneListPopupEl.append(option).trigger('change'); },3000);
In this case, the default value (option) will be shown for zoneListEl on page load and after 3 sec it does away.
I am creating a program which allows users to print Instagram photos at an event by selecting them from a feed using a touchscreen.
However, I'm struggling to use the images as selectors once I've pulled them in.
I'm fetching the images as follows:
$.ajax({
url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data){
console.log(data);
for(x in data.data){
identifier++;
$('div').append('<img id="image' + identifier + '" src="'+data.data[x].images.standard_resolution.url+'"></img>');
}
},
error: function(data){
console.log(data);
}
});
In order to output a specific image, I'll obviously need to be able to determine which image has been selected, so I'm trying to use images as selectors (in this example, image1). However, I can't seem to persuade the below to work:
$(document).ready(function(){
$("#image1").on("click", function(){
window.print();
});
});
It does work when I use $("div") as a selector, but that's obviously not much help in determining which image has been clicked.
(I haven't got round to properly outputting everything yet - hence why I'm using window.print())
Can anyone point out where I'm going wrong? Thanks!
It seems like the problem is you are binding the event even before the images are created. You have to bind the event just after the elements are created i.e in this case , in the success function of ajax method. Like this
$.ajax({
url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data){
console.log(data);
for(x in data.data){
identifier++;
$('div').append('<img id="image' + identifier + '" src="'+data.data[x].images.standard_resolution.url+'"></img>');
}
$("#image1").on("click", function(){
window.print();
});
},
error: function(data){
console.log(data);
}
});
You are fetching images and adding them dynamically so when the document is ready the selector $('#image1') is not there .
What you can do is selecting the $("div") and inside that div select the image.
$(document).ready(function(){
$("#div").on("click","#image1" function(){
window.print();
});
});
Well, I don't know if you're actually initializing 'identifier' or not, if not then you probably are not creating a id of "image1".
That said, a much easier way to go is to just tie the click event to a selector matching all image children of the div, and then get the clicked one from the event:
$("div > img").on("click", function(e) { console.log($(this).attr('src')); })
That should log the url of the image you've associated with the tag clicked.
I've made some code with jQuery that whenever I press a button I shall retrieve some information. This works fine with 3 of my tables, but of some reason that last table wont work.
My jQuery code looks like this
$.ajax({
url: "ajax.php",
type: "get",
datatype: "json",
success: function(data){
var parsed = jQuery.parseJSON(data);
$.each(parsed, function(i){
var oldhtml = $('p').html();
$("p").html(oldhtml + "<br>Name: " + parsed[i]['name']);
});
}
)};
So I have this connected to a button and an onclick function. So my PHP code echoes an associative array, and it works fine with my tables moment1, moment2, moment4. But whenever I try to use it on my table called konsult, I get syntax error.
"Unexpected end of JSON input at Function.parse [as parseJSON] (anonymous)".
It it something with my table or what is the problem? I use the same code to get info from the first tables. I only switch the tablename and instead of "parsed[i]['name']" I have "parsed[i]['titel']"
EDIT: It seems to be fixed. One of my cells had a "รถ" which for some reason gave me syntax error.
I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!
Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html
I want to implement something like the link above. Now this pops up the box's fetching data from some page, using PageID and what not. I want the content of that popup box to have simple HTML stuff in it and it will be bound later. The one above has got Ajax that I am not familiar with.
What do I need to change in the code? All I want is a simple pop up box that looks exactly like the one above, opens up the same way and all, BUT has got simple HTMl stuff in it. What and where do I make changes?
Although you haven't posted any of your attempts at doing this yourself, I will try to help you out.
If I understand correctly, you want to get rid of the AJAX and just add normal HTML right?
Well, I will at least tell you where to put your HTML to get you started.
You see on their website, at line 51 it says:
$('#personPopupContent').html(' ');
You can change the nbsp bit to any HTML you want.
For example:
$('#personPopupContent').html('<strong>My strong text</strong>');
You can also delete from lines 53 to 74 where it says:
$.ajax({
type: 'GET',
url: 'personajax.aspx',
data: 'page=' + pageID + '&guid=' + currentID,
success: function(data)
{
// Verify that we're pointed to a page that returned the expected results.
if (data.indexOf('personPopupResult') < 0)
{
$('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.Please have your administrator check the error log.</span>');
}
// Verify requested person is this person since we could have multiple ajax
// requests out if the server is taking a while.
if (data.indexOf(currentID) > 0)
{
var text = $(data).find('.personPopupResult').html();
$('#personPopupContent').html(text);
}
}
});
Since you won't be using it.
I hope that helped you.