I have a problem I cannot seem to solve. I am using AS3's navigateToURL(); function to call a simple javascript function. At the moment it just alerts the first parameter. The problem is, when this function is placed inside of the $(document).ready(function(){..}) block it does not fire. Example of my code:
<script type="text/javascript">
$(document).ready(function(){
function mapLink(aVar){
alert(aVar);
};
});
</script>
Example of simple AS3 call to function:
navigateToURL(new URLRequest('Javascript: mapLink("'+mapObject.tooltipMoreLink+'");'), '_self');
When the function is placed OUTSIDE of the jquery code, it works fine. Why does it need to be inside of the jquery code you may be asking? I need the jQuery DOM selectors to manipulate certain dom elements based on the value of 'aVar' in my javascript function.
Any guidance is welcomed with an open mind.
eh. this is what the ExternalInterface class was designed for.
You issue has to do with scope. Your function is scoped to the jquery object, and not globally, so it is invisible to your call. If you need jquery selectors, then you could easily set the flash var independently, followed by the jquery routine.
update
maybe I'm missing something, but shouldn't this be as be easy as:
function externalCall(param){
$(domElement).doSomething(param);
}
?
I wouldn't think this need be tied to the jq ready function. I mean, if flash has already loaded, and the user is interacting, then certainly the ready event has long since fired successfully.
Hope that helps. I'm not sure I'm following exactly what you're trying to do ;)
...
btw - I really would look into ExternalInterface, NavToURL may work, but you can call your js directly with the former method.
It won't work because you have created a function inside the DOMReady Event
that is $(document).ready and calling it from outside the scope of the function.
You can access jQuery DOM Selectors from anywhere provided you have referenced jQuery.js in your page.
Example
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
function mapLink(aVar){
alert(aVar);
}
</script>
Related
I have several scripts and the $(document).ready is being defined in another script. I tried defining functions in another file that make use of JQuery syntax but they don't work. Is there a way to use jQuery functions if they are not defined in the $(document),ready function?
Here is my first script. it's just a ready block (yes its empty):
$(document).ready(function () {
});
This is my second script:
function editPage() {
$("#mybutton").click(function() {
alert("Clicked");
});
}
editPage();
It does not work.
The second code does not work. They are in different files. The first script is always loaded. I have the jquery library defined. If i place the click code in the first script, it works.
This is ASP.NET MVC 5
If I understand you correct, as long as you reference JS file earlier, you can use it in all other files which is coming later in sequence.
In following scenario, you can use Jquery in "your-test-file.js"
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="/your-test-file.js"></script>
I am just starting out with JavaScript and I have a simple code that sends a value to an element with id p. I am currently declaring this function in a <script> in the <head> element of my document.
function writeP(resultSet) {
document.getElementById('p').innerHTML = resultSet.length;
};
writeP(results);
When I have this listed within the <head> element and run the webpage, firebug throws this error at me: TypeError: document.getElementById(...) is null.
However, if I move the code block into a <script> tag beneath the element and then reload the webpage, no problems and the script works as it should. Is there any reason for this, and a way I could make this work so I wouldn't have to define my functions beneath the element or include a onload on my body element?
Thanks for your help
Reason is that by the time your launch js code, DOM is not yet prepared, and JS can't find such element in DOM.
You can use window.onload (docs on W3schools) trigger to fire your functions after all elements are ready. It's same as having onload property on body element, but is more clear, as you can define it in your js code, not in html.
JS evaluates syncronically. Therefore, it does matter WHEN you declare the function. In this case, you're declaring it before the element actually exists.
Second, when you declare a function with that syntax, it does get eval'd inmediately. If you declared, instead
var writeP=function(resultSet) {
document.getElementById('p').innerHTML = resultSet.length;
};
you could save just the call to the end of the Doc, and leave the declaration at the beggining.
However, I would advise you to read a few jQuery tutorials to learn easier ways to deal with dom manipulation. Nobody runs raw JS for that task anymore.
jQuery includes an useful call to document ready event, which will save you a lot of headaches and is -IMHO- more efficient than the onload event. In this case, you would include the jQuery library somewhere in your code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then add
<script>
jQuery(document).ready(function() {
var writeP=function(resultSet) {
jQuery('#p').html(resultSet.length);
};
writeP(resultSet);
});
</script>
just about anywhere in your document or an external js file, as it suits you.
I've got my fiddle here, but I can't understand why it's not calling my function on the 'onmouseout' event.
http://jsfiddle.net/foreyez/Xf6LW/
any ideas?
Works fine, you just needed to put the function in the head (or body after the element is in the DOM) of the document.
jsFiddle example
It's because the functions you create in the JavaScript panel are not global when you have the onLoad option selected. Your JavaScript gets wrapped in a function.
If you do want them to be global you have to either do what j08961 suggested, by changing that dropdown to say no wrap (body or head) will work
The best solution would be to not set your event handlers from HTML, that's bad practice anyway, then you're not relying on global functions or mixing HTML and JS.
<div id="myDiv">
</div>
document.getElementById('myDiv').onmousemove = function() {
alert('here');
}
Side note: you should have noticed the error in the console saying that myFunc is undefined or something like it.
I think it's cause for jsfiddle, it declares all the javascript AFTER the HTML. The HTML is going to run and look for a myFunc and not find it. Then it's going to load the JS and it won't even run it.
Here you can see the changes : jsfiddle.
make myFunc as a global function;
I searched my code using firebug and got following generated code.
window.addEvent('load', function() {
//window.myFunc makes myFunc as a global function
// It can be accessed from any were inside current window.
window.myFunc = function myFunc(x)
{
alert('yo');
}
// function below is not available gloably.
function myFunct1(){
alert('yo1');
}
});
see jsfiddle
I'm using the cluetip jQuery plugin.
I'm trying to add my own close button. The the jquery I'm trying to call is:
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});
There are many references to cluetipClose() through the code and the button that the jquery inserts uses it and works so that function as far as I'm aware works fine.
I'm trying to trigger that using
$('a.close-cluetip').trigger('hideCluetip');
I've created my link:
Close
But it isn't doing anything.
Am I calling it incorrectly?
The problem here is that in the cluetip plugin, the function clueTipClose() is inside a closure, so you have no access to it unless you're inside the closure (i.e. inside the plugin's code). Now I've gotta admit, this plugin doesn't seem to be set up to be all that extensible. If they made this function accessible via a "clueTip" object that was set up for each element that uses it, you'd be able to add another jQuery method to the end of the closure like this:
$.fn.cluetipClose = function() {
return this.each(function() {
var thisCluetip = findCluetipObj(this);
if (thisCluetip)
thisCluetip.cluetipClose();
});
};
But you have the unfortunate luck of not being able to do this easily. It looks like this guy wrote his jQuery plugin with non-OO code inside of a closure. Poor you.
Now on the plus side, it seems this plugin is already running this code directly after it instantiates the cluetipClose() function. Have you tried just doing this from your code:
$('a.close-cluetip').trigger('hideCluetip');
Without redeclaring the document hideCluetip bind? I think that should probably work.
Disclaimer: I am new to jQuery.
I am trying to implement a fadeOut effect in jQuery for a div block, and then fadeIn effect on two other div blocks.
However, these effects are only working in the Chrome browser (i.e. they won't work in Safari, FireFox, Opera) which is rather perplexing to me. I have tried clearing my cache in case it was storing an old file, but none of that seemed to do anything.
Basic idea (stored in mainsite.js file):
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
So when a div tag with the id of videoThumbnail_XYZ is clicked, it starts the fadeOut and fadeIn calls on the other div tags.
I am loading my javascript files into the page in this order (so jQuery is loaded first):
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
Any guidance you could give is greatly appreciated!
Make sure the DOM is fully loaded before your code runs.
A common way of doing this when using jQuery is to wrap your code like this.
$(function() {
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
});
This is a shortcut for wrapping your code in a .ready() handler, which ensure that the DOM is loaded before your code runs.
If you don't use some means of ensuring that the DOM is loaded, then the #videoThumbnail_XYZ element may not exist when you try to select it.
Another approach would be to place your javascript code after your content, but inside the closing </body> tag.
<!DOCTYPE html>
<html>
<head><title>your title</title></head>
<body>
<!-- your other content -->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
</body>
</html>
If mainsite.js is being included before your div is rendered, that might be throwing the browsers for a loop. Try wrapping this around your click handler setup:
$(document).ready(function(){
// your function here
});
That'll make sure that isn't run before the DOM is ready.
Also, you might consider putting the fadeIn calls in the callback function of your fadeOut, so if you decide to change the duration later on, you only have to change it in one place.
The way that'd look is like this:
$("#thumbnailDescription_XYZ").fadeOut(300,function(){
$("#videoPlayer_XYZ").fadeIn(100);
$("#videoHiddenOptions_XYZ").fadeIn(100);
});
I see you have a delay set to the same duration your fadeOut is, I would recommend instead of delaying which in essence your waiting for the animation to complete that instead you use the callback function.
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300, function() {
$("#videoPlayer_XYZ").fadeIn(100);
$("#videoHiddenOptions_XYZ").fadeIn(100);
});
});
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
$(document).ready(function(){
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
});
All three of the following syntaxes are equivalent:
* $(document).ready(handler)
* $().ready(handler) (this is not recommended)
* $(handler)