Develop Reference

function on('load' ... ) not working after page refresh

Helo there.
We have a javascript function when the page is loading, then "open" some stuff. it's made with .on('load', function().
Is works great for the first pageview. but when you refresh the page, the function does not work anymore/is not triggert. when you reload the page with shift+refresh it works again. is there a workaround or another solution?
thanks!
<script>
$('#zoomBtn img').on('load', function() {
$('.zoom').find('#musicinfo').toggleClass('showList');
});
</script>

Probably the images are loaded before you bind the event. Something like this should help.
function showList () {
$('.zoom')
.find('#musicinfo')
.toggleClass('showList');
}
$('#zoomBtn img')
.on('load', showList)
.each( function () {
if (this.complete) {
showList()
}
})

jquery iframe item selector not working

I'm trying to add class to an iframe (on same domain) element but check some of the same issues here and came up with the solution.
The iframe is next to body tag and the js was place before the body end tag.
<script>
$(document).ready(function() {
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
</script>
There is no error showing in console except the OK log but the class was not adding to #mnucompany.
What else could be wrong? Any big hints will be appreciated.

After our comments :
You should wait the iframe to be loaded !
$(document).ready(function() {
$('#my-iframe').on('load',function (){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
});

$(document).ready(function() {
var myVar = setTimeout(function () {
var $mnuCompany = $('#my-iframe').contents().find('#mnucompany');
if($mnuCompany.length>0){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
clearTimeout(myVar);
}
});
}, 1500);

Set height of div after Jquery load()

I have a function that loads content into a div with Jquery. I'm trying to add to my function, the ability to set the height of the div to fit the content that I'm loading to it. I've tried several variations of the height() function and I've looked around at other people's code, but t I don't think I really understand how to incorporate that to my particular. Here's the function. It also has some code to update the URL. contentarea is the div where everything gets loaded and the div that needs resizing.
//Jquery loader
function getHash() {
return window.location.hash
}
$("a").on("click", function (e) {
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
}
else {
location.hash = hash;
}
});
e.preventDefault();
});'
Any help would be appreciated!
UPDATE: I updated the code with your help, but it's not really working. I figured I would add a div called content inside of contentarea, and use a callback function. What am I doing wrong?
'
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
}, function () {
$('#contentarea').height($('#content').height());
});
'

The documentation of the .load() provide a callback when the function is completed
JQuery doc
$('#contentarea').load(page, function(){},function(){})
The second function is called when the funciton load is completed.

You need to call callback function after content is loaded.
jQuery('#contentarea').load('externalpage.php', function() {
jQuery('#contentarea').height(jQuery('#content').height());
});

Loading GIF while AJAX completes

This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....

You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});

I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.

Send ajax post on href click

When i click a link i need to send post via ajax. The problem is that the request is dropped because of open a link.
jQuery('#pagination a').click(function(){
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(this).attr('href'));
return false;
});
But again the problems is (thanks to joomla) in url - its like /~user/joomla/index.php/view-sites?view=sites&page=2 - as you see it starts from slash, but the real link is http://localhost/~user/joomla/index.php/view-sites?view=sites&page=2, but in the source i have <a href="index.php?option=com_component&view=sites&.'.$option.'page='.$left.'"//....`
So i need some "multipurpose domain parsing solution" or just stop joomla changing my url's.

Using the native element.href will get you the entire href including the domain, and not just the attributes value, also there's a scope issue with the this keyword being used inside the $,post function :
$('#pagination a').on('click', function(e){
e.preventDefault();
var self = this;
$.post('index.php?option=com_component',
{checked_sites_for_session: $('.selected-site input[type="checkbox"]').map(function () {
return this.value;
}).get();
}
).success(function(){
window.location = self.href;
});
});
From the links you've posted they don't look to be the same at all, so you might have to figure something out for that, as some CMS solutions use rewriting etc.

problem with this
jQuery('#pagination a').click(function(e){
e.preventDefault();
var me=this;
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(me).attr('href'));
return false;
});