Can I fetch the response data from/to web service and show the result in chatbox?

[User0123456789]

Hello,

I'm new to this JQuery convForm.
Also, I am confusing of displaying the response from web service to chatbox and vice versa (pass the data to web service.

Inside the form, I have a select box which has a 2 options, each options have a corresponding dummy chat message. What I need is when the user reach to the question with 'Type your concern', the data will pass in web service and get the real data chat message.

I can't get the response data fetch from/to the web service when the user reached to 'Type your concern', what is currently happening is the chatbox reload itself when reached to 'Type your concern' and everything was cleared.

Please help me.

JS:

jQuery(function($){
			var count = 0;
			var convForm = $('#chat').convform({eventList:{onInputSubmit: function(convState, ready) {
				console.log('input is being submitted...');
		        if(convState.current.answer.value==='end') {
		            convState.current.next = false;
					setTimeout(ready, Math.random()*500+100);
		        } else {
					if(Array.isArray(convState.current.answer)) var answer = convState.current.answer.join(', ');
					else var answer = convState.current.answer.text;
					setTimeout(ready, Math.random()*500+100);
		        }
				count++;
				
				/* function getinfo(stateWrapper, ready) {
					window.open("https://google.com");
					ready();
				} */

				function getinfo(convState) {
					var chatMsg = $('#chatConcern').val();
						if(chatMsg>=0) {
							$.ajax({
								url: 'https://example.webservice/',
								type: "POST",
								dataType: "json",
								contentType: 'application/json; charset=utf-8',
								data: JSON.stringify({ 'text': chatMsg }),
								success: function (response) {
									console.log("Thanks!");
								},
								error: function (response) { alert(response.d); }
							
						});
					}
					}
			}}});
		});

Here's the form look like:

<form action="" method="GET" class="hidden" id="chatUser">
	                                <select name="custType" data-conv-question="Are you a new or existing customer?" name="first-question">
	                                    <option value="newCust">New Customer</option>
	                                    <option value="existingCust">Existing Customer</option>
									</select>

									<div data-conv-fork="custType">
	                                   <div data-conv-case="newCust">
											<input type="text" name="custName" data-conv-question="What is your full name?">
											<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
											<input type="text" name="mobile" data-conv-question="What is your mobile number?">
											<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
	                                    </div>

										<div data-conv-case="existingCust">
											<select name="existingCust" data-conv-question="Which department would you like to talk to?">
												<option value="col">Dept 1</option>
												<option value="hr">Dept 2</option>
												<option value="cs">Dept 3</option>
											
												<div data-conv-case="col">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail"  data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>

												<div data-conv-case="hr">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>

												<div data-conv-case="cs">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>
											</select>
										</div>
									 </div>
	                            </form>

[eduardotkoller]

Hi,

Can you check the console for any js error when you run the conversation?

Also, try defining the callback function getInfo outside jquery's scope and using jQuery instead of $. Callback functions are expected to be globally accesible, as the plugin tries to call It using window[callbackName].

[User0123456789]

Hello, I tried what have you suggested, but I couldn't get any js error. But console displayed 'completed' when the user submit the answer in the 'type your concern'.

Also, I tried to put the ajax inside onInputSubmit, but the response data chat message didn't not fetched from/to web service.

		jQuery(function($){
			var chatInfo = {chatInfo: ['...']};
			var convForm = $('#chat').convform({
				eventList:{
					onInputSubmit: function(convState, ready) {
						jQuery.ajax({
							url: 'https://example.webservice/',
							type: "POST",
							dataType: "json",
							contentType: 'application/json; charset=utf-8',
							data: JSON.stringify(chatInfo),
							success: function (response) {
								var current = convState.current;
									convState.current.next = convState.newState({
									type: 'text',
									questions: response.d,
									noAnswer: true
								});
								convState.current.next.next = current;
								console.log("Thanks!");
							},
							error: function (response) { alert(response.d); }
						
						});
					/* console.log('input is being submitted...'); */
					if(convState.current.answer.value==='end') {
						convState.current.next = false;
						setTimeout(ready, Math.random()*500+100);
					} else {
						if(Array.isArray(convState.current.answer))
							var answer = convState.current.answer.join(', ');
						else
							var answer = convState.current.answer.text;
						setTimeout(ready, Math.random()*500+100);
					}
				/* count++; */
				
				/* function getinfo(stateWrapper, ready) {
					window.open("https://google.com");
					ready();
				} */
					}
				}
			});
		});

[eduardotkoller]

Hmm, I think this is happening because at the moment the user answers the last question on your HTML the code checks to see if there is another question lined up, if there isn't it just submits the form (as you are doing an ajax request to then create a new question, there is really no question lined up at the moment the user sends the answer). To make what you need to work at the state of the code right now, you will have to use the other way of building the form -- check the api_example.html.

[turbocpt]

@User0123456789 Did you ever manage to solve this? I am trying something similar and I am not getting it to work. I am at a point of giving up.