Solved

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

Posted on 2010-11-16
7
447 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

0
Comment
Question by:brianmfalls
  • 4
  • 2
7 Comments
 
LVL 16

Assisted Solution

by:jmatix
jmatix earned 200 total points
Comment Utility
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
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 300 total points
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 1

Author Comment

by:brianmfalls
Comment Utility
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
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
 
LVL 1

Author Comment

by:brianmfalls
Comment Utility
Okay.  Thanks.  :)
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now