I made a qnamaker service and build a chat to show the response of the question.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Chat</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="chat.js"></script>
<script src="rispostachat.js"></script>
<link rel="stylesheet" href="chat.css">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="live-chat">
<header class="clearfix">
x
<h4>Bot</h4>
</header>
<div class="chat">
<h3>Risposta:</h3>
<div id="answer"></div>
<input type="text" id="question" name="question">
<button type="button" class="button" id="post-btn"> Chiedi</button>
</br>
</body>
</html>
This is for close and show the chat box
(function() {
$('#live-chat header').on('click', function() {
$('.chat').slideToggle(300, 'swing');
});
$('.chat-close').on('click', function(e) {
e.preventDefault();
$('#live-chat').fadeOut(300);
});
}) ();
And this is for take the response inserted and show the response to the user
$("#post-btn").click(function(){
jQuery.ajax ({
url: "https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/idknowledgebasetoinsert/generateAnswer",
type: "POST",
data: '{"question" : "'+$("#question").val()+'"}',
dataType: "json",
contentType : "application/json",
headers: {"Ocp-Apim-Subscription-Key": "subscriptionkeytoinsert"},
success: function(msg, status, jqXHR){
$('#answer').html(msg.answers[0].answer);
}
});
});
When i click on the header of the chat , the chat not close and the chat not disappear when i clcik on the close button x of the chat.
When i click on Chiedi to send the answer nothing happen. I don't see the response of the service in the chat.
it looks like you have included the jQuery twice (2 different versions) in your header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
Related
I am calling data from a movie API using jquery and it has an endpoint where I can call a particular show with an id. The home page displays the movies and clicking them should call another endpoint of the API. Below is my code:
$(function (){
let $movies = $('#showList')
$.ajax({
method:'GET',
url:'http://api.tvmaze.com/shows',
success: function(movies){
$('#show').hide()
$('#showList').removeAttr('hidden');
$.each(movies, function(i,movie){
$movies.append('<li class="list"><a id="ss" href="'+ movie._links.self.href+'">'+ movie.name +'</a></li>')
})
}
})
})
$('body').on('click','.list a',function(event){
event.preventDefault();
$('#showList').hide();
$('#show').empty()
let currentId = event.target.id;
console.log(currentId)
$.ajax({
method:'GET',
url:'http://api.tvmaze.com/shows/'+currentId,
success: function(movies){
$('#show').append('<h1>'+ movies.name +'</h1>')
}
})
$('#show').show();
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TV Shows</title>
</head>
<body>
<h1>TV Shows</h1>
<div id="show" hidden></div>
<ul id="showList" hidden></ul>
<form id="searchForm">
<input type="text" id="search_term">
<label for="text">Search</label>
<button>Submit</button>
</form>
<a id="homelink" href="/" hidden>Back to All Shows</a>
<footer>Swayam Shah, 10471353</footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="/public/js/index.js"></script>
</body>
</html>
How do I get this id when I click on the movies link? The console.log shows empty.
you haven't mentioned id attribute in your anchor tag.
$movies.append('<li class="list">'+ movie.name +'</li>')
Had to replace URL with only currentID
Using "this" works for me.
$("a").click(function() {
console.log($(this).attr("id"));
});
I am using ajax to post data on nodejs server I am getting response from nodejs and I am able to show them on front end but problem is they are still be there even if form submitted. I want to hide those messages after sometime.I have tried but unable to achieve desired result.
Below is my code:
register.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/register.js"></script>
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top:50px;
}
.form{
margin-top:50px;
margin-left:30%;
margin-right:30%;
}
input{
margin-top:10px;
}
button{
margin-top:20px;
}
#result{
text-align: center;
}
.alert{
margin-top:15px;
text-align: center;
display:none;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input id="name" name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
<input id="mail" name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
<button type="submit" class="btn btn-primary">SUBMIT</button>
<div class="alert alert-danger" role="alert">
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
register.js
$(document).ready(function(){
$('.btn').click(function(e){
e.preventDefault();
ajaxPost(); //Function to post data
});
});
function ajaxPost(){
var formData = {
name: $("#name").val(),
email: $("#mail").val()
}
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
}
});
}
Someone let me know what I am doing wrong.
Call $(".alert").hide() in a setTimeout, but don't forget to clear the timeout when a new message is shown in .alert
let messageTo;
function showMessage(mess) {
if (messageTo) {
clearTimeout(messageTo);
messageTo = undefined;
}
$(".alert").html(mess).show();
messageTo = setTimeout(() => $(".alert").hide(), 5000);
}
I couldn't understand what message to hide you are talking about.
Assuming you want to hide the alert div,
You may use setTimeOut with a delay.
Your code would be:
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
// Hide after 1 second
setTimeout(function(){ $(".alert").hide(); }, 1000);
}
});
the button was supposed to go to IP address of button pressed then also logout but it doesn't
I have made script that can logout after few minutes , but its not in the scope of the project
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>
<button type="cape" id="cape " onclick="window.location.href = 'http://10.23.32.20();';'logout.php();'">Cape </button>
</p>
<button type="cape" id="cape" onclick="window.location.href = 'http://10.23.30.20();';'logout.php();'">Quay 4 </button>
</body>
</html>
function logout()
{
// simply calling the logout.php page
$.ajax({
type: 'post',
url: 'logout.php',
data: $('form').serialize(),
success: function () {
// window.location.replace("http://10.23.30.20/");
window.location.href = "http://10.23.30.20/"
}
});
}
<button type="cape" id="cape " onclick="logout()">Cape </button>
I am writing a javascript webpage, and in it, I am trying to send this Ajax request.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function onSubmit() {
$.ajax({
url: window.location.href,
method: "POST",
context: document.body,
data: {newContent: $("#verseContent").contents()[0]},
success: () => {console.log("DONE")},
error: (err) => {console.error(err);}
});
}
</script>
</head>
<body>
<textarea id="verseContent"><%= content %></textarea>
<button onClick="onSubmit()">SAVE</button>
</body>
</html>
But it is always throwing the error:
[Error] TypeError: Can only call Text.splitText on instances of Text
splitText (jquery.min.js:2:71316)
i (jquery.min.js:2:71316)
jt (jquery.min.js:2:71208)
jt (jquery.min.js:2:71232)
param (jquery.min.js:2:71508)
ajax (jquery.min.js:2:75809)
onSubmit (1:10)
onclick (1:30)
I cannot seem to find any information to help debug this issue... Does anyone have any idea what might be going on? Thank you so much for any thoughts, ideas or any direction you may have.
Your AJAX request you should send data is JSON object.
In your situation, I guess that you want to send content from textarea. If true you can try this code:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function onSubmit() {
$.ajax({
url: window.location.href,
method: "POST",
data: {
newContent: $("#verseContent").text()
},
success: () => {console.log("DONE")},
error: (err) => {console.error(err);}
});
}
</script>
</head>
<body>
<textarea id="verseContent"><%= content %></textarea>
<button onClick="onSubmit()">SAVE</button>
</body>
</html>
I have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.