Hi team , i using the widget on record producer in from that code i'm calling event and in onload script i'm setting the values but not setting thevalues getting java script error at the time of loading the record producer.
How can i resolve the issue giving my widget client controller script and onlaod script coode please help me to resolve the issue .
thanks for your time and support .
html code :
<div class="search-widget">
<div class="form-group search-container">
<input type="text"
class="form-control"
placeholder="Start typing the address..."
ng-model="c.searchText"
ng-change="c.onSearchChange()"
ng-keydown="c.handleKeyDown($event)" />
<!-- Spinner -->
<span class="search-icon" ng-if="c.isLoading">
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
<!-- Dropdown -->
<ul class="dropdown-list" ng-if="c.locations.length > 0">
<li ng-repeat="loc in c.locations track by $index"
ng-click="c.selectLocation(loc)"
ng-class="{'active': $index === c.selectedIndex}">
<span ng-bind-html="c.highlightMatch(loc.name)"></span>
</li>
</ul>
<!-- No results -->
<div class="no-results" ng-if="c.noResults">
Address not found
</div>
</div>
Client controller script :
api.controller = function($scope, $rootScope, spUtil) {
/* widget controller */
var c = this;
c.searchText = '';
c.locations = [];
c.noResults = false;
c.selectedIndex = -1;
c.isLoading = false;
var debounceTimer;
var MIN_CHARS = 2;
function getGForm(scope) {
while (scope) {
if (scope.g_form) return scope.g_form;
scope = scope.$parent;
}
return null;
}
c.onSearchChange = function() {
if (debounceTimer) {
clearTimeout(debounceTimer);
}
if (!c.searchText || c.searchText.length < MIN_CHARS) {
c.locations = [];
c.noResults = false;
c.selectedIndex = -1;
c.isLoading = false;
return;
}
debounceTimer = setTimeout(function() {
c.isLoading = true; // START LOADING
c.server.get({
searchText: c.searchText
}).then(function(response) {
c.locations = response.data.locations;
c.noResults = (c.locations.length === 0);
c.selectedIndex = -1;
}).finally(function() {
c.isLoading = false; // STOP LOADING
});
}, 300);
};
c.handleKeyDown = function(event) {
if (c.locations.length === 0) return;
if (event.key === 'ArrowDown') {
event.preventDefault();
c.selectedIndex = (c.selectedIndex + 1) % c.locations.length;
} else if (event.key === 'ArrowUp') {
event.preventDefault();
c.selectedIndex = (c.selectedIndex - 1 + c.locations.length) % c.locations.length;
} else if (event.key === 'Enter') {
event.preventDefault();
if (c.selectedIndex >= 0) {
c.selectLocation(c.locations[c.selectedIndex]);
}
}
};
c.selectLocation = function(location) {
alert("You selected: " + location.name);
alert("Response is " + location);
alert(JSON.stringify(location.raw));
var event;
try {
event = new CustomEvent('address.selected', {
detail: location.raw
});
} catch (e) {
event = document.createEvent('CustomEvent');
event.initCustomEvent('address.selected', true, true, location.raw);
}
window.dispatchEvent(event);
// Update UI after selection
c.searchText = location.name || '';
// CLEAR DROPDOWN
c.locations = [];
c.noResults = false;
c.selectedIndex = -1;
};
c.highlightMatch = function(text) {
if (!c.searchText) return text;
var regex = new RegExp('(' + c.searchText + ')', 'gi');
return text.replace(regex, '<strong>$1</strong>');
};
};
Onload client script :
function onLoad() {
// Remove any existing listener first (safe reset)
window.removeEventListener('address.selected', addressHandler);
// Attach fresh listener
window.addEventListener('address.selected', addressHandler);
function addressHandler(event) {
try {
var addr = event.detail;
if (!addr) return;
console.log("Event received:", addr);
g_form.setValue('street_name1', addr.street_address || '');
g_form.setValue('town_city', addr.city || '');
g_form.setValue('postal_code_zip_code', addr.postcode || '');
g_form.setValue('supplier_country', addr.country || '');
} catch (e) {
console.log("Error setting values:", e);
}
}
}
