During page initialization, selectpage can load data when I click on the goods type input box.
But when I clicked to add the recipient on the same page, the selectpage component event that appended the same element suddenly disappeared, and the data could no longer be loaded, as shown in the figure:
Here are the main solutions:
Find the corresponding JS file and add the following binding event in the corresponding event method
$(document).on("click", "#add-form #add-group", function (e, obj) {
//Event binding and component rendering
Form.events.selectpage(obj);
});
It uses the $(document).on() function to listen for an event named “click”. When this event is triggered, the operations within the function will be performed.
Specifically, this code listens for click events on the #add-group element within the #add-form element. When the #add-group element is clicked, the “click” event will be triggered, and then the function Form.events.selectpage(obj) will be executed.
If you want to modify this code, you can change the event name, selector, or the actions performed after the event is triggered according to your needs.
The modified effect is achieved and the data can be loaded!
The relevant code is as follows:
<a class="btn btn-success" id="add-group">Add recipient</a>
<div id="delivery-group-container" class="flex-container">
<!-- Initial delivery method 1 and cargo information group -->
<div class="delivery-group">
<!-- Receipt method - form element -->
<h2 class="shouhuo">Consignee 1</h2>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Consignee')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-receiver" name="row[receiver][]" type="text" value="">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Phone')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-receiver_telephone" name="row[receiver_telephone][]" type="text">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-6">{:__('Shipping address')}:</label>
<div class="col-xs-12 col-sm-8">
<input data-toggle="city-picker" class="form-control c-delivery_address" name="row[delivery_address][]" type="text">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Detailed delivery address')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-delivery_address_detail" name="row[delivery_detail_address][]" type="text">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Company name')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-receiver_company" name="row[receiver_company][]" type="text">
</div>
</div>
<!-- Cargo information form elements -->
<h2>Cargo information</h2>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Cargo Type')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control selectpage c-goods_type" data-primary-key="goods_type" data-source="goods_type/index" name="row[goods_type][]" type ="text" data-field="goods_type">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Goods name')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-goods_name" name="row[goods_name][]" type="text">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Weight (Kg)')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-weight" name="row[weight][]" type="number">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Volume (m3)')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-volume" name="row[volume][]" type="text">
</div>
</div>
<div class="form-group formgroup">
<label class="control-label col-xs-12 col-sm-2">{:__('Total number of pieces')}:</label>
<div class="col-xs-6 col-sm-4">
<input class="form-control c-num" name="row[num][]" type="number">
</div>
</div>
</div>
</div>
<script>
$(function () {
getVehiclePricing();
var deliveryCount = 1;
var deliveryValue = '';
//Add new shipping address element
var newDeliveryAddress = '<div class="form-group formgroup">' +
'<label class="control-label col-xs-12 col-sm-6">{:__("Shipping address")}:</label>' +
'<div class="col-xs-12 col-sm-8">' +
'<input data-toggle="city-picker" class="form-control c-delivery_address" name="row[delivery_address][]" type="text">' +
'</div>' +
'</div>';
//Add button click event
$('#add-group').click(function () {
deliveryCount + + ;
switch (deliveryCount) {
case 2: deliveryValue = '二';break;
case 3: deliveryValue = '三';break;
case 4: deliveryValue = '四';break;
case 5: deliveryValue = '五';break;
}
var clonedGroup = $('.delivery-group:first').clone();
// Remove the shipping address from the copied element
clonedGroup.find('input[data-toggle="city-picker"]').parents('div.form-group').remove();
// Remove the city selector initialization code in the original component
//clonedGroup.find('input[data-toggle="city-picker"]').removeAttr('data-toggle');
//clonedGroup.find('input[data-toggle="city-picker"]').hide();
// Clear the contents of the input box
clonedGroup.find('input[type="text"], input[type="number"]').val('');
clonedGroup.find('.shouhuo').text('receiver' + deliveryValue);
//Add new element after finding the second element
clonedGroup.find('.form-group').eq(1).after(newDeliveryAddress);
// Manually initialize the city selector
clonedGroup.find('input[data-toggle="city-picker"]').citypicker();
var deleteButton = $('<button class="delete-group btn-danger">Delete</button>');
clonedGroup.append(deleteButton);
$('#delivery-group-container').append(clonedGroup);
});
//Delete button click event (using event delegate)
$('#delivery-group-container').on('click', '.delete-group', function () {
$(this).closest('.delivery-group').remove();
deliveryCount--;
});
}
</script>