reuse variable for later

I have the following jquery code
//TEST FOR PROPER METHOD
function clicker (clickClass){
    var grid;

    $(document).on("click", '.' + clickClass, function(event){
        //THE USER WANTS TO ADD X AMOUNT OF BLOCKS
        var number   = 1,
            amount   = $(this).attr("value"), 
            action   = $(this).attr("action"),
            gridder  = $('#gridder'),
            gridster = $(".gridster ul").gridster().data('gridster');	
            addblock = false;
            
        if(action == 'delete'){
            //STORE THE OLD HTML
            var button   = $("#undo_btn"),
                grid	 = $('#gridder').html();  // <-problem
                
            //REMOVE ALL THE BLOCKS
            if(grid !== ''){
                if (confirm('Are you sure you want to delete your design?')) {
                    //DELETE EACH ELEMENT
                    alert('deleted');
                
                };
            }else{
                alert('There is nothing to delete!');
            };
        }else if(action == 'undo'){
            //MAKE SURE VAR IS SET
            if(typeof(grid) !== 'undefined'){
                //RECREATE THE GRID
                $(grid + " li").each(function(){
                    alert('added');
                });
            }else{
                alert('OOoops! Something went wrong!');
                
            };
        };
    });
};

Open in new window


i have buttons that i have set clickClass ='clicker' like

<button type="button" class="btn btn-default clicker" action="delete" value="all" title="Erase">
<button type="button" class="btn btn-default clicker" action="undo" value="all" title="Undo">

if i click the delete button  and use console.log(grid);  the delete function fires and resets the grid variable is changes to the required information (the html markup before the delete). However, if i click the undo button after i have clicked the delete button the variable grid is undefined. how can i store the grid var for future use only after the delete button has been pressed?

thanks in advanced
LVL 6
J NUnicorn wranglerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Declare it as a blank variable outside any function i.e. in the sample place as you have

var grid;
0
J NUnicorn wranglerAuthor Commented:
hi,

thanks for the quick reply!


i have tried declaring it outside my function as such

<script>
  var grid;

clicker('clicker'); 

</script>

Open in new window


if i add console.log(grid) to the function i get 'undefined' when clicking the undo button . The undo button is only available after the delete button has been pressed

when i click the delete button conole.log records the correct results.
0
GaryCommented:
Not sure I'm following, do you want the grid HTML saved in it's initial state?
If so then this
   grid       = $('#gridder').html();

need to be declared outside any function
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

J NUnicorn wranglerAuthor Commented:
Hi,

Not the original state as it starts as empty.

With each click event the user can add boxes and modify them. I want to save the html markup before someone deletes their "work" just in case they want to reverse it so i can add it back in

the grid var seems to be reset with

   grid       = $('#gridder').html();

even if action does not equal delete

for example

function clicker (clickClass){
    var grid;

    $(document).on("click", '.' + clickClass, function(event){
        //THE USER WANTS TO ADD X AMOUNT OF BLOCKS
        var number   = 1,
            amount   = $(this).attr("value"), 
            action   = $(this).attr("action"),
            gridder  = $('#gridder'),
            gridster = $(".gridster ul").gridster().data('gridster');	
            addblock = false;
            
        if(action == 'delete'){
            //STORE THE OLD HTML
            var button   = $("#undo_btn"),
               // grid	 = $('#gridder').html();  // <-removed
                
            //REMOVE ALL THE BLOCKS
            if(grid !== ''){
                if (confirm('Are you sure you want to delete your design?')) {
                    //DELETE EACH ELEMENT
                    alert('deleted');
                
                };
            }else{
                alert('There is nothing to delete!');
            };
        }else if(action == 'undo'){
            //MAKE SURE VAR IS SET
            if(typeof(grid) !== 'undefined'){
                //RECREATE THE GRID
                $(grid + " li").each(function(){
                    alert('added');
                });
            }else{
                alert('OOoops! Something went wrong!');
                
            };
        };
    });

console.log(grid);
};
          

Open in new window


and add the function to a page

<script>
var grid ="this is the grid";

clicker('clicker');
</script>

the new function will yield 'this is the grid' but if i dont comment out the resetting of the var it yields undefined
0
GaryCommented:
The code is a bit confusing - why is the onclick event inside a function?
Are you calling the clicker function for each element just the once or on the same element multiple times?
0
J NUnicorn wranglerAuthor Commented:
i wrapped the code inside a function so i can declare it on a page as needed.

i simply delcare the clicker function once at the end of my page
0
GaryCommented:
The grid var is HTML but you are referencing it as if it was an object here:

$(grid + " li").each(function(){

and ditto here

if(typeof(grid) !== 'undefined'){

If you want to store it as an object then
    grid       = $('#gridder').html();
becomes
    grid       = $('#gridder');
0
J NUnicorn wranglerAuthor Commented:
However, if i press delete then i reset grid to the object but if i select undo after i press delete grid is undefined
0
GaryCommented:
When you press delete the grid's HTML is stored here
    grid       = $('#gridder').html();

If you press Undo then you are trying to do something here as if grid was an object
    $(grid + " li").each(function(){

But it isn't an object, it's a string of HTML
0
J NUnicorn wranglerAuthor Commented:
Ok so i will adjust that

but it never gets to

$(grid + " li").each(function(){

because of the if statement i added

if(typeof(grid) !== 'undefined'){

and console.log(grid) = undefined so i get the alert that something wrong has happened ("ooops")
0
GaryCommented:
var grid; needs to be outside the function
0
J NUnicorn wranglerAuthor Commented:
it is

it seems like

  grid       = $('#gridder').html();

has an affect that voids the var?
0
GaryCommented:
var grid; // needs to be here to be global

//TEST FOR PROPER METHOD
function clicker (clickClass){
// Not here

    $(document).on("click", '.' + clickClass, function(event){

Open in new window

0
J NUnicorn wranglerAuthor Commented:
correct. i adjusted it to what you have
0
GaryCommented:
Do you have a live page to look at
0
J NUnicorn wranglerAuthor Commented:
sure
http://www.bushbrigade.com/bushbase/system/pages.php

user: expert-exchange
pass: 3XP3rt!!!!
0
GaryCommented:
Page is empty
0
J NUnicorn wranglerAuthor Commented:
sorry

it should work now
0
GaryCommented:
Nope
0
J NUnicorn wranglerAuthor Commented:
weird i just tried it and it worked

does you screen look like the attached picture?

if so, it starts black and then you add blocks block using the "actions"

if you  add a test/picture box (via the button) then click the delete button (eraser)  the undo button will appear and then we run into the issues
pages.php.png
0
GaryCommented:
Curious, change

grid       = $('#gridder');

to

window.grid       = $('#gridder').html;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
J NUnicorn wranglerAuthor Commented:
changed

grid       = $('#gridder');

to

window.grid       = $('#gridder');

and bingo!!!

can you please explain or point me in some direction ( i just started jquery )

thanks a bunch
0
GaryCommented:
point me in some direction
To learn jquery?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.