Develop Reference

jQuery/JS doesn't work the same when in excluded file

I got this jQuery code in the PHP file:
function loadkontakte(){
$('#kontakte').load('kontakte.php',function () {
$(this).unwrap();
});
}
loadkontakte();
setInterval (loadkontakte, 5000);
So kontakte.php is refreshed every 5 seconds and also instantly on pageload through loadkontakte();
Now when I write this code into separate file bla.js in the same folder and include this file, the code works, not instantly but after 5 seconds, so loadkontakte(); doesn't work any more, whats the reason and how can I fix it?

When you put the JS code inside the .php file, the code is under the #kontakte element while when you have it in a separate file, the script tag <script src="bla.js"></script> is before the #kontakte element?
If yes, this can explain why the JS code does not run instantly when the JS code is in an external file. If this is the case, you can do the following:
Put the <script> tag in the bottom of the page.
Or use the $(document).ready(function () { ... }); event handler so that the code will execute after the page has loaded.
For the #2 scenario your bla.js could be:
function loadkontakte(){
$('#kontakte').load('kontakte.php',function () {
$(this).unwrap();
});
}
$(document).ready(function () {
loadkontakte();
setInterval (loadkontakte, 5000);
});

Hide div when URL contains

I want to hide the slider (and a bit more) if someone uses the search module on my Joomla site and tried several solutions mentioned here on stackoverflow like: https://stackoverflow.com/a/1760605/1641903
Currently my code looks like this:
<script>
if (/\/search\//.test(window.location)) {
$('#hideonsearch').hide();
}
</script>
I wrapped the slider in <div id="hideonsearch> and tried mentioned jquery in both the body and head (just to be sure), but it doesn't seem to work as you guys can see here.
Any idea on how to get in working?

I saw in your web site that the jquery is not loaded when your code is being executed.
You must put your code in the "onload" function, or make sure the jquery is loaded before doing this.
window.onload = function () {
if (/\/search\//.test(window.location)) {
jQuery('#hideonsearch').hide();
}
};
Or you can use the pure javascript code that is better.
window.onload = function () {
if (/\/search\//.test(window.location)) {
document.getElementById("hideonsearch").style.display = "none";
}
};
I saw another error in your web site now, related to this code:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
error:
undefined is not a function
And it is related to the same problem, jQuery is not loaded, so you can use "window.onload".

Run/load function when there is a form on the page

The following script link, is linking to a JavaScript file that handle form validation
<script type="text/javascript" src="assets/js/form-validation.js"></script>
And it is included to all the pages using PHP include, the question is; how do I only make it run or even load when there is a form on the page?
I tried this: $('form').load('form-validation.js', function(){ /* callback */ });
But did not work, I also searched and did not find a real answer...

You should use jQuery.getScript(), it load a JavaScript file from the server using a GET HTTP request, then execute it.
You can use .length property to check form exists or not.
if ($('form').length) {
$.getScript('form-validation.js', function () {
/* callback */
});
}
EDIT
There is no option to add it to the JS file it self, and make it work
//Place this code at the top of your form-validation.js file
$(document).ready(function () {
if ($('form').length > 0) {
//Do validation
}
});

use jquery to do it :
<script type="text/javascript">
$(document).ready(function(){
if ($('form').length>0) {
$.getScript('form-validation.js', function () {
});
}});
</script>

jquery SlideToggle in dnn

I'm trying to make a infobox when i click the head the content slides down
but when i do it it just slides down and then up again.
It is in a ascx document and i need to use it on a dotnetnuke container
it works perfectly in a html file
here's the code
<script type="text/javascript">
$(document).ready(function () {
$('.head').click(function () {
$('.content').slideToggle();
});
});
</script>
or
$(document).ready(function () {
$('.textbox .content:eq(1)').hide();
$('.textbox .head').click(function () {
if ($(this).next('.content').is(':visible')) {
$(this).next('.content').slideUp();
} else {
$(this).next('.content').slideDown();
}
});
});

In the first example, you'll toggle all of the content areas if you have multiples of the same container on the page.
The second example looks like it should work, but, again, if you have multiple instances of the container, and that script is in the container itself, you'll register the handler multiple times. Try moving the script to an external file and referencing it in code, so it only gets included once. See DotNetNuke jquery script in container for an example of that.

Sometimes loading JavaScript

I'd like to conditionally load a set of javascript functions (which involve jQuery) on a given page.
The situation is that our site has a bunch of stuff that happens on $(document).ready (mostly fancy menu setup and a couple of CSS class manipulations), but one or two pages need more setup. It's enough code (and specific enough) that I don't want to just toss it into the main file, but rather just load it on those specific pages.
It seems that I can't do this by just loading a new file specific.js into those pages that contains
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} ());
In the above example, something(Else); works fine, but .click and .bind don't seem to do anything. What I ended up doing is
function specificStuff () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
};
and adding if(specificStuff) specificStuff(); to the main js file. It works, but it seems like there should be a better way of accomplishing this (ideally one that would keep all the changes in specific.js and not touch the general settings).
Is there a canonical way of conditionally loading js code to run in document.ready?

You can call $(document).ready(); multiple times in a web page/script file. Just wrap your jquery bindings as such in your specific.js file:
$(document).ready(function(){
$(something).click(function () { Stuff(happens); });
something(Else);});

You can load the page specific Javascript in the html of those pages, each script with its own document.ready function.

try removing the () when passing a function to document.ready:
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} **()**);
with the (), it will execute right away and not wait for the document to be ready.

You can call the jquery document ready function as many times as you need. I think your issue is with how you've set up your function. If you're trying to call the ready function, it should be like this:
$(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
});
Also, if the something elements are created by your main.js file, you should include it before your specific.js file.