When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!
have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/
Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here
It is jquery function, you have to register jquery javascript framework first
Related
I want to my jquery function initDatePicker() into a js file. The function should require a parameter. I want the function being called on pageload.
Tried the following, but I'm probably missing some pieces here?
datepicker.js:
$(function initDatePicker(startDate) {
...
});
html:
<script type="text/javascript" src="#{/js/datepicker.js}">
$(function() {
initDatePicker('-1d');
});
</script>
Is my function definition correct in datepicker.js?
How do I correctly call the function on pageload with providing a parameter?
With the help of #deltab I could solve it as follows:
function initDatePicker(startDate) {
...
};
<script type="text/javascript" src="#{/js/datepicker.js}"></script>
<script type="text/javascript"><
$(function() {
initDatePicker('-1d');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
initDatePicker('-1d');
}
</script>
I have a simple script that's supposed to load comments every second but for some reason it doesn't work. Here's code
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
<body>
<div id="comments"></div>
</body>
I tried few things like changing "url to comments.php" to just "comments.php" but to no avail. JQuery won't even load simple .txt file. I checked and ID and .php file name are 100% correct. What's wrong?
The issue is you have setInterval() call within <script> with src pointing to jQuery. There are also extra parentheses at setInterval function which are not necessary. Use .ready() handler to wait until document is loaded before calling setInterval.
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
</script>
<script>
$().ready(function() {
var auto_refresh = setInterval(function () {
$("#comments").load('url to comments.php');
}, 1000);
});
</script>
</head>
The problem is you need to enclose your function within the <script> , right now it is started for <script src="jquery">
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
DEMO
I am trying to usesetInterval for a javascript function of mine to be called every 5 seconds. Here is what I have for code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="#routes.Assets.at("bootstrap/dist/css/bootstrap.css")" rel="stylesheet"/>
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
<script type="text/javascript">
window.setInterval("myFunction()",1000);
</script>
</head>
I know the function is being loaded in to the window, because I can call it via window.myFunction() and it performs as expected.
Thanks!
In your code this <script> has not closing tag but it is being self closed which is wrong
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
that's why setInterval code is not executing.
Your code have quote "" problem also.
<script src="#routes.Assets.at('javascripts/patientmonitor.js')"/>
//-----------------------------^convert it into single quote-^
<link href="#routes.Assets.at('bootstrap/dist/css/bootstrap.css')" rel="stylesheet"/>
JS
function myFunction (){
alert("your code here");
}
window.setInterval(myFunction, 1000);
Try this:
myInterval = setInterval(function() { myFunction() }", 5000);
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
conflict between Jquerys
i have a problem when i made lot of jQuery functions on the same file it did not work. In any jQuery tab i want to make a table with to possibility to sort it just by clicking on colonne.
I used this to add jQueryTabs:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
and this for the sorting fonction:
<script type="text/javascript" src="jquery.js"></script>
I try to use de jQuery.noConflict() fonction but it didn't work , where is the problem ?
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
jq172.noConflict();
jq172(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
} );
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
You need to do this:
<script>
var jq172 = jQuery.noConflict();
jq172(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
That said, I've never tried this, and I don't know how browser loading and caching would affect this. I'm not confident that the first jQuery.noConflict will call the 1.7.2 library. You might be better off using a library like Require.js to load and separate your modules, despite its coding and setup overhead.
Try assigning no conflict into a variable.
var jq172 = jQuery.noConflict();
var jQuery2 = jQuery.noConflict();
if i use this:
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
then pjs is always undefined
when i use this:
function test() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
and trigger test() with a button then pjs = D.Processing, as it should be.
I load the scripts in this order:
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="script.js"></script>
How can i work with pjs without have people to press a button?
Please try this - just to also see if it is a timing issue - note the swapped scripts too:
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="script.js"></script>
var tId,pjs,cnt=0;
$(document).ready(function() {
tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
and what does this say?
var tId,pjs,cnt=0;
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (!pjs) tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
Yes mplungjan wrote the true answer, but remember that, when you use JQuery plugins you must be load JQuery library first, all time.