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
});
Related
I have somehow a beginner's question about the following structure:
<body>
<p id="text_object">Some text</p>
<button id="button_change_text">change text on click</button>
// Individual script on page template
// ----------------------------------
<script type="text/javascript">
var object = $('#text_object');
changeTextOnLoad(object);
</script>
// Footer from included footer.php with universal main.js file
// ------------------------------------------------------------
<footer>
<script type="text/javascript" src="main.js">
</footer>
</body>
My main.js contains the following:
// declaration of function for writing new text into text object on load
function changeTextOnLoad(object) {
object.text('New text');
}
// declaration of click function
$('#button_change_text').on('click', function() {
$('#text_object').text('New text');
});
My problem: My console tells me that changeTextOnLoad() is undefined. But clicking on the button and changing the text by this way works perfectly fine. Where is the reason? Why in my main.js file does the click function get fired but not the changeTextOnLoad function?
You are calling your changeTextOnLoad function before the main.js file has loaded. Either put the function call in an onload event callback or put the include above the call
window.onload = function(){
var object = $('#text_object');
changeTextOnLoad(object);
};
//Or using addEventListener
window.addEventListener("load",function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
//Or since you are using jQuery
$(document).ready(function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
//Or
$(function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
OR
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
var object = $('#text_object');
changeTextOnLoad(object);
</script>
because main.js is another file, browser takes time to download it. But you run changeTextOnLoad(object); before that.
sorry but i am newbie!!!
i am new to jQuery and i have a problem with jQuery $(this)
i have create a really simple jquery function in jsfiddle and it work but it's not work on website
i have use jquery 1.10.1 in jsfiddle and my code too!
you can see code here :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
</script>
</head>
<body>
<div class="resumeActu" data-id="3">click me</div>
</body>
</html>
and this is my code in jsfiddle too: demo
i cant understand why my code work on jsfiddle but it's not work in my page
In your website you need to place your code in a document ready handler. This is not required in jsFiddle as it automatically does it for you.
<script type="text/javascript">
$(function() {
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
});
</script>
The reason your current code does not work is because it is trying to attach the click handler to the .resumeActu element before it exists in the DOM.
try this
$(document).ready(function () {
$(".resumeActu").on('click', function () {
var id = $(this).data('id');
alert("id is = " + id);
});
});
Load this function after document is ready
I have a javascript file containing a ajax function with parameter x.
I cannot reveal the function.I want to call the function on page load and on a button click.Also there is a for loop on the function for displaying the variable 10 times i.e,
for(i=0;i<10;i++).
The code for that button is :
HTML file
<html>
<title>Call web service</title>
<head>
<script type="text/Javascript" src="jquery-1.9.1.js"></script>
<script type = "text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function()
{
Webservice(1)('onload'); //call 1 where webservice is ajax function
}
</script>
</head>
<body>
<input id="button" type = "button" name = "button" value = "Call Webservice" onClick = "Webservice(5)"/>
</body>
</html>
Right now what I am getting is the onload function is getting overridden when I click the button whereas I want the outputs of both the functions to be displayed simultaneously
So please help me.
Thanks in advance.
Try doing this:
function f1() {
//what you need to do
}
function f2() {
//Do the same thing here also
}
This being your JS, in onload, call f1() and for button click call f2(). If you want f1() to execute before f2(), i suggest you look into locks here:
How to implement a lock in JavaScript
Your javaScript code should be something like this:
var fn = function fn(x) {
// Do something
}
$(function() {
var someValue;
// someValue = ...
// Call function once document is loaded
fn(someValue);
// Bind function as a callback to button click
$('#button').on('click', function(event) {
fn(someValue);
});
});
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/
I have an auto refresh script here, it works beautifully, but calling LoadPage via body onload blocks several other scripts on my pages. I've tried calling it through many other suggested alternatives to body onload, but nothing so far works. Here is the code:
<head>
<script>
var asdf = false;
function StartTime(){
if(asdf)clearTimeout(asdf)
asdf = setTimeout("RefreshPage()",15000);
}
function RefreshPage(){
clearTimeout(asdf)
if(document.autorl.RFCB.checked)
document.location.href = document.location.pathname + '?Checked'
}
function LoadPage(){
var findCheck = document.location.href.split("?Chec");
if(findCheck.length == 2){
document.autorl.RFCB.checked=true;
window.location='#bottom'
StartTime()
}
}
</script>
</head>
<body onload="LoadPage()">
<div>
<form name="autorl">
Auto-Refresh: <input type="checkbox" name="RFCB" onclick="StartTime()">
</form></div>
<a name="bottom">
Could anybody here lend a hand with this?
You could instead use something like the document.ready() handler in jQuery to accomplish this:
$(document).ready(function() {
LoadPage();
});
http://api.jquery.com/ready/
you can try and call the function from the end of html file just before the </html> tag add a <script>LoadPage();</script>