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>
Related
Thanks for you all.
I am new in coding MVC, and I am trying to code a page that will create and as parent and child loop, using data from JSON (MenuHandler.ashx), the JSON data is tested and it's ok, but the Ajax was not working.
for your kind note: the Alert working before and after Ajax
this is my VIEW page:
<script type="text/javascript">
$(document).ready(function () {
$("#testaj1").click(function () {
alert ("test22")
$.ajax({
url: 'MenuHandler.ashx',
method: 'get',
dataType: 'json',
success: function (data) {
buildMenu($('#menu'), data)
$('#menu').menu();
}
});
alert("test33")
});
function buildMenu(parent, items) {
$.each(items, function () {
var li = $('<li>' + this.Name + '</li>');
li.appendTo(parent);
if (this.List && this.List.length > 0) {
var ul = $('<ul></ul>');
ul.appendTo(li);
buildMenu(ul, this.List);
}
})
}
})
</script>
<link href="~/Content/MyCSS/MyCSS.css" rel="stylesheet" />
#model IEnumerable<pedigree.Models.pedigree1>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="~/Scripts/jquery-3.5.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<title>Index</title>
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form>
<button id="testaj1" type="button" >test</button>
<div class="tree">
<ul id="menu">
</ul>
</div>
</form>
Thanks for everyone as Alejandro Coronado said, the issue was in the handler.ashx file, I don’t now why wasn’t worked, but when I use instead json result action
The Ajax worked and the results came according to my expectations
Thanks everyone
The most common reason is the controller that you are pointing, maybe the controler uri is not correct, also be sure that your controller is returning a JSON.
when I try load a html content into a div using ajax, the referenced scripts aren't not loaded, but the css are. Follow below a test case.
PageA.html content:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Page A</h1>
<div>
<div id="dck">
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "http://localhost/demo/pageB.html", data: {},
type: "get", async: false, cache: false, dataType: "html",
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
success: function (data, textStatus, XMLHttpRequest) {
$('div#dck').hide();
$('div#dck').html(data);
$('div#dck').delay(1000).show(0);
}
});
});
</script>
PageB.html content:
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>
<body>
<h1>Page B <span class="badge badge-secondary">Div Inside</span></h1>
</body>
<script type="text/javascript">
alert('1');
new ClipboardJS('.btn-cp');
alert('2');
$(document).ready(function () {
alert('3');
});
</script>
If all works we would see three alerts, but unfortunately we see just the first, because the object ClipboardJS is defined in a javascript in pageB that is not loaded.
I have tried some options, but nothing has worked until now, anybody has some suggestion?
I will need this in a cross-domain deploy, but this is not a cross-domain issue, I have the problem with the pages in same path, I have tested puting both the above pages in a single web server folder called demo.
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery examples - 4</title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<input id="name" type="text" name="">
<input id="button" type="button" value="load" name="">
<div id="content"></div>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/selectors12.js"></script>
</body>
</html>
$('#button').click(function() {
var name = $('#name').val();
$.ajax({
url:'php/page.php',
data: 'name='+name, //sending the data to page.php
success: function(data) {
$('#content').html(data);
}
}).error(function() {
alert('an error occured');
}).success(function() {
/*alert*/
alert('an error occured');
}).complete(function() {
/*alert*/
});
});
the error() is not working, when I change the URL: to page.php with incorrect extension to check for an error() and display it.
But, in console it displays an error saying:
Uncaught TypeError: $.ajax(...).error is not a function
Since version 3.0, jQuery replaces error() with fail() for chained promise call. So you should use
$.ajax({
....
}).done(function(resp){
//do something when ok
}).fail(function(err) {
//do something when something is wrong
}).always(function() {
//do something whether request is ok or fail
});
From jQuery Ajax documentation:
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
Maybe you are using the slim build of jquery which does not have ajax function. Try to download the regular one from this link
You need to do two things here.
First make sure Ajax is there in your Jquery file using below code.
<script>
$(document).ready(function() {
console.log($.ajax);
});
</script>
If this prints error, then you don’t have Ajax. In this case, change you jquery to point to CDN like https://code.jquery.com/jquery-2.2.4.min.js.
Secondly change you Ajax function to below. Here i modified the error and complete function plus removed duplicate success function.
$.ajax({
url:'php/page.php',
data: 'name='+name, //sending the data to page.php
success: function(data) {
$('#content').html(data);
}, error : function(e) {
alert('an error occured');
}, complete : function() {
/*alert*/
}
});
You are using slim version of jQuery. It Doesn't support ajax Calling. Use following cdn
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery examples - 4</title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<input id="name" type="text" name=""> <input id="button" type="button" value="load" name="">
<div id="content"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/selectors12.js"></script>
</body>
</html>
<pages>
<link>
<title>HTML a tag</title>
<url>http://www.w3schools.com/tags/tag_a.asp</url>
</link>
<link>
<title>HTML br tag</title>
<url>http://www.w3schools.com/tags/tag_br.asp</url>
</link>
<link>
<title>CSS background Property</title>
<url>http://www.w3schools.com/cssref/css3_pr_background.asp</url>
</link>
<link>
<title>CSS border Property</title>
<url>http://www.w3schools.com/cssref/pr_border.asp</url>
</link>
<link>
<title>JavaScript Date Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url>
</link>
<link>
<title>JavaScript Array Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url>
</link>
</pages>
this is the sample xml data which i am parsing and getting the output from
SEARCH.HTML
<!DOCTYPE html>
<html>
<head>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script>
$(document).ready(function () {
var myArr = [];
$.ajax({
type: "GET",
url: "http://localhost/category/links.xml",
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function (data) {
alert("XML File could not be found");
}
});
function parseXml(xml) {
//find every query value
$(xml).find("link").each(function () {
myArr.push($(this).find('title').text());
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 3,
select: function (event, ui) {
$("input#searchBox").val(ui.item.value);
$("#searchForm").submit();
}
});
}
});
</script>
</head>
<body style="font-size: 62.5%;">
<form name="search_form" id="searchForm" method="GET" action="http://localhost/search_result1.html">
<label for="searchBox">Keyword Search</label>
<input type="text" id="searchBox" name="searchString" />
<button name="searchKeyword" id="searchKeyword">Sumbit</button>
</form>
</body>
</html>
and this my search bar with auto complete feature. In it i first parse the above xml and then store the title in an array which i can use it for auto completeion feature. and on clicking the submit i redirect the page to another html page where i show all the results.
the code for the second html page is as given below..
RESULT.HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="1.7.2.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#dvContent").append("<div></div>");
$.ajax({
type: "GET",
url: "http://localhost/category/link.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('link').each(function () {
var stitle = $(this).find('title').text();
var surl = $(this).find('url').text();
$("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div");
});
},
error: function () {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvContent">
</div>
</form>
</body>
</html>
but what i want is to show only the title and url of the searched term. In this i am getting the entire xml as output. So in there a way by which i can show only the title and url of the searched term.
that is i get the output in result.html as
. HTML a tag, http://www.w3schools.com/tags/tag_a.asp
. HTML br tag, http://www.w3schools.com/tags/tag_br.asp
on searching for the term HTML in the search in search.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="1.7.2.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#dvContent").append("<div></div>");
var searchValue = $('#searchBox').val(); // Here you get the search text
$.ajax({
type: "GET",
url: "http://localhost/category/link.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('link').each(function () {
var stitle = $(this).find('title').text();
var surl = $(this).find('url').text();
if (searchValue === stitle) { // Only append those if search text matches with title
$("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div");
}
});
},
error: function () {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvContent">
</div>
</form>
</body>
</html>