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);
}
});
Related
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 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>
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>
i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
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));