Solved

jQuery: Problem with function in while loop

Posted on 2010-09-20
8
344 Views
Last Modified: 2012-06-21
This works:
$('#rq1').click(function() {
clearLeadForm();
  $('#leadForm1').html(leadForm);
  $('#leadForm1').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq2').click(function() {
clearLeadForm();
  $('#leadForm2').html(leadForm);
  $('#leadForm2').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq3').click(function() {
clearLeadForm();
  $('#leadForm3').html(leadForm);
  $('#leadForm3').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq4').click(function() {
clearLeadForm();
  $('#leadForm4').html(leadForm);
  $('#leadForm4').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq5').click(function() {
clearLeadForm();
  $('#leadForm5').html(leadForm);
  $('#leadForm5').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq6').click(function() {
clearLeadForm();
  $('#leadForm6').html(leadForm);
  $('#leadForm6').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq7').click(function() {
clearLeadForm();
  $('#leadForm7').html(leadForm);
  $('#leadForm7').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});

Open in new window


But this does not work:
var i = 1;
while (i <8) {
	$('#rq'+i).click(function() {
	clearLeadForm();
	  $('#leadForm'+i).html(leadForm);
	  $('#leadForm'+i).animate({height: '360px'}, 900);
	  $(this).css( {background: "#fff"})
	  return false;
	});
 i++
}

Open in new window


It seems that the value for var i is not being properly passed.
0
Comment
Question by:hankknight
[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
8 Comments
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 33721883
That would be because the "$('#leadForm'+i)" is part of the function body, including the +i.
By the time the function runs, i is undefined.

Try this:
var i = 1;
while (i <8) {
	$('#rq'+i).click(function() {
	clearLeadForm();
        var $e = $('#leadForm'+ $(this).id.substr(-1) );
	  $e.html(leadForm);
	  $e.animate({height: '360px'}, 900);
	  $(this).css( {background: "#fff"})
	  return false;
	});
 i++
}

Open in new window

0
 
LVL 58

Assisted Solution

by:cyberkiwi
cyberkiwi earned 100 total points
ID: 33721893
If this line does not work (haven't had a chance to construct a full page to test)

        var $e = $('#leadForm'+ $(this).id.substr(-1) );

Try these variants:

        var $e = $('#leadForm'+ this.id.substr(-1) );
        var $e = $('#leadForm'+ $(this).attr('id').substr(-1) );
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33722228
Alternatively, you could have a class for the elements with name rq1,rq2 ... as say loadForm i.e class="loadForm" and then you can do as in snippet 1 or as cyberwiki suggested (while still having the class) as in snippet 2.



Code snippet 1:[If the rq1 is in leadForm1, rq2 in leadForm2 and so on...]

$('.loadForm").click(function() {
	clearLeadForm();
	$(this).parents("form").html(leadForm);
	$(this).parents("form").animate({height: '360px'}, 900); 
	$(this).css( {background: "#fff"}) return false; 
}); 

Code snippet 2:

$('.loadForm").click(function() {
	clearLeadForm();
	var $e = $('#leadForm'+ $(this).attr('id').substr(-1) );
	$e.html(leadForm);
	$e.animate({height: '360px'}, 900); 
	$(this).css( {background: "#fff"}) return false; 
});

Open in new window

0
Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33722344
or you can try this also

var i = 1;
while (i <8) {
      $('#rq'+i).click(function(i) {
      clearLeadForm();
        $('#leadForm'+i).html(leadForm);
        $('#leadForm'+i).animate({height: '360px'}, 900);
        $(this).css( {background: "#fff"})
        return false;
      });
 i++
}
0
 
LVL 14

Accepted Solution

by:
Dushyant Sharma earned 300 total points
ID: 33723467
I have tested this and it is working fine.
            var i = 1;
            while (i <8) {
                setthis(i);
                i++;
            }
            function setthis(i){
                $('#rq'+i).click(function() {
                    clearLeadForm();
                    $('#leadForm'+i).html(leadForm);
                    $('#leadForm'+i).animate({height: '360px'}, 900);
                    $(this).css( {background: "#fff"})
                    return false;
                });

            }
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33753071
hankknight,
have you tried the solution i have given>?
0
 
LVL 17

Assisted Solution

by:Shinesh Premrajan
Shinesh Premrajan earned 100 total points
ID: 33753218
In your code, you are referring to the "this" variable,

$(this).css( {background: "#fff"});

disable this the code should work

Hope this helps
          var i = 1;
            while (i <8) {
                setthis(i);
                i++;
            }
            function setthis(i){
                $('#rq'+i).click(function() {
                    clearLeadForm();
                    $('#leadForm'+i).html(leadForm);
                    $('#leadForm'+i).animate({height: '360px'}, 900);
                    //$(this).css( {background: "#fff"})
                    return false;
                });

            }

Open in new window

0
 
LVL 16

Author Closing Comment

by:hankknight
ID: 33773722
Thanks
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses
Course of the Month10 days, 12 hours left to enroll

628 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