www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Trouble with Scope in JQuery

  1. #1
    Join Date
    May 2009
    Posts
    46

    resolved [RESOLVED] Trouble with Scope in JQuery

    I'm relatively new to using Javascript and JQuery, but it seems to me that this code should work, but for some reason, it doesn't.

    I'm trying to setup a box that will accept quantities for multiple items. I want each quantity field to have a plus and minus button on each side, so if the user clicks on the '+', then it will add one to the quantity. I'm not sure how many items will be listed, so I have to create it dynamically.

    I'm not sure if my problem is an issue with the scope of the variable inside the inline function, or if there's a problem with my syntax.

    EDIT: If I set the inline function to alert the value of proof_qty[i], I'm getting an 'undefined' message.

    Here's my code, any help would be greatly appreciated.

    Code:
    $(function() {
    	materials_box = $("<div id='materials_box'>");
    	title_bar = $("<div id='title_bar'>").html("<h1>Materials</h1>");
    	content = $("<div id='content'>");
    	
    	add_buttons = new Array();
    	subtract_buttons = new Array();
    	proof_qty = new Array();
    	
    	for(var i=0; i<3; i++){
    		proof_qty[i] = $("<input type='text' class='qty_field' id='quantity_"+i+"'>").val('0');
    		add_buttons[i] = $("<div class='add_button'>").html("+").click( function(){	$(proof_qty[i]).val('12'); });
    		subtract_buttons[i] = $("<div class='subtract_button'>").html("-").click(function(){	$(proof_qty[i]).val('1'); });
    		
    		content.append(add_buttons[i]).append(proof_qty[i]).append(subtract_buttons[i]);
    	}
    	
    	materials_box.append(title_bar).append(content);
    	
    	overlay = $("<div id='overlay'>");
    	$("html").append(overlay).append(materials_box);
    });
    Thanks!
    Brian
    Last edited by bcmann; 07-14-2010 at 11:32 AM.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    I think that this will solve the problem. Replace the two lines add_buttons[i] and subtract_buttons[i] with this.
    Code:
    (function (x) {
    add_buttons[i] = $("<div class='add_button'>").html("+").click( function(){	$(proof_qty[x]).val('12'); });
    		subtract_buttons[x] = $("<div class='subtract_button'>").html("-").click(function(){	$(proof_qty[x]).val('1'); });
    })(i);
    I don't know anything about jQuery, so I presume the rest of that is ok.

  3. #3
    Join Date
    May 2009
    Posts
    46
    Wow, that worked! Thank you so much.

    But now I'm trying to figure out how that worked! I want to get more info on setting up a function like that, but I'm not even sure what to google.

    Is the (i) on the end of the function the value that is being passed into the 'x' variable? If so, then why use [i] on the "add_buttons[i]"?

    Thanks again, I really appreciate the help.

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Ok, just to not confuse things, I won't use an anonymous function.
    Code:
    function whateveryouwant (x) {
    /* the code */
    }
    for (var i = 0; i < 3; i++) {
    whateveryouwant(i);
    }
    With that code, whateveryouwant is run immediately, and run three times. The way you had it, $(proof_qty[i]).val('12'); was never actually evaluated because the button wasn't clicked. When the button was clicked, it then went looking for a value for i, which was undefined. The problem is when the variable is accessed, you have to force it to be accessed now.

    Why it works with x instead of i is because it creates a closure. It's not as complicated as it sounds, but it might take a while for you to understand.

  5. #5
    Join Date
    May 2009
    Posts
    46
    That actually makes total sense! I usually write in PHP, and all of my code is executed during the page load, so I haven't had this issue before.

    The only thing I'm struggling with is how is it that (i) is being passed into the function? I've always seen functions written as "function (i) { }", so I'm having a hard time getting my head around "(function (x) {})(i)".

    Thanks again for the help!

  6. #6
    Join Date
    Aug 2007
    Posts
    3,767
    As I say, it's the same as this.
    Code:
    function whatever (x) {
    
    }
    whatever(i);
    But with an anonymous function, it's like this.
    Code:
    (function (x) {
    
    })(i);
    The colours correspond.

  7. #7
    Join Date
    May 2009
    Posts
    46
    Got it. Makes sense now.

    Thanks again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles