Submit.click JQuery event not working

Question

I try searching and using few tricks which you already posted here, but none of it worked. I hit the wall with my creative thinking and ideas what is wrong. I have a modal form, which opens, I wanted to be able after I click on submit button to hide the modal, collect the field values and opens up a chat interface. Here is the code:

      $('#confirmation-button').click(function(){


      let firstName = $('#first-name').val();
      let lastName = $('#last-name').val();
      let firstName = $('#email').val();
      let firstName = $('#registration-number').val();


    let chatConfig = {
  "webchatAppUrl": "https://apps.mypurecloud.ie/webchat",
  "webchatServiceUrl": "https://realtime.mypurecloud.ie:443",
  "orgId": "8410",
  "orgName": "fjellinjenas",
  "queueName": "Chat",
  "logLevel": "DEBUG",
  "locale": "",
  "data": {
    "firstName": firstName,
    "lastName": lastName,
    "addressStreet": "",
    "addressCity": "",
    "addressPostalCode": "",
    "addressState": "",
    "phoneNumber": ""
  },
  "companyLogo": {
    "width": 600,
    "height": 149,
    "url": "http://i65.tinypic.com/2hr1ytg.jpg"
  },
  "companyLogoSmall": {
    "width": 25,
    "height": 25,
    "url": "http://i68.tinypic.com/2m3gto6.jpg"
  },
  "agentAvatar": {
    "width": 462,
    "height": 462,
    "url": "http://i67.tinypic.com/1eqted.png"
  },
  "welcomeMessage": "Du snakker med kundebehandler.",
  "cssClass": "webchat-frame",
  "css": {
    "width": "100%",
    "height": "100%",
    "display": "block",
    "left": "90%",

  }
};
});

ININ.webchat.create(chatConfig, function(err, webchat) {
    if (err) {
        console.error(err);
        throw err;
    }
    webchat.renderPopup({
        width: 400,
        height: 400,
        title: 'Chat'
  });

});

I am a Junior developer, and I am apologising in advance If made some beginners mistake, or something similar, I am still in development phase :)

Thank you in advance.

Cheers.

Answer 1

By looking at your code what I can figure out is you want to hit 'create' function as soon as your 'chatConfig' is ready.

Since you are not able to open chat window you are assuming the click event is not triggering but that is not the case. I think you have missed to trigger the 'create' function of your webchat plugin.

Since, you want to trigger it on button click.

Put your create method inside callback of click function.

$('#confirmation-button').click(function(){


    let firstName = $('#first-name').val();
    let lastName = $('#last-name').val();
    let firstName = $('#email').val();
    let firstName = $('#registration-number').val();


    let chatConfig = {
        "webchatAppUrl": "https://apps.mypurecloud.ie/webchat",
        "webchatServiceUrl": "https://realtime.mypurecloud.ie:443",
        "orgId": "8410",
        "orgName": "fjellinjenas",
        "queueName": "Chat",
        "logLevel": "DEBUG",
        "locale": "",
        "data": {
            "firstName": firstName,
            "lastName": lastName,
            "addressStreet": "",
            "addressCity": "",
            "addressPostalCode": "",
            "addressState": "",
            "phoneNumber": ""
        },

        "companyLogo": {
            "width": 600,
            "height": 149,
            "url": "http://i65.tinypic.com/2hr1ytg.jpg"
        },

        "companyLogoSmall": {
            "width": 25,
            "height": 25,
            "url": "http://i68.tinypic.com/2m3gto6.jpg"
        },
        "agentAvatar": {
            "width": 462,
            "height": 462,
            "url": "http://i67.tinypic.com/1eqted.png"
        },
        "welcomeMessage": "Du snakker med kundebehandler.",
        "cssClass": "webchat-frame",
        "css": {
            "width": "100%",
            "height": "100%",
            "display": "block",
            "left": "90%",
        }
    };

    ININ.webchat.create(chatConfig, function(err, webchat) {
        if (err) {
            console.error(err);
            throw err;
        }
        webchat.renderPopup({
            width: 400,
            height: 400,
            title: 'Chat'
        });
    });    
});