Can I Fetch the data from database and show the result in chatbox

[tv32541]

Hai,

I am new to this Jquery convForm. Also, I am confusing of displaying DB data to the chatbox. can you help me? Inside the form (id = formResult) i have an input like

<input id="InputNumber" data-conv-question="Alright! Can you enter the Inventory number, please.|Okay! Please, enter your Order Number." data-pattern="^[0-9]*$" name="Management" required placeholder="Enter corresponding value " type="number" maxlength="15" data-callback="getinfo">

In this input, I put data callback Function -: getinfo() . So function is below.

` function getinfo() { var number = $('#InputNumber').val();

        $.ajax({
            url: '<%=ResolveUrl("Default.aspx/GetNumberDetails") %>',
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'number': number }),
            success: function (response) {

                  $('#formResult').append('<input type="text" data-conv-question="Your Result is "' + response.d + '"." data-no-answer="true">')

            },
            error: function (response) { alert(response.d); }
        });

    }`

My Code (.cs) below.

[WebMethod]
        public static string GetNumberDetails(string number)
        {
            DataAccess _db = new DataAccess();
            string strResult = _db.GetInputNumberDetails(Convert.ToInt32(number));
            return strResult;

        }

I got the return result back. But how can I show the return result to the Chatbox. I append the result with form but not showing. Is there is any mistake.. Please help.

I am attaching my .aspx file. Test.aspx.zip

[eduardotkoller]

Hello there!

The chat is initialized in the page load and modifying the original form won't do anything because the plugin has already parsed it to create the conversation. To change the questions, you have to use the plugin object.

The callback function is called by the plugin with an argument that is a reference to the plugin object. This object has an attribute named current that is a pointer to the current state in the conversation and, this state has an attribute named next that is a pointer to the next state. I don't know what you want to do with the rest of the conversation after this question, but I will assume you will loop this question for the sake of this example.

Example:

function getinfo(convState) {
var number = $('#InputNumber').val();
    if(number>=0) {
        $.ajax({
            url: '<%=ResolveUrl("Default.aspx/GetNumberDetails") %>',
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'number': number }),
            success: function (response) {
                  var current = convState.current;
                  convState.current.next = convState.newState({
                  type: 'text',
                  questions: ["Your Result is "' + response.d + '"."],
                          noAnswer: true
           });
                   convState.current.next.next = current;
            },
            error: function (response) { alert(response.d); }
        });
    } else {
            convState.current.next = false;
    }
}

This will make the chat repeat your question until you answer with any number < 0.

[tv32541]

Thank you very much, Eduardo...for a quick response and save my day.

I changed the code accordingly and it shows the result in the chatbox. I modified the below line. questions: ["Your Result is "' + response.d + '"."], to questions: ['Your Result is ' + response.d + ''],

But it is repeating like a loop. I want to show the result value and then ask the question like "Do you want to continue?".

[eduardotkoller]

I'm glad it worked!

For it to work like you want, you need to create another state instead of using convState.current.next.next = current. This is what is creating the loop.

Example:

var original = false;
function askAgain(convState) {
      if(convState.current.answer.value == 'yes') {
           convState.current.next = original;
      } else {
           //do nothing, or maybe create a state saying goodbye
      }
}

function getinfo(convState) {
var number = $('#InputNumber').val();
    if(number>=0) {
        $.ajax({
            url: '<%=ResolveUrl("Default.aspx/GetNumberDetails") %>',
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'number': number }),
            success: function (response) {
                  original = convState.current;
                  convState.current.next = convState.newState({
                  type: 'text',
                  questions: ['Your Result is' + response.d +'.'],
                          noAnswer: true
           });
                   convState.current.next.next = convState.newState({
                          type: 'select',
                          questions: ['Do you want to continue?'],
                          answers: [{text: 'Yes', value: 'yes'}, {text: 'No', value: 'no'}],
                          callback: askAgain
                   });
            },
            error: function (response) { alert(response.d); }
        });
    } else {
            convState.current.next = false;
    }
}

I can't test this right now but it should work. Let me know!

[tv32541]

Hi Eduardo, Sorry for the late response. I modified the code like above and did small changes like callback: askAgain to callback: ['askAgain'] and if(convState.current.answer.value = 'yes') to if (convState.current.answer.value === 'yes') and it worked!.

But when I changed your code (askAgain()) like below, the conversation cannot be retained.

`        var original = false;
        function askAgain(convState, ready) {
            if (convState.current.answer.value === 'yes') {
                // convState.current.next = original;
                convState.current.next = convState.newState({
                    type: 'number',
                    questions: ['Alright! Can you enter the Inventory number, please.|Okay! Please, enter your Order Number.'],
                    pattern: ['^[0-9]*$'],
                    callback: ['getinfo']

                });
              }
            else if (convState.current.answer.value === 'no') {
                //do nothing, or maybe create a state saying goodbye
                convState.current.next.next = convState.newState({
                    type: 'text',
                    questions: ['Good bye..Have a nice day.'],
                    noAnswer: true
                });

                setTimeout(ready, Math.random() * 500 + 100);
                convState.current.next = false;
            }
         }`

When I click on "No" it is not showing the corresopnding question . If I clicked "yes" it should show again "Enter the Inventory Number" and callback getinfo().

Can I know what I have to do. ? I am attaching the file with this. Test.aspx.zip

[eduardotkoller]

Hi there,

See the example code in this zip.

I've had to change some things in the source code of the plugin for this to work, so please download the last version to update it in your project.

Let me know if you need more help.

[tv32541]

Hi Eduardo,

Thanks, man! it worked as expected.
I want to know more about it. Is there any documentation available to learn?.

Are there any limitations...? or can you please clarify my doubts below..

1. Can we add images to this?
2. Can we get the session variables like login Username?
3. Can it have the option to redirect to the parent application .aspx page
4. Can we fetch the data and display as a table format or grid format.
5. Can data displayed as a list format?
6. Any other examples?

[eduardotkoller]

The only documentation is the README.md in the repository, sorry.

1. Can we add images to this? If I remember correctly, I don't do any kind of HTML escaping on the messages, so you can print image tags on them.

2. Can we get the session variables like login Username? jQuery can't access server-side variables, unless you build an API for retrieving it or print the first HTML using your session variables and initializing them on javascript after

3. Can it have the option to redirect to the parent application .aspx page You can make a callback in the last question that does exactly that in javascript

4. Can we fetch the data and display as a table format or grid format. Same as the first question, if you want to print HTML in the message, you can, then adjust CSS to your liking.

5. Can data displayed as a list format? Same as above.

6. Any other examples? Only the ones on the README.md (index.html & api_example.html)

[tv32541]

Got it...Again Thank you very much for helping me and a wonderful Jquery plugin.

[rupal-web]

hello I m using same code with C#,I have added all functionalities in my chatbot applciation but now i want to add functionality refresh or start a new conversation which will work to clear everything and show user a clean chatbot which will ask a first que to user.please help.

[ygngithub]

Hi Eduardo, You created great plugin, i want to give options based on search key,so when the user type a key word ,based on that key word i need to show dynamic options from database.after that he will choose from those options. please can you help me with this.

Thanks & Regards Y. Gangu Naidu

[PonniThirumoorthy]

hello I m using same code with C#,I have added all functionalities in my chatbot applciation but now i want to add functionality refresh or start a new conversation which will work to clear everything and show user a clean chatbot which will ask a first que to user.please help.

hey were you able to achieve it? I also need a similar thing

[shruthimunavalli]

Hello, I have done chat bot using jQuery but I'm not able to redirect to other page from chatbot How can I do that?