Solved

jQuery: Problem with function in while loop

Posted on 2010-09-20
8
339 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
8 Comments
 
LVL 58

Expert Comment

by:cyberkiwi
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 14

Accepted Solution

by:
ddsh79 earned 300 total points
Comment Utility
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
Comment Utility
hankknight,
have you tried the solution i have given>?
0
 
LVL 17

Assisted Solution

by:shinuq
shinuq earned 100 total points
Comment Utility
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
Comment Utility
Thanks
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

772 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

10 Experts available now in Live!

Get 1:1 Help Now