I am trying to learn making API calls to openweather.org using HTML, CSS and JavaScript. With lot difficulties wrote code but not sure what the mistake I am doing here. I have to get the output in the console of Chrome, but unable to get. Can you guys let me know where I am making mistake? Below is my code. All the 3 files .html, .css and .js are saved in a single directory.
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;">
<h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2>
</div>
<div class="container">
<div class="row" style="margin-bottom:20px;">
<h3 class="text-center text-primary">Enter City Name</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"> </div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="weatherr.js"></script>
</body>
</html>
style.css file
#rowDiv{
margin:auto;
text-align: center;
width: 100%;
}
input[type="text"]{
height:40px;
font-size:20px;
}
#submitWeather{
height:40px;
font-size:20px;
font-weight: bold;
}
weather.js file
$(document).ready(function(){
$('#submitweather').click(function(){
var city = $("#city").val();
if(city != ''){
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
success: function(data){
console.log(data);
}
You should put your code to display the data where you want here. The way you put it, it will only show in the console.
I think you meant something along the lines:
$("#show").html(data);
Use the console.log(data) to see what data is returning.
I hope it helps you!
You missed an uppercase letter:
$("#submitWeather").click(...)
not $('#submitweather').click(..)
What you want to do is Display the Data that the Weather API is sending back to you. Now let's look at what the data looks like:
Wether for NY
This is the current weather forecast for New York.
You see that the Information you want is in the weather Array.
To access that you need to change your Javascript.
$(document).ready(function(){
$('#submitWeather').click(function(){
var city = $("#city").val();
if(city != ''){
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data){
// you gave the DIV that you want to display the weather information in "show", so that's where this is going:
var html = "<h2>"+data.name+"</h2><br>";
data.weather.forEach(function(city) {
html += "\n"+"<p><img src='http://openweathermap.org/img/w/"+city.icon+".png'>"+city.description+"</p>";
});
$("#show").html(html);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
You can do a lot more with the Data, but with this, it is working like a charm.
$(document).ready(function() {
$('#submitWeather').click(function() {
var city = $("#city").val();
if (city != '') {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3",
type: "GET",
dataType: "jsonp",
success: function(data) {
// you gave the DIV that you want to display the weather information in "show", so that's where this is going:
var html = "<h2>" + data.name + "</h2><br>";
data.weather.forEach(function(city) {
html += "\n" + "<p><img src='http://openweathermap.org/img/w/" + city.icon + ".png'>" + city.description + "</p>"
});
$("#show").html(html);
}
});
} else {
$("#error").html('field cannot be empty');
}
});
});
#rowDiv {
margin: auto;
text-align: center;
width: 100%;
}
input[type="text"] {
height: 40px;
font-size: 20px;
}
#submitWeather {
height: 40px;
font-size: 20px;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;">
<h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2>
</div>
<div class="container">
<div class="row" style="margin-bottom:20px;">
<h3 class="text-center text-primary">Enter City Name</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"> </div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="weather.js"></script>
</body>
</html>
Related
I have the following jqueryCode:
$(document).ready(displayItems);
$(document).ready(getAreaIndex);
function displayItems()
{
$.ajax({
type:"GET",
url:"http://tsg-vending.herokuapp.com/items",
success:function(data){
var div = $("#div1");
var html="";
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
for(let i=0;i<data.length;i++)
{
var itemId = data[i].id;
if(i%3==0)
{
html+="<br><br><br><br>";
}
html+='<textarea readonly rows="4" cols="60" style="overflow:hidden" id="' + itemId + '">'+ (i+1) + ' \n ' + data[i].name + ' \n ' + formatter.format(data[i].price) + ' \n Quantity Left: '+ data[i].quantity + '</textarea> ';
}
div.append(html);
//console.log(html);
},
error: function()
{
console.log("Issue");
}
//add error here
});
/*
$("textarea").each(function(){
$text = this.value;
console.log(text);
});
*/
}
function getAreaIndex()
{
console.log($("#21").val());
$("textarea").each(function(){
$text = this.value;
console.log(text.charAt(0));
});
}
I am trying to add textareas dynamically through jquery appending it to a div I have on my html page. The text area id's are generated by an ajax response to a api that functions correctly. The textareas do append correctly on the html page however when trying to print out the textarea values given known IDs it shows undefined. I even try to do a .each through all textareas and it never it even goes in loop. I do this in the getAreaIndex(), printing it to console(id #21 is a valid textarea id generated).
The Following is the html page if needed:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Vending Machine</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Additional CSS files here -->
</head>
<body>
<div class="container-fluid" id="homeview">
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">Vending Machine</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-9" id="div1">
<!-- Textareas go here -->
</div>
<div class="col-sm-3 float-right" id="Form1">
Total $ In<br>
<input type="text" id="moneyIn"><br><br>
<button id="addDollar">Add Dollar</button>
<button id="addQuarter">Add Quarter</button><br><br>
<button id="addDime">Add Dime</button>
<button id="addNickel">Add Nickel</button>
<hr style="width:30% ;margin-left:0"><br>
Messages<br>
<input type="text" id="messages"><br><br>
Item: <input type="text" id="itemNumber" style="display:block"><br><br>
<button id="makePurchase">Make Purchase</button>
<hr style="width:30% ;margin-left:0"><br>
Change<br><br>
<input type="text" id="change">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="VendingMachine.js"></script>
</body>
</html>
The textareas are inserted after "id=div1"
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);
}
});
NETWORK TABWith the code I have I want the console log to pass 6983839 to the console but it stays empty the whole time and the page refreshes. The endpoint of the API is here. The function is executed by a button press which I'm 99% sure isnt the issue as it works when a change the function to do something else and I have jQuery in my folder for the project aswell and linked in the html file. The code is my JS file is below,
function showCard() {
var cardName = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g,'');
$.getJSON("https://db.ygoprodeck.com/api/v7/cardinfo.php?name=Tornado%20Dragon", null, function(info){
var result = info["data"][0]["id"]
console.log(result)
})
}
Also including the HTML code incase its relevant
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<style>
.title{
color: white;
}
.cardSearch{
text-color: white;
}
#searchBox{
margin-right: 20px;
}
#chosenCard{
width: 177px;
height: 254px;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="header-img" class="container-fluid">
<div class="card card-body bg-dark">
<div class="rows">
<div class="col-ms-8">
<img src="yugioh.png" class = "img-responsive mx-auto d-block"/>
</div>
<div class="col-ms-4 text-center">
<h4 class="title">Combo Builder</h4>
<div id="searchBox">
<form id="cardSearch">
<input type="text" size="12" id="un" />
<input type="submit" onclick="showCard();" value="Submit Card"/>
</form>
<img id="chosenCard" scr="cardBack.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am working with a weather app api and I am trying to display weather Data based off what the users inserts in the form. For some reason the data is not displaying. I have gone through the code 10 times, and I cant seem to find the error.
Can anyone take a look at point out where I have gone wrong?
Thank you
$(document).ready(function() {
$('submitWeather').click(function() {
var city = $('#city').val();
if (city != '') {
$.ajax({
url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=_MY_API_KEY_",
type: "GET",
dataType: "jsonp",
success: function(data) {
var widget = show(data);
$("#show").html(widget);
$("#city").val('');
}
});
} else {
$("#error").html('Field cannot be empty');
}
});
});
function show(data) {
return '<h3><strong>Weather<strong>: ' + data.weather[0].main + ' </h3>' +
'<h3><strong>Weather<strong>: ' + data.weather[0].description + ' </h3>';
}
console.log('hello')
.mainArea {
background-color: lightgray;
}
.day1,
.day2,
.day3,
.day4,
.day5 {
width: 220px;
height: 200px;
background-color: blue;
position: relative;
color: white;
}
.input {
text-align: center;
}
input[type='text'] {
height: 50px;
width: 200px;
background: #e7e7e7;
}
input[type='submit'] {
height: 50px;
width: 100px;
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-light bg-light jumbotron">
<div class="navbar-brand">Weather Guide</a>
<!-- <form class="form-inline">
<input class="inputValue form-control mr-sm-2" type="text" placeholder="Search City" aria-label="Search">
<button class="button btn btn-outline-success my-2 my-sm-0" value="submit" type="submit">Search</button>
</form>-->
</nav>
<div class="container">
<div class="row">
<h3 class="text-center text-primary">Enter City Name</h3>
</div>
<div class='row form-group form-inline'>
<input tyepe='text' name='city' id="city" class="form-control" placeholder="city name">
<button id="submitWeather" class="btn btn-primary">Search</button>
</div>
<div id="show">
</div>
</div>
<!-- Main Content -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
$('submitWeather') should be $('#submitWeather')
Here's how to do it without jquery incase anybody wants it:
const getCity = () => document.querySelector('input#city').value || "austin"
document.querySelector("#getWeather").addEventListener('click', function () {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${getCity()}&units=metric&APPID=_MY_API_KEY_`
loadDataRequest(url, displayJSON)
})
function loadDataRequest(url, cb) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
cb(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function displayJSON(xhttp) {
document.querySelector("#show").textContent = JSON.stringify(JSON.parse(xhttp.response), null, 2);
}
<input id="city" name="city" placeholder="city"/>
<button id="getWeather" type="button" >Get</button>
<div id="show" style="white-space:pre"></div>
I searched through the forums anything that help me and nothing is working... I'm trying to do a login on Phonegap using a AJAX call to a PHP file located in a remote server but the PHP file is not returning anything... I post my codes:
The AJAX call:
$.ajax({
type: "POST",
data: 'userMail='+user+'&userPassword='+password,
dataType : 'html',
url : "http://www.eega.nl/app/login.php",
crossDomain: true,
async: false,
success: function(data){
if(data!='error'){
window.localStorage["userId"] = data;
location.href = "schedule.html";
}else{
alert("failed login");
location.href = "index.html";
}
},
error: function(){
alert("error");
window.open('schedule.html');
}
});
The PHP file:
<?php
include 'connect.php';
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, REQUEST');
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Max-Age: 3628800');
$data = array();
$userMail = $_POST["userMail"];
$userPassword = $_POST["userPassword"];
$cryptpass = md5($userPassword);
$sql = "SELECT tr_adr_id FROM elo_users WHERE email = '" . $userMail . "' AND crypt = '" . $cryptpass . "'";
//mysql_real_escape_string($userMail),
//mysql_real_escape_string($cryptpass));
$result = mysqli_query($sql);
//if($data = mysql_fetch_array($result)){
while($row = mysqli_fetch_array($result)) {
$data = $row['tr_adr_id'];
}
echo $data["tr_adr_id"];
mysqli_free_result($data);
mysqli_close();
?>
I tried to do the AJAX call with POST and GET and in the PHP file with the $_POST, $_GET and $_REQUEST and nothing of that worked for me...
Thank you in advance! I still working on that trying to figure out what is wrong in my code...
EDITED:
The index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320" user-scalable="no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/docs.min.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
<link rel="stylesheet" href="css/general.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<title>EegaApp</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<div id="eegaLogo">
<img class="bottom" src="images/eega_logo_loading.jpg"/>
<img class="top" src="images/eega_logo.jpg"/>
</div>
www.eega.nl
<!--*********Login form********-->
<form id="loginForm" class="form-signin" role="form" style="width:50%; text-align: center; margin-top: 55%; margin-left: 25%;" method="post">
<input id="userMail" name="userMail" class="form-control" type="email" autofocus="" required="" placeholder="Email"></input>
<input id="userPassword" name="userPassword" class="form-control" type="password" required="" placeholder="Password"></input>
<div>
<input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
<label for="checkbox-mini-0">Remember me</label>
</div>
<button type="submit" data-mini="true" onClick="login()">Login</button>
</form>
<!--*********End form*********-->
<!--THIS LINE IS JUST FOR TEST-->
schedule
<!--*********Footer*********-->
<div id="footer">
<script>
function openExternal(elem) {
window.open(elem.href, "_system");
return false; // Prevent execution of the default onClick handler
}
</script>
<a class="col-xs-4" href="http://9292.nl/#" target="_blank" onClick="javascript:return openExternal(this)"><img id="footer-icon" src="images/9292_icon.jpg" style="width: 60px; height: 60px;"/></a>
<a class="col-xs-4" ><img id="footer-icon" src="images/maps_icon.jpg" style="width: 60px; height: 60px;"/></a>
<a class="col-xs-4" ><img id="footer-icon" src="images/call_icon2.jpg" style="width: 60px; height: 60px;"/></a>
</div>
<!--********End footer*********-->
</body>
You are doing things a little difficult for yourself the way everything is laid out. Here are a few examples that will help you fix your code.
Notice how the data:{} is laid out. Notice how the success is laid out.
$.ajax({
type: "GET",
url: "../ajax.php",
dataType: "json",
data: {
type: "getLineComments",
saleId: $(this).attr('saleId'),
lineId: $(this).attr('lineId')
},
success: function (json) {
$content.empty();
$content.slideToggle(500, function () {
if(json.Row !== undefined && json.Row.length > 0)
{
for(var i=0;i < json.Row.length;i++)
{
var item = json.Row[i];
//console.log(item);
//console.log(item.REMARK_LIN);
$content.append("<li>" + item.REMARK_LIN + "</li>");
}
}
else
{
if(json.Row !== undefined)
$content.append("<li>" + json.Row.REMARK_LIN + "</li>");
else
$content.append("<li>No Comments</li>");
}
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse Line Remarks" : "Expand Line Remarks";
});
});
},
error: function(e)
{
console.log(e);
}
});
Also one thing that will help you quite a bit is using the php function json_encode - http://php.net/manual/en/function.json-encode.php
For example
echo json_encode(mysqli_fetch_array($result));