?
Solved

reuse variable for later

Posted on 2014-12-13
23
Medium Priority
?
103 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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 2000 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

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

770 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