Link to home
Start Free TrialLog in
Avatar of brianmfalls
brianmfallsFlag for United States of America

asked on

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

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

SOLUTION
Avatar of Justin Mathews
Justin Mathews

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brianmfalls

ASKER

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

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.