Develop Reference

Ajax Based Display Not Accurate

I'm building a Joomla module that uses slideDown and ajax of jQuery.
The way it works is that it populates the slideDown div, compute the div child element with highest height, and resizes the containing div height for display.
Problem is if the page is not cached (i.e. if it is on first load of the page) the height is not displayed properly as below
But on second click and so on, it displays correctly as follows
I'm thinking it is because the contents of the div child element are not completely populated before the height is computed, hence a false height is generated. I've tried some things to ensure that does not happen - right now I'm using a callback function along with the function that populates the div tag.
Quick help will be highly appreciated, thanks!
Edit - here's the code that populates
menuItemAjax: function (urlContent, dataContent) {
jQuery.ajax({
type: "POST",
url: urlContent,
data: dataContent, // data to send along with url
complete: function () {
//console.log("Process completed");
},
success: function (returnedData) {
WetvCreateHtml.popDropDownDiv(returnedData, function() {
var ddChildren = dropdownDiv.children(), highestHeight = 0;
ddChildren.each(function(){
if (jQuery(this).height() > highestHeight) {
highestHeight = jQuery(this).height();
}
});
dropdownDiv.animate({ height: highestHeight });
});
},
error: function () {
//console.log("Error occured");
},
statusCode: {
404: function() {
//console.log("Page not found");
}
}
});
},
popDropDownDiv: function(returnedData, callback) {
dropdownDiv.html(returnedData);
if (typeof(callback) == "function") {
callback();
}
}

Loading Spinner Image too fast at start of Function

I have a function that displays contents of a posts when clicked on. I want the loading spinner to display and delay for few sections before the post content appears. The issue here is when I click on each post, the spinner appears for maybe 1ms and in some cases it disappears long before the content appears.
function showPost(id) {
setTimeout(function() {$('#loader').show();},1);
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}
Spinner HTML:
<div id='loader'><img src="css/images/loader.gif"/></div>

Try this:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.ajax({
url: 'http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?',
dataType: 'json',
success: function (data) {
var $postcon = $('<div/>').append([$("<h3>", {
html: data.post.title
}), $("<p>", {
html: data.post.content
})]);
$postcon.appendTo('#pcontent');
$('#loader').hide();
}
});
}

gif image always behave differently on every device..basically it depends upon device's processing speed. so better option is to use image sprites and animate it with javascript..
In your case at page load there is nothing processing..but as page starts to load device's processor cant handle the load and as a result your gif image gets slower

It seems from your last commented line that you are using a timeout to hide the loader. Instead You should handle the hiding inside the callback function of your ajax request, so that loader hides after request is completed, not after a fixed amount of time:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
$('#loader').hide();
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}

adding a delay to changing an image attr after an ajax request

so i have a function that is triggered a click of a button (imagine a published/unpublished button)
so as soon as the function loads i change the element to be a loader gif
function updateStatus(event, status, element, data, action) {
//init loader
$("#" + element).find("img").attr("src", "../../img/images/loader.gif");
that works fine
then I do an ajax request where i pass the data (so i can update the database via the rest)
var request= $.ajax({
type: 'get',
url: "../testResponses/status.php",
data:data
});
again that is all good and then when the request is done I can change the image
request.done(function(msg) {
$("#" + element).find("img").attr("src", "../../img/images/status/"+newStatus+".png");
$("#" + element).attr("data-user-status", newStatus);
});
seeing as this is still a proof of concept I want to add a 2 second delay before the loader image disappears and the new status us shown
I tried
request.delay(2000).done ...
which returned an error and
$("#" + element).delay(2000).find("img").attr("src", "../../img/images/status/"+newStatus+".png");
which just didnt make any difference..
can anyone help?

You can use setTimeout() to trigger the logic in 2 seconds after you get the request:
request.done(function(msg) {
setTimeout(function(){
// change the image
}, 2000);
});

Another solution is to use the .delay() queue
$("#" + element).delay(2000).delay(function (next) {
$(this).find("img").attr("src", "../../img/images/status/" + newStatus + ".png");
next();
});

Change a href=# to javascript:

Hi I asked before on how to load a div's content (A url) by clicking a button and not on page load before and I got this code as an answer:
<script type="text/javascript">
function toggleDiv(id){
if ($('#' + id).html() == '') {
$.ajax({
url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success: function(data) {
$('#' + id).html(data);
},
error: function() {
$('#' + id).html('The resource could not be loaded');
}
});
}
$('#' + id).toggle(); // Toggle div visibility
}
</script>
Show/Hide Value
<div id="a" style="display:none"></div>
First of all it doesn't work correctly and always show "The resource could not be loaded" if you put a txt link like (http://knowpersia.com/a.txt) it doesn't work either.
Secondly the Show/Hide Value link uses a href=# and onclick system to work. When I use it on my website it gets back to the homepage when I click it. Is there a way to change it to something like:
Show/Hide Value
Thanks

You have to pass an id to the toggleDiv() function, and you're passing a collection of objects -> toggleDiv('a') // Nop.
Also, if you're using jQuery, I suggest you get rid of that ugly inline code. Then, you can pass jQuery objects into your function:
Show/Hide Value
<div id="content"></div>
.
var toggleDiv = function($el) {
if ($el.empty()) { // You can just use `empty()`
$.ajax({
url : 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success : function (data) {
$el.html(data);
},
error : function () {
$el.html('The resource could not be loaded');
}
});
}
$el.toggle(); // Toggle div visibility
};
$('#link').click(function(){ toggleDiv($('#content')); });

optimizing colorbox and adding extra jquery

I have two problems
I am trying to open a jQuery colorbox and it is very slow. The reason is I am trying to get html content from a different page (I cannot use iframe because I just need a part of this page). The following code works but it takes time after the button is clicked:
$(document).ready(function() {
$(".cart-link a").click(function(event) {
$(this).colorbox.close();
});
$(".rest-menuitem a").click(function(event) {
event.preventDefault();
var result = null;
var sURL = $(this).attr("href");
$.colorbox({
html: function() {
$.ajax({
url: sURL,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return $(result).find('.product');
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
});
});
I want to know if there is a alternative way to do it. I dont mind if the colorbox popup and then takes time to load the content. The above version can be fount at this url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products).
I am also trying to close the colorbox when a user clicks on add to cart. But some reason it is not triggered. $(".cart-link a").click is not triggered when I click on add to cart. Is there a special way to add jquery to colorbox content?

Try this instead:
$(".rest-menuitem a").colorbox({
href: function(){
return $(this).attr('href') + ' .products';
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.

For your question 2 can you try this ?
$(document).ready(function() {
$(".cart-link a").live('click',function(event) {
$(this).colorbox.close();
});
});
For your question 1..it will be slow since you are fetching it from different page.Use a different logic for that
For your question no 1
$('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
$.ajax({
url :'Your url',
data : {}, //data to send if any
type : "POST" //or get
success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
$('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
}
});
}});