We help IT Professionals succeed at work.

How do I access a variable from document ready function in jQuery function?

brianmfalls
brianmfalls asked
on
519 Views
Last Modified: 2012-06-22
I have a click function to reset content to its' original state.  I have set a variable with the original content in the document.ready function.  I am trying to access that variable in a function within the jQuery.function.  It fails.  Is it possible to do this another way, if at all?  If so, how?

The first alert works, the second fails, which proves that the variable is not defined within the jQuery.function block.  
$(document).ready(function() {
	var savedContent = document.getElementById('ajaxContainer').innerHTML;
});

jQuery(function($) {
		
		///////////////////////////////////////////////// for resetting email content /////////////////////////////////////////////////
		
		$("#resetContent").click(function() {
			alert('within resetContent click function');
			alert('savedContent:\n' + savedContent);
			$('#ajaxContainer').innerHTML = savedContent;
		});
		
});

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
declare the variable OUTSIDE of any function calls:
var savedContent;
$(document).ready(function() {
        savedContent = document.getElementById('ajaxContainer').innerHTML;
});

jQuery(function($) {
                
                ///////////////////////////////////////////////// for resetting email content /////////////////////////////////////////////////
                
                $("#resetContent").click(function() {
                        alert('within resetContent click function');
                        alert('savedContent:\n' + savedContent);
                        $('#ajaxContainer').innerHTML = savedContent;
                });
                
});

Open in new window

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Since the content is dynamic, if I set the var in the jQuery function block rather than the document.ready block, won't it then retrieve the current state rather than the initial state?
The following two code snippets perform the same exact action.


// This is kind of the old way of doing it
$(document).ready(function() {

});

// This is a shorthand for the above script
$(function() {

});

// And this is another way people are doing it (including myself) 
// This way, you don't have to worry about conflicting with other scripts
(function($) {
  $(function() {
    // All code in here fires on document ready
  });
}(jQuery));

Open in new window

Author

Commented:
Okay.  Thanks.  :)
It is worth noting that the last method is good if you have multiple other script libraries, or if you are developing plugins or widgets that could be placed in other peoples sites.

Otherwise, you are best off using the shorthand method I described above.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.