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
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 been able to implement the same UI Logic for the Web App I found on this URL, and now I am stuck on the Backend Logic that generated the Merged images (i.e the Cropped Image and the placeholder image as seen on the page) and Renders it to the DOM.
As it is right now, my AJAX never resolves with the success callback, instead, it always resolves with the error callback and I have no clue what I am doing wrong, please?
How can I achieve exactly the same backend logic has seen from the web app in this URL:
https://rhapsodyofrealities.org/rhapathon/?
Using PHP, this is what I have so far for the Backend Logic.
Problem with this method is, it tries to output the image directly to the page:
$targetDir = "uploads/";
$fileName = $targetDir.'complete_'.time().".png";
if(isset($_POST['image'])) {
$placeholder = './rhapathon.jpeg';
$src = $_POST['image'];
list($width, $height) = getimagesize($src);
// $placeholder = imagecreatefromstring(file_get_contents($placeholder));
$placeholder = imagecreatefromjpeg($placeholder);
// $src = imagecreatefromstring(file_get_contents($src));
$src = imagecreatefrompng($src);
imagecopy($placeholder, $src, 200, 200, 0, 0, 300, 300);
header('Content-Type: image/png');
// $imgobj = array("img" => imagepng($placeholder, $fileName));
// $result = json_encode($imgobj);
// echo $result;
imagepng($placeholder);
// Free Memory
imagedestroy($placeholder);
imagedestroy($src);
}
?>
My HTML with the Entire UI and Client Logic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name=description content="Christ Embassy Kubwa Church">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Good Miracle Friday Crusade Flyer Generator</title>
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-reboot.min.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css"> -->
<link rel="stylesheet" type="text/css" href="./node_modules/croppie/croppie.css">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<!-- Header -->
<header class="container-fluid p-0 text-center rounded-0 m-0 mb-5">
<div class="jumbotron p-2 bg-info rounded-0 m-0">
<h1 class="font-weight-lighter display-5 text-white">GOOD MIRACLE FRIDAY CRUSADE</h1>
</div>
</header>
<!-- /Header -->
<div class="container">
<!-- Card -->
<div class="card mx-auto rounded-top rounded-bottom" style="overflow: hidden;">
<!-- Card-Head -->
<div class="card-heading bg-dark text-white p-2 lead font-weight-light">Create Avatar</div>
<!-- /card-Head -->
<!-- Card-Body -->
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
</div>
<!-- Col -->
<div class="col-md-4" style="padding-top:30px;">
<div class="mt-0 mb-5">
<strong>STEP 1 : Select Image and adjust to fit</strong>
<input type="file" id="upload" name="fileToUpload">
</div>
<div class="mt-0 mb-5">
<strong>STEP 2 : Upload Image and Download</strong>
<br>
<button class="btn btn-info upload-result">Upload Image</button>
</div>
</div>
<!-- /Col -->
<!-- Col -->
<div class="col-md-4">
<div id="upload-demo-i" style="background:url('./rhapathon.jpeg'); background-size: 300px 300px; width:300px;height:300px;margin-top:30px">
</div>
</div>
<!-- /Col -->
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script> -->
<script src="./node_modules/croppie/croppie.js"></script>
<!-- <script src="./node_modules/html2canvas/dist/html2canvas.min.js"></script> -->
<!-- <script src="./node_modules/canvas2image/canvas2image.js"></script> -->
<script src="./index.js"></script>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: {
width: 300,
height: 300,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
console.log('Uploading image');
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport',
}).then(function (resp) {
$.ajax({
url: "upload.php",
type: "POST",
data: {"image":resp},
dataType:'JSON',
success: function (data) {
console.log('response ='+data.img);
// html = '<img src="' + resp + '" />';
// $("#upload-demo-i").html(html);
html = '<img width="300px" src="' + data.img + '" /><button style="margin-top:20px; margin-bottom:100px" class="btn btn-danger upload-result">Download Avatar</button> <button style="margin-top:-50px; margin-bottom:100px" class="btn btn-info upload-result">Proceed to Rhapsody Official Website</button>';
$("#upload-demo-i").html(html);
},
error: function (err) {
console.error('Error occured: ', err);
}
});
});
});
// Remove alt attribute from image
window.onload = () => {
document.querySelector('.cr-image').removeAttribute("alt");
document.querySelector('.cr-slider').value="0";
document.querySelector('.cr-slider').focus();
};
</script>
</body>
</html>
after save image file add this lines:
$image_file = fopen($fileName, 'r');
$image_data = fread($image_file, filesize($fileName));
header("Content-type: application/json");
echo json_encode(['img' -> 'data:image/jpeg;base64,' . base64_encode($image_data) );
And if you have problem with merge images look at : Merge two PNG images with PHP GD library
I have an Ajax script on a PHP page which is to run a php script on clicking a button.
The code is as follows:
<script>
$('#signup-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsession.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtn').disabled = true;
document.getElementById("submitBtn").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
When I first open the web page the script isn't run, but if i click back and repeat the process the script executes without an issue. Does anyone know what is causing the issue?
Insert.php which runs this code is here:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/submit.js"></script>
<!-- /.website title -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CSS Files -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<style type="text/css">
body { background: white !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<!-- Colors -->
<link href="css/css-index.css" rel="stylesheet" media="screen">
<!-- <link href="css/css-index-green.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-purple.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-red.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-orange.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-yellow.css" rel="stylesheet" media="screen"> -->
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />
</head>
<div id="top"></div>
<div class="fullscreen landing parallax" style="background-image:url('images/fireworks.jpg');" data-img-width="2000" data-img-height="1333" data-diff="100">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- /.logo -->
<!-- /.main title -->
<h2 class="wow fadeInLeft">Thank you for submitting your details</h2>
<h2 class="wow bounce infinite">While you are here, why not apply for one of other fantastic products?</h2>
<?php
session_start();
include ("dbconnect.php");
// prepare and bind
$stmt = $conn->prepare("INSERT INTO wills (forename,surname,postcode,telno,email,ipaddress,capturedate,url,user) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssssssss", $forename, $surname, $postcode, $telno, $email, $ipaddress, $capturedate, $url, $user);
$forename = $_POST["forename"];
$surname = $_POST["surname"];
$postcode = $_POST["postcode"];
$telno = $_POST["telno"];
$email = $_POST["email"];
$ipaddress = $_SERVER['REMOTE_ADDR'];
$capturedate = date('Y-m-d H:i:s');
$url ="www.test.com";
$user ="testuser";
$_SESSION["forename"] = $forename;
$_SESSION["surname"] = $surname;
$_SESSION["postcode"] = $postcode;
$_SESSION["telno"] = $telno;
$_SESSION["email"] = $email;
$_SESSION["ipaddress"] = $ipaddress;
$_SESSION["capturedate"] = $capturedate;
$_SESSION["url"] = $url;
$_SESSION["user"] = $user;
echo "<br>"."Forename: ".$forename."<br>";
echo "Surname: ".$surname."<br>";
echo "Telno: ".$telno."<br>";
echo "Email: ".$email."<br>";
echo "IP Address: ".$ipaddress."<br>";
echo "Session User: ".$_SESSION["user"]."<br>";
if (!$stmt->execute()) {
echo $stmt->error;
} else {
}
$stmt->close();
$conn->close();
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">Back to Main Page</div>
<div class="col-md-12">
<!-- /.product 1 -->
<div class="col-sm-6 feat-list">
<i class="pe-7s-phone pe-5x pe-va wow fadeInUp"></i>
<div class="inner">
<h4>Grab a Mobile SIM</h4>
<p>With a SIM only contract, you get the all the benefits of an ongoing contract, without the additional high cost of a handset.
Short-term SIM only contracts give you freedom and flexibility. All the networks offer them from as little as 30 days, and you can then keep them rolling month-by-month
</p>
<form method="post" id="signup-form" autocomplete="off">
<div class="form-group">
<input type="submit" class="btn btn-success btn-block btn-lg" id="submitBtn" value="Apply for Mobile Sim?">
</div>
</form>
</div>
</div>
<!-- /.product 2 -->
<div class="col-sm-6 feat-list">
<i class="pe-7s-like2 pe-5x pe-va wow fadeInUp"></i>
<div class="inner">
<h4>Debt Plan</h4>
<p>Do you have more than £5,000 worth of debt?<br>
Do you need help to reduce the monthly payments?<br>
If so, find out if you qualify to write off up to 80% of your debt here</p>
<form method="post" id="signup-formdebt" autocomplete="off">
<div class="form-group">
<input type="submit" class="btn btn-success btn-block btn-lg" id="submitBtndebt" value="Get help now">
</div>
</form>
</div>
</div>
</div>
<!-- /.footer -->
<footer id="footer">
<div class="container">
<div class="col-sm-4 col-sm-offset-4">
<!-- /.social links -->
<div class="social text-center">
<ul>
<li><a class="wow fadeInUp" href="https://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a class="wow fadeInUp" href="https://www.facebook.com/" data-wow-delay="0.2s"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
<i class="pe-7s-up-arrow pe-va"></i>
</div>
</div>
</footer>
<!-- /.javascript files -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
new WOW().init();
</script>
</body>
<script>
$( document ).ready(function() {
$('#signup-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsession.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtn').disabled = true;
document.getElementById("submitBtn").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
<script>
$( document ).ready(function() {
console.log( "ready!" );
$('#signup-formdebt').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsessiondebt.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtndebt').disabled = true;
document.getElementById("submitBtndebt").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
</html>
I think I solved the issue and it has nothing at all to do with the AJAX. It actually appears to be an issue with the session variables. I moved the session variables on the insert.php right to the top before anything else and this makes it work as intended.
Thanks for your efforts guys
You should use a document.ready function. Here is a link to the jQuery version documentation : https://learn.jquery.com/using-jquery-core/document-ready/
I'm trying to use the Popup widget of Jquery Mobile 1.4.5 but I've got some problem when I try to load a external page in a Popup from a sub page. Here's my code:
Index.htm:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>IMDB</li>
<li>Test A</li>
<li>Test B</li>
</ul>
</div><!-- /page -->
</body>
</html>
list.php:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>Bangkok Dangerous
<li>Drive Angry
<li>Knowing
</ul>
</div>
</body>
<script language="javascript">
function loadPopup(url) {
$.ajax({
type: "GET",
url: url
}).done(function(data) {
$.mobile.activePage.append($(data)).trigger("create");
$("#popup1").popup().popup("open");
});
}
</script>
</html>
imdb.php:
<html>
<body>
<div data-role="popup" id="popup1" style="min-height:300px;width:80%;left:10%;right:10%;" class="ui-content">
Fermer
<?php
$imdbnumber = $_GET["imdbnumber"];
$movie_poster = "http://img.omdbapi.com/?apikey=xxxxxxxx&i=" . $imdbnumber . "&h=300";
$movie_details = json_decode(file_get_contents("http://www.omdbapi.com/?i=" . $imdbnumber . "&plot=full"));
echo "<div style='float:left;padding-right:20px;'><img src='" . $movie_poster . "' height=300></img></div>";
echo "<div><h3><b>" . $movie_details->Title . " (" . $movie_details->Year . ")</b></h3>" . $movie_details->Plot . "</div>";
?>
</div>
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</body>
</html>
When I load index.htm then click on IMDB link then try to load IMDB info for one of the listed movie, it doesn't work. If I load directly list.php then my Popup is working perfectly.
Something I'm doing wrong?
Thank you!
P.S.: I've tried with Colorbox but I get the same kind of result... :-/
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>