Home/ Questions/Q 6765695
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T14:44:31+00:00

I just learned about .delegate today, and I know I can be used for

  • 0

I just learned about .delegate today, and I know I can be used for what I want but I’m not sure how I would add it here.

Each line when added needs to me able to use .autocomplete they all use the same data.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('#field1').val("");
$('#field2').val("");
$('#field3').val("");
$('#field4').val("");


$("#field1").autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('#field1').val(ui.item.field1);
                    $('#field2').val(ui.item.field2);
                    $('#field3').val(ui.item.field3);
                    $('#field4').val(ui.item.field4);

                }
            });
     }); 

</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td>
    <td><input name="field2" type="text" id="field2" size="15"></td>
    <td><input name="field3" type="text" id="field3" size="15"></td>
    <td><input name="field4" type="text" id="field4" size="15"></td>
    <td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td><td><input name="field2" type="text" id="field2" size="15"></td><td><input name="field3" type="text" id="field3" size="15"></td><td><input name="field4" type="text" id="field4" size="15"></td><td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

Working 1/2 wayish. Not I can use the .autocomplete again but its not right. I populates all the fields again.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('.field1').val(ui.item.field1);
                    $('.field2').val(ui.item.field2);
                    $('.field3').val(ui.item.field3);
                    $('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input class="field1" type="text" size="15" tabindex="1"></td><td><input class="field2" type="text" size="15"></td><td><input class="field3" type="text" size="15"></td><td><input class="field4" type="text" size="15"></td><td><input class="qty"    type="text" size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

WORKING EXAMPLE!

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $(this).closest('tr').find('.field1').val(ui.item.field1);
                    $(this).closest('tr').find('.field2').val(ui.item.field2);
                    $(this).closest('tr').find('.field3').val(ui.item.field3);
                    $(this).closest('tr').find('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"> <tr>    <td><input class="field1" type="text" size="15" tabindex="1"></td>    <td><input class="field2" type="text" size="15"></td>    <td><input class="field3" type="text" size="15"></td>    <td><input class="field4" type="text" size="15"></td>    <td><input class="qty"    type="text" size="15" tabindex="2"></td>    <td><button class="removeLine">Delete</button></td>  </tr></table>');
    });

</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming the fields have a class of “field”, something like this should work.

    $("body").delegate(".field:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete(options);
});

    Edit: I didn’t realize that there was more to the code, so i didn’t see the html below. Thank roselan for pointing that out. The duplicate ID issue will definitly be a problem, but the delegate code I posted should be a good starting point to figure out how to dynamically apply a plugin to an element that gets added with ajax. After that you just have to overcome the duplicate id issue.

    Edit in response to comment:

    This line and similar lines

    $('.field1').val(ui.item.field1);

    needs to be

    $(this).closest('tr').find('.field1').val(ui.item.field1);
$(this).closest('tr').find('.field2').val(ui.item.field2);
$(this).closest('tr').find('.field3').val(ui.item.field3);
$(this).closest('tr').find('.field4').val(ui.item.field4);

    Edit: Adding some optimization:

    var $tr = $(this).closest('tr');
$tr.find('.field1').val(ui.item.field1);
$tr.find('.field2').val(ui.item.field2);
$tr.find('.field3').val(ui.item.field3);
$tr.find('.field4').val(ui.item.field4);
    • 0