CODEWITHSUNDEEP
javascriptjquery
Louis Tran
Louis Tran

Reputation: 1156

2 questions regarding Javascript & Jquery

Please take a look at the code below. This function is used to add more text input when user click con a button. I don't understand 2 things.

  1. Why we need this? var i = $('#p_scents p').size() + 1; I don't understand what it is used for. I tested and see that the function still works as long as you define var i. I'm not sure if $('#p_scents p').size() + 1; is necessary here.

  2. Why return false; in both 2 functions?

http://jsfiddle.net/jaredwilli/tzpg4/4/

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

Upvotes: 1

Views: 109

Answers (2)

Amar Singh
Amar Singh

Reputation: 5622

var i = $('#p_scents p').size() + 1;

Above code must have made sense if you were using var i to give unique ID for dynamically added contents ,since the ID's should be always unique (then you need to change the selector of size() too).

Explanation :

size() returns how many #p_scents p (selector) you have in page (say 1)

now you are adding 1 to it so var i becomes 2 Now for the new input type text added by you is assigned by a unique name "p_scnt_' + i +'" i.e. p_scnt_2.

So what I was telling is DOM should always have unique ID , therefore you should use var i value to give a unique ID .

Like this

$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" ...

In your code you have used i variable to give a unique name.

about return false; , its not at all required there since there is nothing in the code which you dont want to follow after click event. You can use return false in an onclick event to stop the browser from processing the rest of the execution stack, which includes following the link in the href attribute.

Adding to that , you dont need to check if( i > 2 ) { in remove button click because value will be always greater than 2 for every remove button on page. Since at the time of adding a remove button dynamically you always increment var i value from 2

Upvotes: 1

Jacob
Jacob

Reputation: 78860

i looks to be tracking the number of items on the page. It's initialized to match how many items are on the page when it first loads. That's the purpose of i = $('#p_scents p').size() + 1;.

The return false causes the default behavior of the clicks to not occur. This is important, for example, if you have a click handler on a link, and you don't want clicking on them to go to the href of the link.

Upvotes: 1

Related Questions