CodingForums.com
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Cannot Find Error in JQuery (http://www.codingforums.com/showthread.php?t=226824)

roher4 05-14-2011 02:53 AM
Cannot Find Error in JQuery
 
Could someone help me? I need to find my error. I'm nearly about to pull every hair out of my body. I'm trying to make a todo list web app with Javascript and not PHP. It nearly works, but I can't get this for loop to work. Could someone also help me get it working because I'm so close. Here's the source:

Javascript/JQuery
Code:
$(document).ready(function() {

        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#addButton").click(function(){
                if(idCounter>5){
                        alert("Please add only five items at a time");
                        return false;
                }

                var $textBoxArray =(idCounter);
               
                for (var i=1; i<idCounter; i++) {
                        $textBoxArray[i]=$('<input/>').attr({ type: 'text', name:'text', value:'', id:"addTextBox"});
                        $("#newTextBoxes").append$(textBoxArray[i]);
                        idCounter++;
                }
               

        });

        $("#submit").click(function(){

                                $("#addedItemsText").remove();

                               
                                for (var j=1; j<idCounter; j++) {
                                        var textEntered = $(textBoxArray[j]).val();
                                       
                                        var newTask = $('<p/>').text(textEntered).addClass("listitems");
                                        $("#addedItems").append(textBoxArray[j]);
                                }

        });
       
            });
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
        <title>To-do List</title>
        <link rel="stylesheet" href="style.css">

        </head>

        <body>
                <p id="header">To Do List</p>

                <div id="list" class="list">
                        <form id="todoListForm" method="get">
                                <div id="item" class="item">
                                        <input type="text" name="add" id="addTextBox" />
                                        <input type="button" value="+" id="addButton" />
                                        <!--New text boxes will appear here. -->
                                        <div id="newTextBoxes"></div>
                                        <input type="button" value="Add Items" id="submit">
                                        <div class="listitems">
                                                <p id="addedItemsTitle">Added Items</p>
                                                <hr>
                                                <p id="addedItemsText"> Items added above will be displayed here.</p>
                                                <div id="addedItems"></div>
                                        </div>

                                </div>
                        </form>
                </div>

                <div class="footer" id="footer">
                       
                </div>

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
                <script src="scripts.js"></script>

        </body>

        </html>

bullant 05-14-2011 04:09 AM
Another option without using jquery.

When you click the "Add items" button, the textboxes that you added with the "+" button are moved to the addedItems div.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>To-do List</title>
        <style type="text/css">
            .dispBlock {
                display: block;
            }
            #newTextBoxes {
                width: 200px;
                float: left;
            }
            #addBtnContainer {
                width: 50px;
                float: left;
            }
            #list {
                clear: both;
            }
        </style>
        <script type="text/javascript">
            function addTextbox(){
                var newTxtbox = document.createElement('input');
                newTxtbox.setAttribute('type','text');
                newTxtbox.setAttribute('name','add[]');
                newTxtbox.className = 'dispBlock';
                document.getElementById('newTextBoxes').appendChild(newTxtbox);
            }
            function addItemsToForm(){
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                while(txtBoxesO.length > 0){
                    document.getElementById('addedItems').appendChild(txtBoxesO[0].parentNode.removeChild(txtBoxesO[0]));
                    txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                }
            }
            window.onload=function(){
                document.getElementById('addButton').onclick=addTextbox;
                document.getElementById('btnSubmit').onclick=addItemsToForm;
            }
        </script>
    </head>
    <body>
        <p id="header">To Do List</p>
        <div id="inputBoxes">
            <div id="newTextBoxes">
                <input type="text" name="add[]" id="addTextBox" />
            </div>
            <div id="addBtnContainer">
                <input type="button" value="+" id="addButton" />
            </div>
        </div>
        <div id="list" class="list">
            <form id="todoListForm" action="#" method="get">
                <div id="item" class="item">
                    <input type="button" value="Add Items" id="btnSubmit">
                    <div class="listitems">
                        <p id="addedItemsTitle">Added Items</p>
                        <hr />
                        <div id="addedItems"></div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

