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.
Related
I have a link, which links to domain.com , when a person clicks, I want it to do an ajax call to counter.php and post 2 variables to it, so it can add 1 to the views for that link.
I have a link:
Link Title
How would I do this with jquery?
EDIT:
I tried something like this
function addHit(str, partNumber){
$.get("counter.php", { version: str, part: partNumber })
}
It seems to work, but in firebug, the request never completes... it just does that "working..." animation. counter.php echos out some text when its done (doesnt need to show up anywhere).
From the jQuery documentation: http://api.jquery.com/jQuery.ajax/
function addHit(data1, data2)
{
$.ajax({
type: "POST",
url: "http://domain.com/counter.php",
data: "var1=data1&var2=data2",
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
}
});
}
You need to add a callback on success
function addHit(str, partNumber){
$.get(
"counter.php",
{
version: str,
part: partNumber
},
function(data){
alert("Data Loaded: " + data);
})
)};
In the case of an anchor, you're leaving the page, so firebug's going to show some weird behavior here as it thinks execution would stop. Unless you're also preventing the default event behavior of the anchor...you're leaving the page and the request (in firebug's view) is discarded.
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');
My problem is little strange. Of course I checked many examples before I write here.
I have a div element at aspx i am sending Post with AJAX to populate it
<script>
function send(inputa, inputb) {
var dataString = JSON.stringify({
Id: inputa,
Opt: inputb
});
$.ajax({
type: "POST",
url: "my.aspx/Myfunction",
data: dataString,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
$("divtable").val(result.d);
},
error: function () {
alert("Problem Occured");
}
});
}
</script>
At alert I can see my response is good with no problem, but I could not send it to my div element. I tried many scripts
$("divtable").val(result.d);
$("#divtable").val(result.d);
$("divtable").html(result.d);
$(.divtable).val(result.d);
and I could not success. Every searh I made I found different answers.
Can someone good at this give us the correct answer please.
You can't call val() on a div, because it is not an input, select, etc. And you probably should not use html() if you're not inserting markup. Try text() instead.
Also, your selector may not be correct: could you post your div HTML as well?
Try
document.getElementById("divtable").innerHTML = result.d
or
$("#divtable").html(result.d);
You cant use val with div, but You can use innerHtml or Jquery's html but use a valid selector like an id "#divtable" or a class ".divtable" not sure what your html looks like :)
JSFIDDLE;
I am trying to create an action that allows me to post an anchor href with an ajax call. Firstly the anchor tag is created with a backend set up so it cannot be inside a form etc so that is not going to work.
Here is the markup for the button, the href is added dynamically with js:
<a class="js-add-to-cart button buying-options buy-button" data-products-in-cart="<?= $products_in_cart ?>">
Select a size
</a>
I have currently got this code working which posts the anchor:
jQuery(function(){
jQuery('a.buy-button').click(function(event) {
event.preventDefault();
jQuery.ajax({
url: jQuery(this).attr('href'),
type: 'POST',
async: true,
beforeSend: function(){
jQuery('#result').hide();
jQuery('#ajax-loader').show();
},
error: function(xhr, status, thrown){
alert(xhr + ',' + status+ ',' + thrown);
},
complete: function(){
jQuery('#ajax-loader').hide();
},
success: function(data) {
jQuery('#result').empty().append(data);
jQuery('#result').fadeIn('slow');
}
});
});
});
It works but my only issue is that it basically does a get request and in the header network response I get this:
This does not post the add to cart url and make the product added to cart.
Does anyone know how this can be done?
Cheers,
Mark
try to see if the POST-action is actually triggered within the PHP code. It seems like it should be working.
Also the 'async' parameter is superfluous since you're already calling an A-jax function
perhaps using the .post() shorthand will help you (and also clean up your code).
I'm assuming that you are not using the $ alias for jQuery because you are not aware of it, and not because of any conflict issues.
$(function(){
$('a.buy-button').click(function(event) {
event.preventDefault();
$('#result').hide();
$('#ajax-loader').show();
$.post($(this).attr('href'), function (data) {
$('#ajax-loader').hide();
$('#result').empty().append(data);
$('#result').fadeIn('slow');
});
});
});
I load data set by Jquery AJAX as
$(function(){
$('#next').submit(function(e){
e.preventDefault();
var form = $(this);
var page = form.attr("action")
$.ajax({
type: 'POST',
url: page,
success: function(html){
$("#results").append(html);
}
});
});
});
The form is a single button with action="load.php?page=2".
When pressing submit button of the form, it will load data from load.php?page=2. How can I remember this action to load data from load.php?page=3 upon next click? and reading subsequent pages?
In fact, I want to introduce a new variable for the page number will be increased upon every click.
I would use an RegEx to slice the number from the end of the action attribute and replace the action in the success handler with the incremented page number.
I've also changed the line b.attr("action") to form.attr("action") as I think that is a typo in your version. If not stay with the original version of that line :)
$(function(){
$("#next").submit(function(e){
e.preventDefault();
var form = $(this),
page = form.attr("action"),
page_nr = (/\d+$/.exec(page) || ["2"])[0];
$.ajax({
type: 'POST',
url: page,
success: function(html){
form.attr("action", page.substring(0, (page.length - page_nr.length)) + (+page_nr + 1));
$("#results").append(html);
}
});
});
});
Example: http://jsfiddle.net/WfrU7/
you could just set a javascript var to represent page and then increment it on submit...
var page = 1;
$(function(){
$('#next').submit(function(e){
e.preventDefault();
var form = $(this);
$.ajax({
type: 'POST',
url: page,
success: function(html){
$("#results").append(html);
page += 1;
}
});
});
});
I don't know what your original page var had in it, but obviously you would tailor this response to fit your needs. your url param would not just be a single number, obviously, so update that part as you need.
The best way to handle these "need to keep history of" is, believe it or not, a dom element. We get so tied to programming, variables, and literals that we just forget the simple side of things. And, apparently, simple is what no one has in mind.
So, the "simple" solution is on the script of the page being loaded, save your querystring parameter (page=2 ... the 2) on a
<span id='curPageNumber' style='display:none; '>
in the loaded page. In the next call, all you have to to is, for example, onSubmit='functionSubmit(); ' and
function functionSubmit() {
var action="load.php?page="+$('#curPageNumber').text()*1+1;
$('#formID').attr('action',action);
$('#formID').submit();
}