Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 468
  • Last Modified:

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

0
brianmfalls
Asked:
brianmfalls
  • 4
  • 2
2 Solutions
 
Justin MathewsCommented:
Try this:
$(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

0
 
DesignbyonyxCommented:
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

0
 
DesignbyonyxCommented:
And, you're code is a little redundant.  This would achieve the same purpose:
jQuery(function($) {
                var savedContent = document.getElementById('ajaxContainer').innerHTML;
                ///////////////////////////////////////////////// for resetting email content /////////////////////////////////////////////////
                
                $("#resetContent").click(function() {
                        alert('within resetContent click function');
                        alert('savedContent:\n' + savedContent);
                        $('#ajaxContainer').innerHTML = savedContent;
                });
                
});

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
brianmfallsAuthor 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?
0
 
DesignbyonyxCommented:
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

0
 
brianmfallsAuthor Commented:
Okay.  Thanks.  :)
0
 
DesignbyonyxCommented:
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.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now