SB65 05-14-2011 08:51 AM
Code:
var idCounter=1;
        $("#addButton").click(function(){
          ......
               
                for (var i=1; i<idCounter; i++) {
.....
                }
If you're initialising idCounter to 1, then the end condition in your for loop is already met, so it won't loop...is that the problem?

bullant 05-14-2011 08:57 AM
Quote:
If you're initialising idCounter to 1, then the end condition in your for loop is already met, so it won't loop...is that the problem?
I think the op has an infinite loop because idCounter is being incremented as well on each loop iteration and so i will always be < idCounter.

But imo for something relatively basic, it's easier without jquery.

SB65 05-14-2011 09:47 AM
Am I missing something then - how is idCounter anything other than 1 within $("#addButton").click function?

bullant 05-14-2011 10:32 AM
yep, I think you're right. I didn't notice where it was being initialised and so assumed it was initially 0.

roher4 05-15-2011 12:08 AM
Quote:
Originally Posted by bullant (Post 1090424)
Another option without using jquery.

When you click the "Add items" button, the textboxes that you added with the "+" button are moved to the addedItems div.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>To-do List</title>
        <style type="text/css">
            .dispBlock {
                display: block;
            }
            #newTextBoxes {
                width: 200px;
                float: left;
            }
            #addBtnContainer {
                width: 50px;
                float: left;
            }
            #list {
                clear: both;
            }
        </style>
        <script type="text/javascript">
            function addTextbox(){
                var newTxtbox = document.createElement('input');
                newTxtbox.setAttribute('type','text');
                newTxtbox.setAttribute('name','add[]');
                newTxtbox.className = 'dispBlock';
                document.getElementById('newTextBoxes').appendChild(newTxtbox);
            }
            function addItemsToForm(){
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                while(txtBoxesO.length > 0){
                    document.getElementById('addedItems').appendChild(txtBoxesO[0].parentNode.removeChild(txtBoxesO[0]));
                    txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                }
            }
            window.onload=function(){
                document.getElementById('addButton').onclick=addTextbox;
                document.getElementById('btnSubmit').onclick=addItemsToForm;
            }
        </script>
    </head>
    <body>
        <p id="header">To Do List</p>
        <div id="inputBoxes">
            <div id="newTextBoxes">
                <input type="text" name="add[]" id="addTextBox" />
            </div>
            <div id="addBtnContainer">
                <input type="button" value="+" id="addButton" />
            </div>
        </div>
        <div id="list" class="list">
            <form id="todoListForm" action="#" method="get">
                <div id="item" class="item">
                    <input type="button" value="Add Items" id="btnSubmit">
                    <div class="listitems">
                        <p id="addedItemsTitle">Added Items</p>
                        <hr />
                        <div id="addedItems"></div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
This almost works except when the Add Items button is clicked, the textfield itself is moved but I want the data to be moved on its own.

AndrewGSW 05-15-2011 12:34 AM
Try this :)
Code:
function addItemsToForm(){
    var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
    for (var i=0, j=txtBoxesO.length; i < j;  i++){
        var newTxt = txtBoxesO[i].cloneNode(true);
        newTxt.id = '';                    // ids must be unique, so delete it
        newTxt.className = 'dispBlock';    // cloning loses the class name
        document.getElementById('addedItems').appendChild(newTxt);
    }
}

bullant 05-15-2011 12:40 AM
Quote:
Originally Posted by roher4 (Post 1090650)
This almost works except when the Add Items button is clicked, the textfield itself is moved but I want the data to be moved on its own.
It works as intended in that the original inputs are moved and not copied to the form.

If you want to copy them, then all you need to do is clone the original inputs and append them to the appropriate element in the form. In this case the while loop would need to be a for loop and you'll need a couple of other minor tweaks as well.

If you want to copy just the values of the original inputs you can get them from the inputs value property.

You will also need to delete any existing contents in 'addedItems' before appending any new items otherwise you will get duplicate data if you create new items after already adding some.

