Solved

reuse variable for later

Posted on 2014-12-13
23
91 Views
Last Modified: 2014-12-14
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
0
Comment
Question by:M. Jayme Nagy
  • 12
  • 11
23 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40498416
Declare it as a blank variable outside any function i.e. in the sample place as you have

var grid;
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498423
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498429
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
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498437
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498438
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
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498443
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498447
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
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498450
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498453
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
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498457
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498462
var grid; needs to be outside the function
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498487
it is

it seems like

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

has an affect that voids the var?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40498491
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
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498493
correct. i adjusted it to what you have
0
 
LVL 58

Expert Comment

by:Gary
ID: 40498496
Do you have a live page to look at
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498498
sure
http://www.bushbrigade.com/bushbase/system/pages.php

user: expert-exchange
pass: 3XP3rt!!!!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40498509
Page is empty
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498518
sorry

it should work now
0
 
LVL 58

Expert Comment

by:Gary
ID: 40498521
Nope
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40498525
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40498542
Curious, change

grid       = $('#gridder');

to

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

Author Comment

by:M. Jayme Nagy
ID: 40498551
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
 
LVL 58

Expert Comment

by:Gary
ID: 40498962
point me in some direction
To learn jquery?
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

758 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

19 Experts available now in Live!

Get 1:1 Help Now