tjyoung
asked on
Problem initializing text inputs for jquery typeahead when they are dynamically created
Hi,
I have a form that allow the user to add additional fields/rows prior to submitting (one row per vehicle being entered).
The additional rows are dynamically created since I have no way of knowing in advance the amount of rows required.
On the Stock Number text input I'm trying to use jquery typeahead to hint the available stock numbers to choose from based on the users first couple digits. Can be a few hundred so simple dropdown etc. won't work.
My problem is each row entered dynamically for the second or third car to enter etc., its 'Stock#' input field doesn't work with typeahead. I'm guessing since the dynamic ones aren't already in the DOM, they aren't initialized and therefore won't work like my first one. I'm guessing?
So my question is, is there a way to initialize it each time the + button is clicked?
Below is my code that a user would click to add the additional rows:
I have a form that allow the user to add additional fields/rows prior to submitting (one row per vehicle being entered).
The additional rows are dynamically created since I have no way of knowing in advance the amount of rows required.
On the Stock Number text input I'm trying to use jquery typeahead to hint the available stock numbers to choose from based on the users first couple digits. Can be a few hundred so simple dropdown etc. won't work.
My problem is each row entered dynamically for the second or third car to enter etc., its 'Stock#' input field doesn't work with typeahead. I'm guessing since the dynamic ones aren't already in the DOM, they aren't initialized and therefore won't work like my first one. I'm guessing?
So my question is, is there a way to initialize it each time the + button is clicked?
Below is my code that a user would click to add the additional rows:
.on('click', '.addButton', function() {
var $template = $('#optionTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.insertBefore($template),
$option = $clone.find('[name="vehicle_type[]"]');
$option2 = $clone.find('[name="vehicle[]"]');
$option3 = $clone.find('[name="buyer[]"]');
$option4 = $clone.find('[name="sales_rep[]"]');
$option5 = $clone.find('[name="delivery_date[]"]');
})
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
$option = $row.find('[name="vehicle_type[]"]');
$row.remove();
})
Typeaheads relevant code: $.typeahead({
input: '.stockno',
minLength: 2,
order: "asc",
offset: true,
hint: true,
source: {
stock_number: {
ajax: {
type: "GET",
url: "/dealboxx/dvr/stocknumbers"
}
}
},
callback: {
onClick: function (node, a, item, event) {
console.log(node)
console.log(a)
console.log(item)
console.log(event)
console.log('onClick function triggered');
},
onSubmit: function (node, form, item, event) {
console.log(node)
console.log(form)
console.log(item)
console.log(event)
console.log('onSubmit override function triggered');
}
}
});
Sample of html $template<div class="form-group hide" id="optionTemplate">
<div class="col-md-1">
<select class="form-control" width="100%" name="vehicle_type[]">
<option value="" disabled selected hidden>N/U</option>
<option value="0">New</option>
<option value="1">Used</option>
</select>
</div>
<div class="col-md-2">
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input style="color:#999999;" type="text" class="stockno" name="stock_number[]" placeholder="Stock#" autocomplete="off" type="search">
</span>
<span class="typeahead__button">
<button type="submit">
<i class="typeahead__search-icon"></i>
</button>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<input type="text" name="vehicle[]" class="form-control" placeholder="Vehicle">
</div>
<div class="col-md-2">
<input type="text" name="buyer_name[]" class="form-control" placeholder="Buyer Name">
</div>
<div class="col-md-2">
<select class="form-control" name="sales_rep_id[]">
<option value="" disabled selected hidden>Rep</option>
<?php for ($i=0; $i < sizeof($employees); $i++){ echo '<option style="color:black;" value="'.$employees[$i]->id.'">'.$employees[$i]->employee.'</option>'."\n"; } ?>
</select>
</div>
<div class="col-md-2">
<select class="form-control" width="100%" name="delivery_date[]">
<option value="" disabled selected hidden>Delivery Date</option>
<?php for($i=0;$i<=11;$i++){ $month=date( 'F\, Y ',strtotime( "first day of +$i month")); $fullmonth=date( 'Y-m-d',strtotime( "last day of +$i month")); echo '<option value="'.$fullmonth. '">'.$month. '</option>'; }?>
</select>
</div>
<div class="col-md-1">
<div class="input-group">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
</div>
<div class="col-md-12 p-20">
<div class="text-right">
<button type="submit" name="submitButton" class="btn btn-success">Add to Pending</button>
</div>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That was spot on. thank you very much!
ASKER
I tried Julian's but was getting the error that the variable was missing.
Open in new window