I want to make dynamic menu options on (post, likes, comment..etc). When a user requests a menu list, I send a request to the server and the server brings a list of options as a menu in JSON format.
now, after looping over the data and adding it to the DOM, I then want to bind functions(method) to each of the data returned.
I've defined these functions (methods) in JS Class (JOActions);
How do I call a method from Class JOActions assuming I have the method name as a string from the server?
I tried using the bracket notation but it keeps outputting undefined and using the dot notation will mean something different to the class object.
What am I doing wrong?
EXAMPLE OF DATA RETURNED FROM SERVER IN JSON:
{
"data": {
"elements": [
{
"action": {
"origin": "trigger_upload_profile_photo",
"__method": "triggerUploadProfilePhoto"
},
"subtext": false,
"objectUrl": false,
"icon": "icon-fs ionicons ion-ios-upload-outline",
"text": "Upload Photo"
},
{
"action": {
"origin": "trigger_view_profile_photo",
"__method": "triggerViewProfilePhoto"
},
"subtext": false,
"objectUrl": "http://localhost/joacmedia/photo/1620828143/2ad62da9188d25ce491980626d243419",
"icon": "icon-fs ionicons ion-image",
"text": "View Profile Picture"
},
{
"action": {
"origin": "trigger_share_profile_photo",
"__method": "triggerShareProfilePhoto"
},
"subtext": false,
"objectUrl": "http://localhost/joacmedia/photo/1620828143/2ad62da9188d25ce491980626d243419",
"TargetObjectData": {
"id": "47",
"url": "https://res.cloudinary.com/joacmedia/image/upload/v1620828143/posts/ZPwxEoIO8EyE0BYPAxlzjoocUaWhw.jpg",
"version_id": "a8a1035e333fc5d55e870c53da1c53c7"
},
"icon": "icon-fs ionicons ion-android-share",
"text": "Share"
},
{
"action": {
"origin": "trigger_remove_profile_photo",
"__method": "triggerRemoveProfilePhoto"
},
"subtext": false,
"objectUrl": false,
"TargetObjectData": {
"id": "47",
"url": "https://res.cloudinary.com/joacmedia/image/upload/v1620828143/posts/ZPwxEoIO8EyE0BYPAxlzjoocUaWhw.jpg",
"version_id": "a8a1035e333fc5d55e870c53da1c53c7"
},
"icon": "icon-fs ionicons ion-ios-trash-outline",
"text": "Remove"
}
],
"entityData": "{\"id\":\"47\",\"asset_id\":\"2ad62da9188d25ce491980626d243419\",\"i_format\":\"jpg\",\"resource_type\":\"image\",\"url\":\"https:\\/\\/res.cloudinary.com\\/joacmedia\\/image\\/upload\\/v1620828143\\/posts\\/ZPwxEoIO8EyE0BYPAxlzjoocUaWhw.jpg\",\"i_width\":\"250\",\"i_height\":\"250\",\"i_size\":\"96771\",\"version_id\":\"a8a1035e333fc5d55e870c53da1c53c7\",\"version\":\"1620828143\",\"url_address\":\"UL1K5ybQqiEC3xaNKcjFrvEljpeiCL\",\"public_id\":\"posts\\/ZPwxEoIO8EyE0BYPAxlzjoocUaWhw\",\"i_name\":\"ZPwxEoIO8EyE0BYPAxlzjoocUaWhw\",\"i_caption\":\"hello friends, what do you think about my photo?\",\"i_visibility\":\"public\",\"i_group_id\":\"1\",\"is_deleted\":\"0\",\"i_date\":\"1620828143\"}",
"included": []
}
}
LOOP THROUGH DATA RETURNED FROM SERVER AND CALLING A METHOD ON ORIGIN, WHERE ORIGIN IS THE HTML ELEMENT APPENDED TO DOM:
//AJAX CALL
ajax.requestObject({
formData: {type:'profile_photo_menu',request_menu:true,member_data:JSON.stringify({profile_photo:MemberData.profile_photo.status,profile_cover_photo:MemberData.profile_cover_photo.status,url_address:MemberData.url_address,id:MemberData.id,person_name:MemberData.person_name,username:MemberData.username})}
}).then(menuData =>{
if (menuData) {
setTimeout(()=>{
if (menuData.data.elements.length) {
const render = new Renders();
let menuOptions = render.JOmenu(menuData.data.elements);
$origin.data('loaded', true).tooltipster('content', `<div class='tipster_body'>${menuOptions}</div>`);
let Actions = new JOActions();//instantiating the actions class
for(let i=0; i< menuData.data.elements.length;i++){
const optionElement = menuData.data.elements[i],
optionAction = optionElement.action,
optionOrigin = optionAction.origin;
let method = optionAction.__method;
//BIND METHOD ON ORIGIN
//optionOrigin is the class of the element we added to the dom
Actions[method](optionOrigin);
}
$('.trigger_remove_profile_photo').removePhoto({type:'user_profile_photo',origin:$origin});
Actions.hideTipster($origin);
}else{
$origin.tooltipster('destroy');
}
},1000);
}
});
ACTIONS CLASS:
//A class of ACTIONS
export class JOActions
{
triggerUploadProfilePhoto(origin){
$(`.${origin}`).on('click',()=>{
$('input[type="file"]#upload_profile_photo').click();
});
}
triggerViewProfilePhoto(){
//code...
}
triggerShareProfilePhoto(){
//code...
}
triggerRemoveProfilePhoto(){
//code...
}
hideTipster($origin){
//TRICK TOOLTIPSTER TO HIDE
$('.tipster_body').on('click',event => {
const target = $(event.target);
if (target.is('*')) { //a,a span,a i,div, div span
$.tooltipster.instances($origin).length ? $origin.tooltipster('hide'):"";
}
});
}
}