0

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'):"";
            }
        });
     }

    }
james Oduro
  • 673
  • 1
  • 6
  • 22

0 Answers0