Apex Code Development You need to sign in to do that
Don't have an account?
Bernice Botes <ui:inputText> sorry to interrupt error
Good morning everyone,
I am a novice at Salesforce, so please bare with me. I know that this question has been asked before. However none of the previouse users seem to have a map included in there component so I am wondering if the map is what is causing my problem.
Here is my scenerio:
I have a leaflet map with pins on it. When the user has clicked on the map two times, saving two sets of coordinates into the custom objects fields, it opens a new component in which the user now has the ability to name this new path. I am using events to trigger update of the object.
Solutions I've played with.
When I use a normal <input> I am able to complete the action of typing in the name however the name is not being saved to the customObject. But when I use the <ui:inputText> the moment I press the field I get the "sorry to interrupt error" in the stack trace it reference the leaflet resources. I think this can't be a problem as other people are also getting same error.
Having no event and simply passing the values between the components by means of attributes
If you could just point me in the right direction, it would be much appreciated.
//Map component
<aura:component >
<aura:attribute name="map" type="object"/>
<aura:attribute name="addPath" type="boolean" default="false"/>
<aura:attribute name="newPath" type="TrackerPath__c"
default="{'sObjectType':'TrackerPath__c',
'PathName__c': 'Path Name',
'TrackerPath_StartPoint__c':'',
'TrackerPath_EndPoint__c':''}"
access="public"/>
<aura:attribute name="startPoint" type="Object"/>
<aura:attribute name="endPoint" type="Object"/>
<aura:registerEvent name="fmeNewFormEvent" type="c:FmeNewPathEvent"/>
<aura:handler event="c:FmeMapPinsEvent" action="{!c.fmeMapPinsEvent}"/>
<ltng:require styles="/resource/leaflet/leaflet.css"
scripts="/resource/leaflet/leaflet.js"
afterScriptsLoaded="{!c.jsLoaded}"/>
<div id="map" style="height: -webkit-fill-available; width: -webkit-fil-available;">
<c:FmePathForm newPath="{!v.newPath}" addPath="{!v.addPath}"/>
</div><!--End of MAP-->
</aura:component>
//mapcomponent controller
({
jsLoaded: function(component, event, helper) {
var map = L.map('map', {zoomControl: true}).setView([-25.781693, 28.277831], 14);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri'
}).addTo(map);
component.set("v.map", map);
var coordinates = new Array();
map.on('click', function(e){
//bind a new object to the array and display
coordinates.push(e.latlng);
helper.showCoordinates(map, e);
//if there is two coordinates show form to add a new path
if(!coordinates.isNaN && coordinates.length == 2){
helper.setNewPath(component, coordinates, event);
coordinates.length = 0;
}
});
},
fmeMapPinsEvent : function(component, event, helper){
var map = component.get('v.map');
var coordinates = event.getParam('coordinates');
if(coordinates !== 'undefined'){
for(var i = 0; i < coordinates.length; i++){
var coordinate = coordinates[i];
console.log('Pass: fmeMapPinsEvent\n' + 'coordinate:'+ coordinate);
var latlng = ([coordinate.TrackerCoordinate_Location__Latitude__s, coordinate.TrackerCoordinate_Location__Longitude__s]);
var popupContent = '<form>'
+'<div class="form-group" >'
+'<h4 align="center">'+ "Elephant Details" + '<h4>'
+'<h5>' + coordinate.Name +'<h5>'
+'<label><strong>' + "Id"+ '</strong></label>'
+'<br/>'
+'<p>'+coordinate.TrackerCoordinate_ObjectName__c+'</p>'
+'<label><strong>'+ "Coordinates"+'</strong></label>'
+'<br/>'
+'<p>'+ coordinate.TrackerCoordinate_Location__Latitude__s + ' ; '+ coordinate.TrackerCoordinate_Location__Longitude__s+'</p>'
+'<label><strong>' +"Address"+'</strong></label>'
+'<br/>'
+'<p>' +coordinate.TrackerCoordinate_Address__c+'</p>'
+'<label><strong>'+ "Time"+'</strong></label>'
+'<br/>'
+'<p>'+coordinate.TrackerCoordinate_Timestamp__c+'</p>'
+'</div>'
+'</form>';
L.marker(latlng, {coordinate: coordinate}).addTo(map).bindPopup(popupContent);
}
}
else{
console.log('Fail: fmeMapPinsEvent\n' + 'coordinates:'+ coordinates);
}
},
closePopup : function(component, event, helper){
component.set("v.addPath", false);
},
Save: function(component, event, helper){
var name = component.find("pathName");
var value = name.get("v.value");
console.log(name);
},
})
//helper
({
showCoordinates: function(map, e){
var popup = L.popup().setLatLng(e.latlng).setContent('<div>' + e.latlng+ '</div>').openOn(map);
},
setNewPath: function(component, coordinates, event){
component.set("v.newPath.TrackerPath_StartPoint__c", coordinates[0]);
component.set("v.newPath.TrackerPath_EndPoint__c", coordinates[1]);
component.set("v.newPath.PathName__c", "Path Name");
component.set("v.addPath", true);
}
})
//PathComponent
<aura:component controller="FmePathController">
<aura:attribute name="newPath" type="TrackerPath__c"
default="{'sObjectType':'TrackerPath__c',
'PathName__c': 'Path Name',
'TrackerPath_StartPoint__c':'',
'TrackerPath_EndPoint__c':''}"
access="public"/>
<aura:attribute name="addPath" type="Boolean" default="false"/>
<aura:attribute name="saved" type="Boolean" default="false"/>
<aura:handler event="c:FmeNewPathEvent" action="{!c.fmeNewPathEvent}"/>
<aura:if isTrue="{!v.addPath}">
<div role="dialog" tabindex="-1" aria-labelledby="header" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!--POPUP HEADER-->
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon--inverse" title="Close" onclick="{!c.closePopup}">X
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header" class="slds-text-heading--medium">Add new path</h2>
</div>
<!--/POPUP HEADER-->
<!--POPUP BODY-->
<div class="slds-modal__content slds-p-around--medium">
<form class="slds-form--horizontal slds-form--stacked">
<div class="slds-form-element">
<span class="slds-form-element__label">Path Name</span>
<div class="slds-form-element__control slds-border">
<ui:inputText aura:id="name" label="Path Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newPath.PathName__c}"
required="true" /> </div>
</div>
<div class="slds-form-element">
<span class="slds-form-element__label">StartPoint</span>
<div class="slds-form-element__control slds-border">
<input aura:id="startPoint" label="StartPoint"
class="slds-input"
labelClass="slds-form-element__label"
value = "{!v.newPath.TrackerPath_StartPoint__c}"
required="true"/>
</div>
</div>
<div class="slds-form-element">
<span class="slds-form-element__label">Destination Point</span>
<div class="slds-form-element__control slds-border">
<input aura:id="endPoint" label="Destination Point"
class="slds-input"
labelClass="slds-form-element__label"
value = "{!v.newPath.TrackerPath_EndPoint__c}"
required="true"/>
</div>
</div>
</form>
</div>
<!--/POPUP BODY-->
<!--FOOTER-->
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral" onclick="{!c.closePopup}">Cancel</button>
<button class="slds-button slds-button--brand" onclick="{!c.savePath}">Save</button>
</div>
<!--/FOOTER-->
</div>
</div>
</aura:if>
<!--/EVENT HANDLERS-->
<!--/VARIABLES/EVENTS-->
<!--VISUAL CONTENT-->
<!--/VISUAL CONTENT-->
</aura:component>
//controller
({
fmeNewPathEvent: function(component, event, helper){
console.log("doInit");
var tempObject = event.getParams("newPath");
console.log(tempObject);
component.set("v.newPath", tempObject);
},
closePopup : function(component, event, helper){
component.set("v.addPath", false);
},
savePath : function(component, event, helper)
{
var name = component.find("pathName");
var value = name.get("v.value");
console.log(value);
console.log(component.get("v.newPath"));
}
})
<c:FmePathForm> was between the two <div> of the map component making it a child. Taking it out solved the problem of the "sorry to interrupt" problem now just to get it to save.
Thank you though.