I am working on an input field that is autocompleted with names from this link(steam API):
http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json
or
http://api.steampowered.com/ISteamApps/GetAppList/v0001
I would also like the field to return the id of the game despite the name being insered into it.
So far after browsing the forums I put together this but it doesn't quite work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json",
data: { query: request.term },
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.appid + " - " + el.name,
id: el.appid
};
});
response(transformed);
},
error: function () {
response([]);
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
For the autocomplete part I chose to use jQuery autocomplete function: https://jqueryui.com/autocomplete/ however I am open to other methods.
Edit: Fixed syntax error on line 31 but the code still isn't working.
JSFiddle: https://jsfiddle.net/vxej2L5g/
In the success block you are assigning a label and id. In the label you have assigned name, and in id the appid. We can modify this to format the label like this:
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.appid + " - " + el.name,
id: el.appid
};
});
response(transformed);
},
There is a syntax error in your Javascript on line 31 (basically you have an extra closing parenthesis and semicolon).
The JSON response for the API you are calling wraps the list of apps.
Why I am getting this error? I guess some of my HTML nodes are not created why I try to call the doSearch method. It's actually happening only second time I call this function.
I'm using React and calling this function inside componentDidUpdate lifecycle method.
Here is my HTML file where I load my script inside
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="//csr.inspsearchapi.com/lib/infospace.search.js">
</script>
<link rel="stylesheet" href="./static/style/styles.css" />
</head>
<body>
<div class="container"></div>
<script src = "bundle.js"></script>
</body>
Here is my function:
componentDidUpdate(prevProps) {
const signature = this.props.signature ? this.props.signature.response.data : '';
window.insp.search.doSearch({
query: this.state.searchText,
searchUrlFormat: this.state.searchText,
signature,
page: 1,
containers: {
'top': {id:'topResults'},
'related': {id:'relatedResults'},
},
});
}
If I'm trying to send Html Data in textarea Code is failed. alert Working till Username data getting properly but ajax not sending my Data to Php server.
Javascript
var username=document.getElementById( "my_text" ).value;
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php?username=username',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
Html
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
There are a couple of places your code could be breaking down. This would be easier for us to help with if you provided console logs of errors.
1) If you haven't loaded jQuery yet then the $.ajax() won't be called. You may also need to do $(document).ready(); to make sure everything is loaded.
2) You are wrapping an entirely new DOM inside of a textarea. I'm not sure if that's a copy/paste mistake but it'll have strange effects on the result.
3) After your response it's apparent that you are actually trying to send html to the server..? Your error code from console suggests there's plenty else going on. It's hard to know how to help if we don't see everything. i.e. PHP and the rest of the client code.
3) Since your if statement isn't wrapped in a function call it is evaluated at runtime. So the code runs at the page load but nothing triggers it later. Which means username is always null.
If you want to fix this you need something to trigger the event. You can try:
HTML
<body>
<textarea id='my_text'></textarea>
<button id="submitButton">Submit</button>
</body>
JS
let sub = document.getElementById('submitButton');
sub.addEventListener('click', function(){
let username = document.getElementById('my_text').value;
if(username){
// Add Ajax Call Here
}
});
Backup.html or php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text editor</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function view_text () {
var username=document.getElementById( "my_text" ).value;
console.log(username);
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
}
else{
$( '#name_status' ).html("");
return false;
}
}
</script>
</head>
<body>
<input type="button" value="Execute >>" onclick="view_text()" class="button"/>
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
<span id="name_status"></span>
</body>
</html>
Been trying to take specific data from an array of objects that for many reasons I cannot host on a server. The data is in stored as a variable in the document. This is what i've been trying so far to no success:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m#ebay.co.uk","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"llawrence7o#technorati.com","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]
var simpson = users.find("last_name" + "Simpson")
document.getElementById("return").innerHTML = function myfunction() {
simpson;
}
</script>
</head>
<body>
<div id="return"></div>
</body>
For now I've just been trying to extract some/any data from the 'users' array, but going forward i would like to have the user search for a word and the entire 'line'/'lines' of data related to the word/words in 'users' display as results. What methods should i use to achieve this?
You have some mistakes in your code. First of all, find function accept as argument a callback function.
var simpson = users.find(a=>a.last_name=="Simpson");
If you pass function to innerHTML, you must to invoke it, like this:
document.getElementById("return").innerHTML = (function myFunction(){
return JSON.stringify(simpson);
})();
and function must return a value in order to set the HTML content (inner HTML) of result element.
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m#ebay.co.uk","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"llawrence7o#technorati.com","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]
var simpson = users.find(callback);
function callback(item){
return item.last_name=="Simpson";
}
document.getElementById("return").innerHTML = (function myFunction(){
return JSON.stringify(simpson);
})();
<body>
<div id="return"></div>
</body>
1. You need to pass the callback function in find method. The find method searches for an element in an array and returns the element if it is found. Otherwise undefined is returned. The Search Criteria is defined by a callback function. Something like
var simpson = users.find(currentValue => currentValue.last_name === "Simpson");
2. You might not require your innerHTML to be a function, instead it would be more appropriate that it points to meaningfull information like UserName Found.
document.getElementById("return").innerHTML = simpson.username;
Try the following code.
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m#ebay.co.uk","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"llawrence7o#technorati.com","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]
var simpson = users.find(currentValue => currentValue.last_name === "Simpson");
document.getElementById("return").innerHTML = simpson.username;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="return"></div>
</body>
I am validating data present in CKeditor on a button click event using jquery. After the button click it separates the list of correct answers and wrong answers. This works fine. But after modifying the wrong answers and hit the button, it again takes the initially entered values. How to make it take the modified data on the 2nd button click.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script src="../ckeditor/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
CKEDITOR.replace('Field');
var correctZips = new Array;
var wrongZips = new Array;
var CorZip;
var WorZip;
$('#save').click(function () {
var editor_data = CKEDITOR.instances['Field'].getData();
var element = $(editor_data).text().split(",");
$.each((element), function (index, value) {
if(this.length=5 && jQuery.isNumeric(this)) {
correctZips= correctZips+"<span>"+this+"</span>"+",";
}else {
wrongZips= wrongZips+"<span id='flip' style=\"background-color: yellow; \">"+this+"</span>"+",";
}
}
)
CKEDITOR.instances.Field.setData((correctZips + wrongZips), function (index, value){
})
//$("#save").attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<textarea id="Field"></textarea>
<button id ="save">Verify the ZipCodes</button>
</body>
</html>
Regards,
Steven
You are deinfing the 2 ZIPS variables as arrays outside of the click handler. You need to reset them for each time a click occurs so they need to be defined inside the handler and they shouldn't be defined as arrays since you are using them to concatenate strings
$('#save').click(function () {
var correctZips = '', wrongZips='';/* start with empty strings*/
/* remainder of your handler code*/
});