I am trying to call a function on href but its showing undefined function but the function itself is working when I call it inside album loop. Is there some other way of calling the function after appending the href? I tried using jquery onclick with the id of anchor but that doesn't work either and got no error. Any idea how I should be calling?
function getPhotosByAlbumID(albumID){
FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
$(photos.data).each(function(index, value){
console.log(value.source);
});
});
}
FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
$(me_album.data).each(function(index, value){
FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {
$('#facebook-cover').append('<li id="'+value.id+'"><img src="'+picture.data.url+'" /></li>');
});
});
});
Error: Uncaught ReferenceError: getPhotosByAlbumID is not defined
All appended like so..
<ul id="facebook-cover">
<li id="4758611198834"><img src="image-link"></li>
</ul>
try
var li=$('<li id="'+value.id+'"></li>');
var anchor=$('');
anchor.click(function(){
getPhotosByAlbumID(value.id);
return false;
});
var img=$('<img src="'+picture.data.url+'" />');
anchor.append(img);
li.append(anchor);
this way your click event must work. unless there is any error inside getPhotosByAlbumID();
you can also return false from the same function
My guess would be that the js-file is not properly included in the page where the html is. One easy way of testing if this is the problem would be to just put the javascript in the same file as your links. If this solves the problem, you have an include error.
Like so:
<script type="text/javascript">
function getPhotosByAlbumID(albumID){
FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
$(photos.data).each(function(index, value){
console.log(value.source);
});
});
}
FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
$(me_album.data).each(function(index, value){
FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {
$('#facebook-cover').append('<li id="'+value.id+'"><img src="'+picture.data.url+'" /></li>');
});
});
});
</script>
<ul id="facebook-cover">
<li id="4758611198834"><img src="image-link"></li>
</ul>
I notice you originally had a significant amount of indentation in your JS code. Is your getPhotosByAlbumID function within some other function perhaps? Something like this:
var module = (function () {
...
function getPhotosByAlbumID(albumID){
...
}
If so you need to make it accessible. Here is some info on the module pattern which may be useful.
Related
I have the following file named navbar.php. and I wanted it to be refreshed with a time delay so I used the js function bellow and it works fine. problem is when page refreshed it doesnt go to the actual path, instead it adds the name of the controller and function to the source path and return 404 , help pls.
<div class="group" id="mydiv">
<!--some content -->
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function() {
$.get("application/views/templates/navbar.php", function (result) {
$('#mydiv').html(result);
});
}, 15000);
});
Chrome console log says : GET http://localhost/HDMSV2/dashbord/Dashbord_Controller/application/views/templetes/navbar.php 404 (Not Found)
Try domain relative path to php file
$(document).ready(function () {
setInterval(function() {
$.get("/application/views/templates/navbar.php", function (result) {
$('#mydiv').html(result);
});
}, 15000);
});
But I think you need to go to some controller and create function there that will return you proper values, because it won't make too much sense accessing view file if it isn't populated with data from controller as that is how MVC pattern should work
So in your controller RefreshController create function refresh_navbar()
public function refreshNavbar() {
$this->load->view('navbar');
}
And then your script would go something like this
$(document).ready(function () {
setInterval(function() {
$.get("/refresh/refresh-navbar", function (result) {
$('#mydiv').html(result);
});
}, 15000);
i am using smoke.js which allows to style the classic alert javascript windows.
All you have to do is place .smoke before the alert ie. smoke.confirm()
The issue I am having is with the ok/cancel callback, it isnt working for me.
This is the example the website shows.
`You can implement these the same way you'd use the js alert()...just put "smoke." in front of it.
The confirm() replacement, however, needs to be used just a little differently:
smoke.confirm('You are about to destroy everything. Are you sure?',function(e){
if (e){
smoke.alert('OK pressed');
}else{
smoke.alert('CANCEL pressed');
}
});
and the code I have is;
$(".upb_del_bookmark").click( function() {
if(smoke.confirm(delete_message)) {
var post_id = $(this).attr('rel');
var data = {
action: 'del_bookmark',
del_post_id: post_id
};
$.post(upb_vars.ajaxurl, data, function(response) {
$('.bookmark-'+post_id).fadeOut();
$('.upb_bookmark_control_'+post_id).toggle();
});
It shows the style button and everything but when i click on OK it doesnt perform the function above, nothing happens.
So i rewrote it to
$(".upb_del_bookmark").click( function() {
if(smoke.confirm(delete_message, function(e))) {
if(e){
var post_id = $(this).attr('rel');
var data = {
action: 'del_bookmark',
del_post_id: post_id
};
$.post(upb_vars.ajaxurl, data, function(response) {
$('.bookmark-'+post_id).fadeOut();
$('.upb_bookmark_control_'+post_id).toggle();
});
}}
But now when i click it doesnt even show anything
I am not a programmer, Help!!!!!
If you want to try it go to latinunit.org login with david:123321 and then go to a post and try to add it to your favourites
Update
I tried the following, it shows the window but it doesnt perform the function;
$(".upb_del_bookmark").click( function() {
smoke.confirm(delete_message, function(e) {
if(e){
var post_id = $(this).attr('rel');
var data = {
action: 'del_bookmark',
del_post_id: post_id
};
$.post(upb_vars.ajaxurl, data, function(response) {
$('.bookmark-'+post_id).fadeOut();
$('.upb_bookmark_control_'+post_id).toggle();
});
}})
return false;
});
Here is the js file of the smoke script Link
When i click on cancel the following shows;
Uncaught TypeError: Property 'callback' of object # is not a
function Line:198
Uncaught TypeError: Property 'callback' of object # is not a
function Line:208
The following is what's on those linesof the smoke script;
finishbuildConfirm: function (e, f, box)
{
smoke.listen(
document.getElementById('confirm-cancel-' + f.newid),
"click",
function ()
{
smoke.destroy(f.type, f.newid);
f.callback(false);
}
);
smoke.listen(
document.getElementById('confirm-ok-' + f.newid),
"click",
function ()
{
smoke.destroy(f.type, f.newid);
f.callback(true);
}
);
The builtin javascript alert/confirm functions are synchronous, this is not. You need to handle the result of the confirm using the javascript callback pattern. You pass a function to the smoke.confirm() function which called when you need to respond to an action.
See the following code. The if around the smoke.confirm() has been removed and the handling code is wrapped in the function passed to the smoke.confirm() function.
$(".upb_del_bookmark").click( function() {
smoke.confirm(delete_message, function(e) {
if(e){
var post_id = $(this).attr('rel');
var data = {
action: 'del_bookmark',
del_post_id: post_id
};
$.post(upb_vars.ajaxurl, data, function(response) {
$('.bookmark-'+post_id).fadeOut();
$('.upb_bookmark_control_'+post_id).toggle();
});
}
});
}
I highly recommend reading a little about the callback pattern in javascript. It's very common and understanding it will help you use this plugin and many others.
I am trying to add mouse over and mouseleave effets. Some code is coming on document load and some divs are loading by ajax
here is my code
$(".boxes").on('mouseover',function(){
ids = $(this).attr('vals');
myVar = setTimeout(function() {
$("." + ids).show();
}, 1000);
$("."+ids).css("display","block !important");
},function(){
clearTimeout(myVar);
$("."+ids).hide();
});
But this is not working
giving me error
ReferenceError: myVar is not defined. I write above code on document ready
How to fix this issue?
Thanks in advance
myVar = 1;
$(".boxes").on('mouseover',function(){
ids = $(this).attr('vals');
myVar = setTimeout(function() {
$("." + ids).show();
}, 1000);
$("."+ids).css("display","block !important");
},function(){
clearTimeout(myVar);
$("."+ids).hide();
});
you have to declare myvar outside the event.. then asign it a different value
I'm getting a product's name & its description from an external PHP file using the jQuery "load" function. Further, I want this text to be displayed on the page using the fadeIn() function. How can I do that in my jQuery code?
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel').load('getNewPosts.php', function(){
setTimeout(refreshEPosts, 1500);
});
}
});
UPDATE
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel').load('getNewPosts.php', function(data) {
//For now, lets just log the data
console.log(data); //should be your echo'd php stuff
setTimeout(refreshEPosts, 1500);
$('#crPanel').fadeIn(data);
});
}
});
You have to actually do something with the return data. Add a parameter to your load callback, and use it:
$('#crPanel').load('getNewPosts.php', function(data) {
//For now, lets just log the data
console.log(data); //should be your echo'd php stuff
setTimeout(refreshEPosts, 1500);
});
Try this:
HTML:
<div id="myDiv"></div>
JS:
$('#crPanel').load('getNewPosts.php', function(data) {
$("#myDiv").fadeIn(data);
setTimeout(refreshEPosts, 1500);
});
Maybe something like this would work:
$('document').ready(function() {
refreshEPosts();
function refreshEPosts(){
$('#crPanel')
.hide()
.load('getNewPosts.php', function() {
$('#crPanel').fadeIn();
setTimeout(refreshEPosts, 1500);
});
}
});
You can see it working in principle in this jsFiddle: http://jsfiddle.net/M93Cn/
The $('#crPanel').load() just place the returned HTML into the #crPanel when succeed so there is no need to deal with the returned data in the success function.
As fadeIn() does not have a parameter that accept the data you want to display, calling $('#crPanel').fadeIn(data); will not work in this case, just use $('#crPanel').fadeIn(); and I believe it will work pretty well.
So I'm learning JQuery and I'm stuck on this:
I have a page that displays a HTML table and inside that table I want to have a cell that can be updated via a dropdown menu, so you click on edit, the current value disappears and dropdown menu appears, and when the value is changed the database is updated and the new value is displayed. (with the menu disappearing)
The problem seem to be putting the .text and .show inside the data callback function - if I alert the data it is returning the correct data from the PHP file, and if I comment out the .post line and replace the (data) with ("test_text") it replaces the menu as I want it to.
Hopefully my question is well enough written to make sense, thanks.
Here's the code
$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').show();
$(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').hide();
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
$(this).parents('tr').find('.cat_color_show_rep').text(data);
$(this).parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});
});
You can not access the $(this) inside the $.post function.
You can do this before the $.post:
var that = this;
And inside the post, do this:
$(that).parents('tr').find('.cat_color_show_rep').text(data);
$(that).parents('tr').find('.cat_color_show_rep').show();
This would be your resulting code:
$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').show();
$(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
var record_id = $(this).parents('tr').find('.record_id').text()
$(this).parents('tr').find('.cat_color_hide_rep').hide();
/** ADDED LINE **/
var that = this;
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
/** CHANGED LINES **/
$(that).parents('tr').find('.cat_color_show_rep').text(data);
$(that).parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});
});
In the callback function, this has been changed to refer to the XHR Object, you need to backup an reference of this from outside the function if you want to access it from the callback
var $this = $(this);
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
$this.parents('tr').find('.cat_color_show_rep').text(data);
$this.parents('tr').find('.cat_color_show_rep').show();
alert(data); // for testing
});
//Cache your selectors!
var catColorHide = $('.cat_color_hide_rep');
catColorHide.hide();
$('.act_status_dropD').on('click', function () { //Use the .on() method and save a function call. The .click() simply calls the .on() and passes in the callback.
var this = $(this), //If you use a selection more than once, you should cache it.
record_id = this.parents('tr').find('.record_id').text();
this.parents('tr').find('.cat_color_hide_rep').show();
this.parents('tr').find('.cat_color_show_rep').hide();
});
catColorHide.on('change', function () {
var this = $(this),
record_id = this.parents('tr').find('.record_id').text();
this.parents('tr').find('.cat_color_hide_rep').hide();
$.post('TEST_ajax_rep_list_status.php', {
ID: record_id
}, function (data) {
// I don't do the 'var this = $(this)' in here to fix your problem. The 'this' you see me using here refers to the element from the callback.
this.parents('tr').find('.cat_color_show_rep').text(data);
this.parents('tr').find('.cat_color_show_rep').show();
console.log(data); // Use this for testing instead.
});
});