Is it mandatory to write $(document).ready(function () {... }) every time ?
Can't we do it without this line?
The reason for placing your code inside this function is that it will get called once the DOM has loaded - meaning that all the elements are accessible. Calling jQuery selectors without this function means that the elements have not necessarily been loaded into the DOM and might not be accessible (and you'll see weird results or nothing at all from your code).
So in essense, yes, it is necessary.
$(document).ready makes sure your code runs when the document is ready (i.e. fully loaded). If you don't need to interact with the document, you don't need this. If you put your Javascript at the end of the document, you probably don't need it either. You should put your code into a function () { } though to namespace it either way.
$(document).ready means the code inside this box will be executed once the all document is ready (loaded). It is considered as safe programming but not mandatory.
For example you call a function in script tag do_something(); and this function is in a js file which is not loaded yet then you will get javascript error.
If you put function like this
$(document).ready(function () {
do_something();
});
you are making sure that when function get called all js files will be there to server.
If you don't use that line, and just include the javascript in your body, it will execute as soon as it's loaded. If it's trying to act on DOM elements that have not yet loaded, unpredictable results will occur.... better to be safe than sorry.
jQuery's ready() function is run after the page's content is loaded. This is relatively equivalent to using <body onload="function1();function2();">
If you want to call multiple functions when the page is done loading, you can do the following:
$(document).ready(function() {
function1();
function2();
});
In order to use javascript, you must call it somewhere. This can be in body "onload", jQuery's ready() function, or an event, like a mouse click event.
No you don't always have to do this. You only use it if you want to make sure whatever is inside the ready function loads before the page is displayed in the browser. If you do not care to load the script before page load, then you can just put the script at the end of the page before the closing body tag.
Also As a shortcut to $(document).ready(function () you can do $(function()
Related
I'm adding a script tag to a web page once it's fully loaded in a WebEngineView, but it's silently failing somehow.
I inject the script by invoking webview.runJavaScript with this code:
var s = document.createElement('script');
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
That's perfectly standard and to a certain extent it works as expected, i.e., if I view the html source of the page, the script tag has indeed been appended to the body.
The problem is that the script isn't being downloaded, or isn't being evaluated, or something. All I know is in the above example the jQuery functions aren't available. If I load a small JavaScript test file with one global variable, that variable's not available either. Changing the url to http instead of qrc and pointing it to a web server makes no difference.
Injecting an img tag works fine; the image is loaded and displayed.
But JavaScript is broken somehow. Does anyone know how to fix this?
The problem had to do with the asynchronous nature of QML and JavaScript.
I was inserting a script tag to inject jQuery, and then I was calling a function to de-conflict my inserted version of jQuery from whatever version of jQuery might already be in the original page.
But I believe the webview had not finished parsing the inserted jQuery library before my de-conflicting function was called, so it failed. (I'm not very experienced with browser programming or I might have suspected this from the beginning.)
The solution was to insert a script tag with a small bit of JavaScript that inserts jQuery and then sets a timeout to wait 200ms before calling the de-conflict function. Like so:
function insertAuhJQuery(){
var s = document.createElement("script");
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
window.setTimeout(deConflictJQuery, 200);
}
function deConflictJQuery(){
auh = {};
auh.$ = jQuery.noConflict(true);
}
insertAuhJQuery()
That works reliably and is acceptable for my purpose.
just want to ask. I've built a reports(SSRS) in ASP.NET(vb). But my problem is, I can't call the javascript in my SSRS to open a new form in ASP.NET, but instead of opening new form I just change to basic show message function. Here's my expression in my textbox in the report ="javascript:test();". The test is a function inside ASP.NET. But when I generate the report, the link in my report doesn't do anything. Is there any problem in my function or in SSRS?
function test(){
alert('Test');
return;
}
I've already have a solution. ="javascript:void(window.showModalDialog('"+ First(Fields!CompanyURL.Value, "SYS_DEFAULTS") + "/logged/dialog_window.aspx?p=master_customers.aspx&objcode=1&recid="& Fields!AccountCode.Value &"'))" but I'm not satisfied because when I mouse over my field. It show the path of my source code. :(
Go to Series chart action properties
="javascript:void(window.parent.test('" + Fields!DeviceStatus.Value+"'))"
And write function Aspx webpages
<script type="text/javascript">
function test(testing) {
alert(testing);
return;
}
</script>
The SSRS report viewer is embedded in an iFrame, so it doesn't have direct visibility to the parent HTML page's functions. You might be able to get to your test function via the following code, but there's no guarantee:
javascript:window.parent.test();
If that doesn't work, then I'd guess you're out of luck. The only other option I can think of is to inline the function body to your javascript: call directly.
I am using nicEdit in its iframe format.Everytime the user write anything in the editor(keyup event), I need to run another js/jquery function. How to add this custom keyup action to the desired iframe?
The answer actually lies in the js code. In the nicEdit.js search for :
var nicEditorIFrameInstance = nicEditorInstance.extend({
Inside this, in the initFrame function,
look for this.frameDoc.addEvent.
This is where the events are being added(via addEvent). To this include your keyup statement :
addEvent('keyup',this.YOURFUNCTIONAME.closureListener(this))
You need to add closureListener(this) to get this working.Then create YOURFUNCTION after initFrame function like this :
YOURFUNCTIONAME: function() {
//Do what you like. Probably call any JS function that lies in the file where
//you have included the nicEdit.js
},
This method worked for me. Hope it does for you too. nicEdit is by far the worst documented third party stuff I have ever come across.
Using jquery, I am swapping some content in a web page by use of jquery's .load() function. I want to trigger an event immediately once the content has actually been loaded, but not before and not after. I'm up for any graceful solution! Why? In this instance, I'm doing the old "fade out, swap content, fade in" approach. My problem? I want to fade back in AS SOON AS the new content is loaded.
Caveats:
Using a callback function as in $('#object').load(url, callback) triggers as soon as .load() function successfully executes (before the content is actually loaded). Useless here.
Using a timed delay for fading back in is not a graceful solution. Very "clunky", especially for those with faster Internet connectivity.
JavaScript's onload event trigger does not work, as the element that .load() is altering has already loaded into the HTML DOM.
jquery's .ready() function also does not work, as the actual element is already loaded.
I do not want to create an onload or .ready() sub-container element, because that's a workaround for what I'm actually trying, though it might be as graceful or more.
How can I fire a function when (and only when) the new .load() content is finally loaded, just like JavaScript's onload event does? Thanks much.
EDIT As it turns out, the jquery .load() function is working flawlessly, and I'm approaching this wrong.
Once the .load() function completes successfully, it calls any "callback" function included by the programmer, just like any other jquery function that accepts a callback as one of its "arguments".
The .load() function is complete once it either errors or successfully begins the HTML replacement and loading of new content, but that is IT! The content will then take however long it takes to load, but your .load call is already complete before that. Therefore, expecting the callback to run after the .load content has loaded will only disappoint you. ;)
I hope others can learn from this just as I did, including those who thought what I thought was the case. Proof: as stated in the jquery ajax .load page, the callback is executed when the request completes, not when the load completes. Eureka. Whoops. /EDIT
Try using a different method rather than load(), I would suggesting using get(). Something like this may be more useful to you...
var jqxhr = jQuery.get(url,vars);
jqxhr.success(function(data){
# This will only be called once the remote content has been loaded in
# The data will then be stored in the data param and can be used within your site
});
jqxhr.error(function(data){
# Something went wrong, never mind lets just handle it gracefully below...
});
I hope this is a solution to your problem!
For more information see http://api.jquery.com/jQuery.get/
I have quickly created this function below that may be of help to you... its not refined!
jQuery.fn.loadNewData = function() {
var object = jQuery(this);
var jqxhr = jQuery.get(arguments[0]);
// check for success
jqxhr.success(function(data) {
// load the data in
object.html(data);
});
jqxhr.error(function(){
alert('Failed to load data');
});
}
Using this you can call how similarly to how you would call the load() function.
jQuery('#object').loadNewData(url);
I think you might be misinterpreting what you are seeing. Depending on the browser you are using you won't see the new elements in the browser if you pop up an alert in the callback because it won't rerender the DOM until you cede control back to the browser. That doesn't mean you can't grab the new elements from the DOM and start fading them in. Take the following jsfiddle: http://jsfiddle.net/ttb55/8/ in Chrome it will show the first div when the second alert is up, then fade in the second div. In IE it won't show the first div when the second alert is up, this is the state I think you are in after load during the callback, but it still works once you hit ok because everything was in the DOM as promised.
Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:
"A callback function that is executed if the request succeeds."
Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load() — the functions aren't built the way I was thinking.
If I want to trigger an event once the new content finally loads, I'll need to take a different approach.
I could use the JS onload event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload property). EDIT: Note that using HTML iframe elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes.
Also, I could use jQuery to check the .ready() state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready() status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.
Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load() was all I needed. Cheers!
I have a form and I add a js file via drupal_add_js() in the init code of the module.
I see the first debug message, but I can't seem to select any items from the document. I just get the jQuery object returned.
But when I add the same line into the firebug, it works.
console.log('called => init()');
console.log(jQuery('#quiz-form').find('#edit-next'));
If you're trying to retrieve the value from your form element, try:
console.log(jQuery('#quiz-form').find('#edit-next').val());
Getting the jQuery object as return is perfectly fine as methods like find actually return a jQuery object. You should check the length of the jQuery object that you are getting as return i.e. console.log(jQuery('#quiz-form').find('#edit-next').length);. If the length is zero, then of course the elements are not being found. In that case you should make sure that your JS code is being called after the DOM is ready i.e. you should either wrap your code with jQuery(document).ready or use Drupal behaviors.
I figured it out by chance. The jQuery object was trying to find the selected object before the page was initialized.
I was thinking drupal_add_js in the init module was enough.
BUt I had to wrap the jquery code in the Dom Ready function as well... as we always are supposed to do.