document.ready is not working in RadEditor,
when i use the following jquery code
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
It shows as error in RadEditor
The RadEditor control is a ASP.NET AJAX control and is initialized in the "init" event of the MS AJAX client framework. Try replacing the $(document).ready() code with the AJAX pageLoad() method:
<script type="text/javascript">
function pageLoad()
{
$("#accordion").accordion();
};
</script>
This way you can be certain that the accordion code will be executed after the editor is ready. Of course it depends on the code in your page, but with the given information, this seems the most probable issue.
Related
So I have this block of code:
$(document).ready(function() {
planSelectionForm.init($("form#new_account"));
});
And when I link to this page it works as expected. But when I refresh from the browser it doesn't get triggered. This seems like a common problem. Just for the record I'm using turbolinks. Any help on why this is happening would be great!
The only solution I could find after getting this problem was wrapping my script with:
document.addEventListener("turbolinks:load", function() {
planSelectionForm.init($("form#new_account"));
});
Wrap your .onready() functions into a function called initialize. The point, is to seperate the event-driven function calls such that the event driven function call calls a global function.
In there, add to your body or another element that supports onload.
$(document).ready(function() {
initialize();
});
function initialize()
{
}
<body onload="initialize(); return;"> </body>
Also, for Caleb, in my experiance, I believe jQuery ready events only get executed on either a fresh load, or a ctrl+f5 cache reload.
There are number of questions on this and I tried them out. However I am having an issue with the following anchor tag which acts as a button. Why isn't the link click event calling the function?
try 1:
Submit
try 2:
Submit
js code:
<script>
$("#btnSubmit").click(function(){
dbdata = <%=jsscripts()%>;
addAll(0, this);
});
</script>
<script type="text/javascript" src="cart_Test.js"> </script>
NOTE:
Please note that this particular js function works well when it's called under the DOM load event listener.
UPDATE:
dbdata is an array and addall() is a function defined in the cart_Test.js file. It seems, following script is not fired after the click function event.
<script type="text/javascript" src="cart_Test.js"> </script>
The order of the js:
<script>
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
//datepicker stuff
}
</script>
<script>
$("#btnSubmit").click(function(){
});
<script type="text/javascript" src="cart_Test.js"> </script>
Well, I am adding an answer since this is how I got it solved. It could be the order of execution.
There was a script snippet for a jQuery UI datepicker. Somehow it was blocking above stated scripts which are supposed to be the first scripts to be run in this page.
After removing the datepicker script (it can be any other script, not necessary a datepicker.) and adjusted the order of execution, the programme flow was back to normal and all scripts were firing as expected.
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.
I am calling a JavaScript function in a page to load an event as follows:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Script12", "Disable();", true);
The Disable() function is:
function Disable() {
var ed = tinyMCE.activeEditor;
ed.getBody().setAttribute('contenteditable', false);
}
But, when my page loads, it is not working as intended.
Are there any obvious errors in my code?
Is my Disable() function implemented correctly?
You can use jQuery ready function.
Just include the reference of jQuery library (http://docs.jquery.com/Downloading_jQuery) in your page & call like this.
<script src="../jquery-1.7.1.min.js"></script>
<script>
$(function() {
Disable();
});
</script>
I've seen a few questions like the one I'll ask but nothing identical. I have two html files, main and today. What I want to do is load today.html via AJAX into a child div in main.html. Sometime after load, I would like to call a function that resides in main.html from today.html
Within Main I have this function:
function drawCircle (size){
alert('DRAWING');
}
This AJAX load:
$("#leftofad").ajax({
url: ":Today.html?r="+genRand(),
type: 'GET',
success: function(data) { },
error: function() { alert('Failed!'); },
});
And this div:
<div id="leftofad"></div>
In Today.html I have
<script type="text/javascript">
$(document).ready(function(){
drawCircle (100);
});
</script>
The load is going well but Today.html doesnt seem to recognize the drawCircle function. I've tried several precursors including this., window., and parent..
I understand that I can use the callback method of the AJAX loader in jQuery but I don't necessarily want to call drawCircle when the load is complete. I may want to wait a bit or do it as a result of an action from the user. Is it possible to reference these functions from an AJAX-loaded div? If not, can I use an alternative method like events and listeners to fire the drawCircle function?
Since you will be loading JS into your page, try calling the function directly?
(The ready function won't run as the main page is already loaded)
Main.html
<script type="text/javascript">
function drawCircle(size) { alert("DRAWING" + size); }
$(function() {
$("#leftofad").load("Today.html?r="+genRand(), function() {
alert('loaded successfully!');
});
});
</script>
<div id="leftofad"></div>
Today.html
<script type="text/javascript">
drawCircle(100);
</script>
If this doesn't work, I strongly suspect that JavaScript returned in an AJAX call is not executed.
In this case, refer to: How to execute javascript inside a script tag returned by an ajax response
$("#leftofad").ajax is not proper.
jQuery's $.ajax function does not use a selector.
What you can use is load:
$("#leftofad").load("Today.html?r="+genRand(), function(){
alert('loaded successfully!');
});
Everyone here has some good answers, but I believe there is a knowledge gap and we are missing some information. If I were you, I would add an alert to the script in the Today.html file right before the drawCirle. Then I would run this page using IE or Chrome dev tools or Firebug in Firefox. When the alert is displayed you can put a breakpoint in the javascript code. Then check your global scope to try and locate drawCirle...
Sorry this is not an exact answer, but with javascript files you need to use debugging tools for this.
while there isn't really a document.ready function for a div, there is a hack that works just as if so:
create your returning data as a full html page:
<html>
<head>
<script type='text/javascript'>
$(document).ready( function () {
do-this;
to-that;
....
});
</script>
</head>
<body>
<%
your possible vbscript
%>
the rest of stuff to be loaded into that div
</body>
</html>
Then, you can have as many cascading div loading from different page loading and .... rinse and repeat ... forever .... EXPERIMENT with different DOCTYPE to see the different results.
EDIT:
Then, of course, you load the original MAIN with
$('#thedivid').load('url-of-the-html-returning-page');
Which, in turn, can have the VERY SAME call in the returning page document.ready as, for example; $('#thedivid-inthereturningdata-html-page').load('url-of-the-html-of-the-child-process-for-whaterver); .... and so on.
Go ahead, PLAY AROUND and make wonderful ajax based applications ....