I am very new to js and jquery and need help understanding why this script does not work. I've checked it over any number of times, but in all my research, there is something that I am missing. Any help would be appreciated. The code should just set text value in div once every 2 seconds. I cut this code down from its real functionality so ignore the fact that it does nothing. Forgive and correct me if I am not posting this properly. It's my first post.
code below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var test=0;
var timer = setInterval(save_it(), 2000);
var test=0;
$(document).ready(function(){
var save_it = function(){
testdiv.innerhtml = test++;
};
});
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
Try this example (jsFiddle http://jsfiddle.net/Br59d/)
HTML:
<div id="testdiv"></div>
javascript:
var test=0;
$(document).ready(function(){
var timer = setInterval(save_it, 2000);
});
function save_it(){
$('#testdiv').html(test.toString());
test++;
};
To provide some input:
var save_it = function() {
and
function save_it() {
act two separate ways. If you use var save_it = function() you can't call that function before the declaration.
i.e. you couldn't do this:
save_it();
var save_it = function() {
alert('k');
}
however, if you use function save_it() you can.
save_it();
function save_it() {
alert('k');
}
JSFiddle: http://jsfiddle.net/jeffshaver/nmSD6/
Related
In the following code, CLICK() method runs only one time:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
var arr = ["test1", "test2", "test3"];
var i=0;
$("#btn").click( function () {
while(arr[i])
alert(arr[i++]);
});
});
</script>
</head>
<body>
<div id="btn">Click Me</div>
</body>
</html>
Whats the problem?
I read all the other subjects but didn't help.
It does: - Just reset your i to 0. In your handler the condition fails second time because your i becomes array.length from your previous execution and it fails, since there is no item at arr[array.length] i.e3 in your case.
$("#btn").click(function () {
while(arr[i])
alert(arr[i++]);
i = 0; //here reset it
});
or just move it to the scope of the function.
$("#btn").click(function () {
var i = 0;
while(arr[i])
alert(arr[i++]);
});
The click method runs on every click, but after the first one it doesn't enter while loop anymore, because i === 3.
try this:
$("#btn").on('click', function () {
while(arr[i])
alert(arr[i++]);
});
I think the problem is caused by variable i, please move i to click function, such as:
$("#btn").bind('click', function(){
var i = 0;
while(arr[i])
alert(arr[i++]);
});
I am trying to make jquery trigger an event when an anchor link has the same URL as the current page. Eventually this will add a class to the anchor link and let me style it differently with CSS but for now I just want it to show an alert box. Code below doesn't seem to work:
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') = buildurl){
alert("Done");
}
});
</script>
Can anybody shine a light on why this isn't working? Or a best practice for similar using JQuery?
Link is: http://www.otahboy.com/shop/index.php?route=information/information&information_id=4
Cheers,
Jack
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
use equality operator ==
if($('a').attr('href') == buildurl){
alert("Done");
$('a').attr("color","Red");
}
You have an assignment in your if condition. You need to add one = to it.
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
I've created links to transition yet when the function is supposed to be called using the onmousedown event I get an uncaught undefined function. Clearly my function is defined. I'm am still learning code so what is it I don't see or understand. Any tips will be greatly appreciated.
<html>
<head>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="javascript">
$(document).ready(function (){
var url = "phpajaxtut.php";
});
function swapContent(cv){
$("#myDiv").html("animated gif goes here").show();
.post(url, {contentVar:cv}, function(data){
$("#myDiv").html(data).show();
});
}
</script>
Click the text
Click the text
Click the text
</head>
<body >
<div id ="myDiv">My default content</div>
</body>
</html>
Why not just use $.click(); instead, since you're already using jQuery, and forgo the hyperlinks? You can easily style some spans to look like as if that's what you want. My example just updates some text, but in there you can place / call your function.
See here:
// html
<span>Click Me</span>
<br />
<span>Click Me</span>
// js
var n = 0;
$("span").click(function(){
$(this).text($(this).text() + " " + n++);
});
Do you need a $ before .post?
$.post(url, {contentVar:cv}, function(data){
$(document).ready(function (){
var url = "phpajaxtut.php";
});
The var url isn't global. It can only be used inside the function
var url; //global url
$(document).ready(function (){
url = "phpajaxtut.php"; // set global url
});
I've been working with javascript for a while but never made any classes and my work has been getting messy with tons of unorganized functions. So now I am learning how to use classes, and I have question.
How can I execute functions within a class, example:
<html>
<head>
<script type="text/javascript">
window.onload = function (){
var object = new testClass("test123");
alert(object.content);
}
function testClass (id){
this.object = document.getElementById(id);
this.content = this.getContent(); //<- this is what I want to do
this.getContent = function (){
return this.object.innerHTML;
}
}
</script>
</head>
<body>
<div id="test123">Hello World</div>
</body>
</html>
Basically how can i call upon function inside of the class inside of the class? In the example how can I get this.getContent to return "Hello World".
I know I can do it like :
<html>
<head>
<script type="text/javascript">
window.onload = function (){
var object = new testClass("test123");
alert(object.getContent());
}
function testClass (id){
this.object = document.getElementById(id);
this.getContent = function (){
return this.object.innerHTML;
}
}
</script>
</head>
<body>
<div id="test123">Hello World</div>
</body>
</html>
I am using chrome to test. I am doing this wrong, can it be done? Thanks in advance.
You're calling getContent before creating it.
Move the function call below the assignment.
I must be looking wrong on this but I can't find the trick:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.listinventory.com/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-utils/source/browse/trunk/src/jquery.countdown.js"></script>
<script type="text/javascript">
$(function hello() {
// function that does something exciting?
var liftOff = function () {
// ....
};
// Get a date that is some (short) time in the future
var getDeadline = function () {
var shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
return shortly;
};
// Attach click handler to all our buttons
$("div.mainpanel button.resetButton").click(function (event) {
// I am assuming that you will not be nesting these controls?
var $mainpanel = $(this).parents("div.mainpanel") // this will find the mainpanel div that contains the pressed button
.effect("highlight", {}, 700);
$("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
.countdown('change', { until: getDeadline() });
});
// Start all countdowns going on page load
$('#shortly').countdown({
until: getDeadline(),
onExpiry: liftOff,
layout: '{sn}'
});
});
</script>
<div class="mainpanel">
<div>
test
</div>
<div class="shortly">
</div>
<button class="resetButton">
Reset
</button>
</div>
</asp:Content>
I get an "Microsoft JScript runtime error: Object doesn't support this property or method" exception in the countdown.
You could try to drop the "hello" from $(function hello() {
It is not necessary.
Where is the code for the countdown method? is this in a JQuery plugin or is it a function of your own?
Is it possible the naming of $mainpanel is conflicting with something else? Try renaming this to another name (without the $).
I think it must be how you reference your plug-in code. I pasted the code in-line and it works without and error.
See here for my test: http://jsfiddle.net/3UwCg/