Based on this topic: Changing the content of div in Jquery Mobile I want to retrieved data from mysql table using php and json but nothing is displayed in this operation.
Here are the information used:
json.php
$conexion = new mysqli("localhost", 'xxx', 'xxx', 'Operations');
$query = "SELECT * FROM bugs";
$result = mysqli_query($conexion,$query);
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$id['projectid'] = $row['projectid'];
$id['status'] = $row['status'];
$id['severity'] = $row['severity'];
$id['title'] = $row['title'];
$id['creation_date'] = $row['creation_date'];
array_push($result_array,$id);
}
echo json_encode($result_array);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bugs Administration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
$(document).live('pageinit',function (event) {
$.ajax({
url: 'http://127.0.0.1/app/json.php',
data: "",
dataType: 'json',
success: function(data)
{
for (var i = 0; i < data.length; i++) {
$('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
"<b>Status: </b>"+ data[i].status+
"<b>Severity: </b>"+ data[i].severity+
"<b>Title: </b>"+ data[i].title+
"<b>Creation Date: </b>"+ data[i].creation_date+
"</li>");
}
$('#list').listview('refresh');
}
});
});
</script>
</head>
<body>
<div data-role="page" id="bugs">
<div data-role="header">
<h1>List of Bugs</h1>
</div><!-- /header -->
<div class="Main" data-role="content">
<h3>Current opened bugs</h3>
<ul data-role="listview" id="list"></ul>
</div><!-- /content -->
<div data-role="footer">
<h3>Mobile App</h3>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Actually this is the result:
What I'm doing wrong?
I think it's a cross domain issue, can you try to do your ajax call with a relative path if your index.html file is in the same folder as your json.php ?
$.ajax({
url: 'json.php',
data: "",
dataType: 'json',
success: function(data)
{
for (var i = 0; i < data.length; i++) {
$('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
"<b>Status: </b>"+ data[i].status+
"<b>Severity: </b>"+ data[i].severity+
"<b>Title: </b>"+ data[i].title+
"<b>Creation Date: </b>"+ data[i].creation_date+
"</li>");
}
$('#list').listview('refresh');
}
});
Here is the full index.html code :
<!DOCTYPE html>
<html>
<head>
<title>Bugs Administration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
$(document).live('pageinit',function (event) {
$.ajax({
url: 'json.php',
data: "",
dataType: 'json',
success: function(data)
{
console.log(data);
for (var i = 0; i < data.length; i++) {
$('#list').append("<li><b>Project ID: </b>"+ data[i].projectid +
"<b>Status: </b>"+ data[i].status+
"<b>Severity: </b>"+ data[i].severity+
"<b>Title: </b>"+ data[i].title+
"<b>Creation Date: </b>"+ data[i].creation_date+
"</li>");
}
$('#list').listview('refresh');
}
});
});
</script>
</head>
<body>
<div data-role="page" id="bugs">
<div data-role="header">
<h1>List of Bugs</h1>
</div><!-- /header -->
<div class="Main" data-role="content">
<h3>Current opened bugs</h3>
<ul data-role="listview" id="list"></ul>
</div><!-- /content -->
<div data-role="footer">
<h3>Mobile App</h3>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Related
So, i want to populate div with id "listberita" with html code from ajax response.
Here is the php code where contain div with "listberita" id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jabary - Website Budaya Jabar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f8535c9b97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="berita.css">
</head>
<body>
<!-- Navbar -->
<?php include 'php/navbar.php'; ?>
<div class="container my-5">
<div class="kategoricaption mb-5">
<div class="row">
<div class="col">
<h1 class="text-center fw-bold judulkategori">Berita</h1>
<hr class="mx-auto" style="width:10%; background-color: #f49f16;">
</div>
</div>
</div>
<div class="card-group vgr-cards" id="listberita">
</div>
</div>
<!-- footer -->
<?php include 'php/footer.php'; ?>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js "></script>
<script src="berita.js"></script>
</body>
</html>
Here is my ajax js code
$(this).ready(function() {
getNews()
function getNews() {
$.ajax({
type: "GET",
url: "_php/getBerita.php",
dataType: "JSON",
success: function(response) {
var kode;
$.each(response, function(i, obj) {
console.log(kode)
kode += '<div class="card kartu pb-3"><div class="card-img-body"><img class="card-img" src="img/Berita/' + obj.gambar_berita + '" alt="Card imagecap"></div><div class="card-body"><h4 class="card-title">' + obj.nama_berita + '</h4><p class="card-text">' + obj.keterangan_berita.substring(0, 250) + '....</p>Read More</div></div>'
$('#listberita').html(kode);
})
}
});
}
})
Here is my php code where ajax request to (php_/getBerita.php)
<?php
include '../koneksi.php';
$result = $conn->query("SELECT * from tbl_berita");
while($row=$result->fetch_assoc()){
$data[]=$row;
}
echo json_encode($data);
?>
The code above is working, it's return the data i want. But there is a problem.
Here is the problem
How to get rid the "undefined" thing on the beginning of div?
Try changing your var kode; to var kode = "";.
When you define the variable without initializing it, it will be undefined. And then your loop is appending text to an undefined variable. That's probably why.
I have a search formula with an autocomplete function which works just fine on localhost, but as soon as I put it on a remote server it stops working.
I hope you can help me.
Here is some Code:
index.php:
<!DOCTYPE html>
<html lang="de">
<head>
<?
header("Content-Type: text/html; charset=iso-8859-1");
?>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrap">
<h1 class="text-center">Suche</h1>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-xs-offset-6 col-sm-offset-4 col-md-offset-4">
<form method='POST' action=''>
<input type='text' name='food' id="country_name" class="form-control txt-auto"/>
<input type='submit' value='search'>
</form>
</div>
</div>
</div>
<script src="js/auto.js"></script>
</body>
</html>
ajax.php
<?php
header('Content-Type: text/html; charset=UTF-8');
require_once 'config.php';
if($_GET['type'] == 'country'){
$result = mysql_query("SELECT *
FROM table
WHERE name LIKE '%".strtoupper($_GET['name_startsWith'])."%'
LIMIT 8");
$data = array();
while ($row = mysql_fetch_array($result)) {
array_push($data, $row['name']);
}
echo json_encode($data);
}
?>
auto.js
$('#country_name').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'country'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
}
});
},
autoFocus: true,
minLength: 0
});
You are missing the php in the HTML and if your server isn't set up for short open tags- may cause an issue, and as shown in the comments - there should not be any html content before the header declaration.
should be:
<?php
header("Content-Type: text/html; charset=iso-8859-1");
?>
I am developing mobile app using jquery mobile framework and I would like to change page content using javascript and ajax but I don't get the expected result.Could you help me please.
Here is the code :
connection.php
<?php
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$db="mobileapp";
$conn=mysql_connect($dbhost,$dbuser,$dbpass) or die("Could not connect");
mysql_select_db($db);
?>
index1.php
<?php
include 'connection.php';
$fetch="SELECT * from users";
/**
$result=mysql_query($query) or die(mysql_error());
//while($person=mysql_fetch_array($result)){
$person=mysql_fetch_array($result)
echo json_encode($person);**/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['id'] = $row['id'];
$row_array['username'] = $row['username'];
$row_array['city'] = $row['city'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
//}
?>
index.html
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> </script>
<script type="text/javascript" src="global.js">
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Railway Station</h1>
</div><!-- /header -->
<div data-role="content">
<input type="button" value="Refresh" id="submit" data-icon="refresh" /></br>
<ul data-role="listview" id="list"> </ul>
<script id="source" language="javascript" type="text/javascript">
$(document).live('pageinit',function (event) {
$.ajax({
url: 'index1.php',
data:"",
dataType: 'json',
success: function(rows)
{
for(var i=0;i<rows.length;i++)
{
var row = rows[i];
var id = row[0];
var name= row[1];
var city= row[2];
$('#list').append("<li>id:"+id+"Name:"+name+"City:"+city+"</li>");
}
};
});
});
</script>
</div>
</div>
<div data-role="footer">
<h1>©AmeyPat.All Rights Reserved.</h1>
</div><!-- /footer -->
</body>
</html>
finally I made some change in the code and all went ok but I found a strange behaviour.
Below is the code:
<!DOCTYPE html>
<html>
<head>
<title>Bugs Administration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
var content;
$(document).bind('pageinit',function (event) {
$.ajax({
url: 'inc/getbugs.php',
data: "",
dataType: 'json',
success: function(data)
{
for (var i = 0; i < data.length; i++) {
content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' data-iconpos='right'><h3> " +
data[i].errorcode + ' - ' + data[i].title+ "</h3>" + "<ul data-role='listview' id='noth'>"
content = content +
'<li>Project: ' + data[i].project+ '</li>' +
'<li>type: ' + data[i].type + '</li>' +
'<li>Status: ' + data[i].status + '</li>' +
'<li>Severity: ' + data[i].severity + '</li>' +
'<li>Browser: ' + data[i].browser + '</li>' +
'<li>Creation date: ' + data[i].creationdate + '</li>'
content = content + '</ul>'; content = content + "</div>";$("#set").append( content );
}
$("#set").enhanceWithin();
}
});
});
</script>
</head>
<body>
<div data-role="page" id="bugs">
<header data-theme="a" data-role="header">
<h1> </h1>
</header>
<div class="Main" data-role="content">
<h3>Lista de Errores</h3>
<div data-role="collapsible-set" id="set"><div>
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<p>(c) Copyright 2014</p>
</footer>
</div><!-- /page -->
<div data-role="page" id="news">
<header data-theme="a" data-role="header">
<h1> </h1>
</header>
<div class="Main" data-role="content">
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<p>(c) Copyright 2014</p>
</footer>
</div><!-- /page -->
</body>
</html>
When I run this in Chrome, the bugs appears normally but a minute after the application repeats the action added them twice
I tried different combinations but I don't know what's happenning with this
hi i have a html file which use ajax for loading contents from other html files in the same server. for some reason it does not work?? i have no clue as i am new to ajax.
here is the index.html(default home page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head><body><div id="rounded">
<img src="img/top_bg.gif" alt="top" /><div id="main" class="container">
<h1>ajax example</h1>
<h2>ajax jquery</h2>
<ul id="navigation">
<li>Page_1</li>
<li>Page2</li>
<li>Page_3</li>
<li>Page_4</li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>
</ul>
<div class="clear"></div>
<div id="pageContent">
it is a test</div>
</div><div class="clear"></div>
<img src="img/bottom_bg.gif" alt="bottom" /></div>
</body>
</html>
script.js(for adding hash in the url and enable back button and also loading content)
ar default_content = "";
$(document).ready(function () {
checkURL();
$('ul li a').click(function (e) {
checkURL(this.hash);
});
default_content = $('#pageContent').html();
setInterval("checkURL()", 250);
});
var lasturl = "";
function checkURL(hash) {
if (!hash) hash = window.location.hash;
if (hash != lasturl) {
lasturl = hash;
if (hash == "")
$('#pageContent').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url) {
var datastring = url.replace('#', '');
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'datastring=' + datastring,
dataType: "html",
async: false,
success: function (msg) {
if (parseInt(msg) != 0) {
$('#content').html(msg);
$('#loading').css('visibility', 'hidden');
}
}
});
}
and load_page.php
<?php
$url = $_REQUEST['datastring'];
echo $url;
if(file_exists(''.$url.'.html')){
echo file_get_contents(''.$url.'.html');
}
else{
echo 'There is no such page!';
}
?>
need help! as you can see when the ajax calls the "pagecontent" div loads the content from the requested page, but nothing happens here! what am i doing wrong?
Looks like you have "#content' in the ajax response handler... should be '#pageContent' to match the div id. That is:
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').css('visibility', 'hidden');
}
}