?
Solved

Jquery adding and removing rows

Posted on 2009-12-26
8
Medium Priority
?
578 Views
Last Modified: 2012-05-08
Hi -

I am trying to add and remove rows with jquery. Using the code below:

The row adds ok but when I click "Remove" nothing happens (row is not removed) ...

If I change:
 $(id).remove();
to alert(id)

I get a popup...
function(event, queueID, fileObj, response, data) {
            var id = queueID
            $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
            }

function removeFormField(id) {
        $(id).remove();
    }


<div id="filesUploaded"></div>

Open in new window

0
Comment
Question by:doctor069
  • 5
  • 3
8 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 26126065
Hello doctor069,

The following code work for me :




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
	$(document).ready(function(){
		id = "1";
		$("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
		id = "2";
		$("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
	});
	function removeFormField(id) {
        $(id).remove();
    }
</script>
</head>
<body >
<div id="filesUploaded"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:doctor069
ID: 26126084
hmm...

the only difference I see is the you are adding the row from a "load" and I am adding from a "click" ?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 26126095
Could you post your code ?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:doctor069
ID: 26126103
The full code is as follows:

I am using uploadify to upload images. At the end (onComplete:) it runs the function. The row adds successfully but when I click "Remove" it does nothing.

If I use   function removeFormField(id) {
        alert(id)
    }

I do get a popup with the proper id

Thanks for helping
 function InitUploadForProductImages() {
        $('#fileInput').uploadify({
            'uploader': '<%= ResolveURL("~/uploadify.swf")%>',
            'script': '<%= ResolveURL("~ProductPhotoUpload.ashx")%>',
            'cancelImg': '<%= ResolveClientURL("~//images/cancel.png")%>',
            'auto': true,
            'folder': '/<%=FolderName %>',
            'buttonText': 'Upload Files',
            'multi': 'true',
            'buttonImg': '/images/btnUploadImages.png',
            'width': '155',
            'height': '28',
            onSelect: function() {
                globalFileUploaded = true;
            },
            onComplete: function(event, queueID, fileObj, response, data) {
            var id = queueID
            $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
           }
        });
    }

    function removeFormField(id) {
        $(id).remove();
    }

Open in new window

0
 

Author Comment

by:doctor069
ID: 26126142
Even tried the code below. Add fine but will not remove. My guess is that it is a id issue. Just not sure how to troubleshoot
  function test() {
        var id = 1
        $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
    }

    function removeFormField(id) {
        alert(id)
        $(id).remove();
        alert('done')
    }


<input id="Button1" type="button" value="button" onclick="test();" />

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 26126149
Try the following and you found your issue :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
  function test() {
        var id = 1
        $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
    }

    function removeFormField(id) {
        alert(id)
        $(id).remove();
        alert('done')
    }
</script>
</head>
<body >
<div id="filesUploaded"><input id="Button1" type="button" value="button" onclick="test();" /></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:doctor069
ID: 26126151
More comments -

Just tried it in firefox and everything works with no issues. Seems to be a IE 8 issue.
Any sugestions would be appreciated
0
 

Accepted Solution

by:
doctor069 earned 0 total points
ID: 26126182
Ok got it!

Seems the IE was not liking some of the html I was injecting:

<label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'>

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
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 Month17 days, 11 hours left to enroll

830 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