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);
});
Related
I do have a problem with the trigger-event of bootstrap.
I try to call a function after my content got hidden or shown.
After my search i found this solution, but it doesn't work yet:
$(document).ready(function () {
$('#widget-box').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#widget-body').on('hidden.bs.collapse', function () {
alert("hidden");
})
$('#SearchForm').on('hidden.bs.collapse', function () {
alert("hidden");
})
});
The widget-box is the one getting the collapsed class.
The widget-body is the one getting shown/hidden.
The SearchForm is the content of widget-body which dis-/appear.
Neither of this 3 functions shows me an alert. What am I doing wrong?
Use external javascript file. Try to write your jQuery code into external javascript file and link that external javascript file to your html file using script tag.
I have 2 external html pages loaded by this code:
<div id="header-div"></div>
<div id="footer-div"></div>
my js file contains this:
$(function () {
$("#header-div").load("/AfekDent/header.html");
$("#footer-div").load("/AfekDent/footer.html");
});
I want to run a function when specific element in the header file is created -
what trigger can i use for it?
It's ok the trigger will occur when all elements will be loaded.
thanks!
Add a callback to your load() call.
$(function () {
$("#header-div").load("/AfekDent/header.html", function() {
console.log('My header was loaded!');
});
});
You can use a callback on the #header-div, which will execute the code after the entire header has loaded.
$("#header-div").load("AfekDent/header.html", function() {
someFunction();
});
However, if you want to execute code after a specific element in the header loads, try something like:
$("#specific-element").on("load", function() {
someOtherFunction();
});
If you want to learn more about the difference between load and on("load"), look at this question or read the jQuery documentation for load and on().
For simplicity, I'd recommend executing code with $(document).ready(function() {yetAnotherFunction();});, but it depends on your specific case.
I have a custom js file in app/assets/javascripts.
This is the js file:
//app/assets/javascripts/contacts.js
//$(document).ready(function() { //I've already tried with this method
$(window).load(function() {
alert("foo bar")
});
I require the file contacts.js file in the application.js file.
If I inspect the html page I see the js file loaded correctly, but the message is not shown.
If I reload the page (by pressing f5), the message is correctly show.
When the page is loaded the javascript is loaded (I can see it in source html code in the browser) but not executed.
Can you help me?
SOLUTION:
Rails 4: how to use $(document).ready() with turbo-links
$(document).ready(function() { } # Not working with turbo-links
From
Turbolinks overrides the normal page loading process, the event that
this relies on will not be fired. If you have code that looks like
this, you must change your code to do this instead:
$(document).on('ready page:load', function () {
// you code here
});
Another question
With Turbolinks version 5 (starting from Rails 5) you need to use:
$(document).on("turbolinks:load", function () {
// YOUR CODE
});
Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks
I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>
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.