bullant 05-15-2011 01:34 AM
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>To-do List</title>
        <style type="text/css">
            .dispBlock {
                display: block;
            }
            #newTextBoxes {
                width: 200px;
                float: left;
            }
            #addBtnContainer {
                width: 50px;
                float: left;
            }
            #list {
                clear: both;
            }
        </style>
        <script type="text/javascript">
            function addTextbox(){
                var newTxtbox = document.createElement('input');
                newTxtbox.setAttribute('type','text');
                newTxtbox.setAttribute('name','add[]');
                newTxtbox.className = 'dispBlock';
                document.getElementById('newTextBoxes').appendChild(newTxtbox);
            }
            function addItemsToForm(){
                deleteAddedItems();
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                for(i=0; i < txtBoxesO.length; i++){
                    document.getElementById('addedItems').appendChild(txtBoxesO[i].cloneNode(true));
                }
            }
            function deleteAddedItems(){
                var addedItemsO = document.getElementById('addedItems').childNodes;
                for(i=addedItemsO.length-1; i >= 0; i--){
                    addedItemsO[i].parentNode.removeChild(addedItemsO[i]);
                }
            }
            window.onload=function(){
                document.getElementById('addButton').onclick=addTextbox;
                document.getElementById('btnSubmit').onclick=addItemsToForm;
            }
        </script>
    </head>
    <body>
        <p id="header">To Do List</p>
        <div id="inputBoxes">
            <div id="newTextBoxes">
                <input type="text" name="add[]" id="addTextBox" />
            </div>
            <div id="addBtnContainer">
                <input type="button" value="+" id="addButton" />
            </div>
        </div>
        <div id="list" class="list">
            <form id="todoListForm" action="#" method="get">
                <div id="item" class="item">
                    <input type="button" value="Add Items" id="btnSubmit">
                    <div class="listitems">
                        <p id="addedItemsTitle">Added Items</p>
                        <hr />
                        <div id="addedItems"></div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

AndrewGSW 05-15-2011 03:39 AM
I quite like
Code:
var addedBefore = document.getElementById('addedItems');
while (addedBefore.firstChild) {
    addedBefore.removeChild(addedBefore.firstChild);
   
}
but there are a few ways to do this :) :thumbsup:

bullant 05-15-2011 03:52 AM
yep, that's even more efficient :thumbsup:

If I remembered firstChild I would have used it myself :)

roher4 05-15-2011 07:01 PM
See below.

roher4 05-15-2011 07:18 PM
Quote:
Originally Posted by bullant (Post 1090672)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>To-do List</title>
        <style type="text/css">
            .dispBlock {
                display: block;
            }
            #newTextBoxes {
                width: 200px;
                float: left;
            }
            #addBtnContainer {
                width: 50px;
                float: left;
            }
            #list {
                clear: both;
            }
        </style>
        <script type="text/javascript">
            function addTextbox(){
                var newTxtbox = document.createElement('input');
                newTxtbox.setAttribute('type','text');
                newTxtbox.setAttribute('name','add[]');
                newTxtbox.className = 'dispBlock';
                document.getElementById('newTextBoxes').appendChild(newTxtbox);
            }
            function addItemsToForm(){
                deleteAddedItems();
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                for(i=0; i < txtBoxesO.length; i++){
                    document.getElementById('addedItems').appendChild(txtBoxesO[i].cloneNode(true));
                }
            }
            function deleteAddedItems(){
                var addedItemsO = document.getElementById('addedItems').childNodes;
                for(i=addedItemsO.length-1; i >= 0; i--){
                    addedItemsO[i].parentNode.removeChild(addedItemsO[i]);
                }
            }
            window.onload=function(){
                document.getElementById('addButton').onclick=addTextbox;
                document.getElementById('btnSubmit').onclick=addItemsToForm;
            }
        </script>
    </head>
    <body>
        <p id="header">To Do List</p>
        <div id="inputBoxes">
            <div id="newTextBoxes">
                <input type="text" name="add[]" id="addTextBox" />
            </div>
            <div id="addBtnContainer">
                <input type="button" value="+" id="addButton" />
            </div>
        </div>
        <div id="list" class="list">
            <form id="todoListForm" action="#" method="get">
                <div id="item" class="item">
                    <input type="button" value="Add Items" id="btnSubmit">
                    <div class="listitems">
                        <p id="addedItemsTitle">Added Items</p>
                        <hr />
                        <div id="addedItems"></div>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
This helps a lot, but I don't want to clone the text box but rather the text itself. I think I'm close. Thanks anyways.

AndrewGSW 05-15-2011 08:33 PM
Use createElement() to create new inputs and set the 'value' of these inputs to the 'value' of the ones whose text you want to copy.


All times are GMT +1. The time now is 03:48 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.