I have been trying for a while now to figure out how to generate an listview using json in jquery mobile. I have found a lot of examples on the net, but I'm fairly new with json and can't figure out what I am doing wrong?
Here is the page generating the json( test.php):
$matches = array(
array('title' => 'Portugal Open', 'id' => 23),
array('title' => 'Mallorca Invitational', 'id' => 87));
echo $json = json_encode($matches);
And here is how I'm trying to generate the listview:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function(){
$.getJSON("test.php",function(data) {
$.each(data.posts, function(i,data){
$('#matches').children('ul').append('<li>'+data.title+'</li>');
});
}
);
return false;
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" id="matches">
<ul data-role="listview">
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I don't get anything in my listview and I can't figure out why!?
Please help and thanks in advance :-)
Try this code,
$(document).on('pageshow', '#page', function(){
$("#page div:jqmData(role=content) #matches ul").empty();
$.getJSON("test.php",function(data) {
$.each(data.posts, function(i,data){
var html="";
html+="<li><a href='#'>"+data.title+"</a></li>";
$("#page div:jqmData(role=content) #matches ul").append(html);
});
$("#page div:jqmData(role=content) #matches ul:visible").listview("refresh");
});
return false;
});
have fun!!
Related
I am unsure why the input is not updating the name variable as undefined is always displayed
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="refscript.jsx" type="text/jsx"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And this is my jsx file named refscript.jsx
var RefComponent = React.createClass({
display: function(){
var name = this.inputdemo.value;
document.getElementById('dispName').innerHTML = name;
},
render:function(){
return(
<div>
<h2>Name: <input type="text" ref ={input => this.inputdemo = input}/></h2><br/>
<button onClick={this.display}>Click</button>
<h1>Hi...<span id='dispName'></span></h1>
</div>
);
}
});
React.render(
<RefComponent/>, document.getElementById('content')
)
I apologize for the poor formatting. Basically, "clientCount" is appearing as {{clientCount}} on my screen, rather than the integer '10'. Any ideas? Thank you!
var app = angular.module('metaDashboard', []);
/**This is for the meta-dashboard home page
*/
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
--------------------------------------------------------------------
<html lang="en" ng-app="app">
<body class="page-body" data-url="http://neon.dev" ng-app="app">
<div class="row" ng-controller="TotalNumberController">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num"> {{clientCount}} </div>
<h3>Clients</h3>
<p></p>
</div>
</body>
</html>
Your app is called metaDashboard not app, you should change your code to the following:
<html lang="en" ng-app="metaDashboard">
Also ensure that you have angular.js files included in your head section.
Full snippet:
var app = angular.module('metaDashboard', []);
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="metaDashboard">
<div ng-controller="TotalNumberController">
<h1>{{clientCount}}</h1>
</div>
</body>
</html>
I have also included this Plunker here for you demonstrating it working:
https://plnkr.co/edit/t80RjCqjmE3y9bOkESo0?p=preview
As an additional note, it may be best to use the ViewModel syntax rather than $scope which I believe is best practice and may help you if you ever nested your AngularJS controllers.
this is link of my code
http://plnkr.co/edit/8muxhJmvFiIqRJgzuT0O?p=preview
I am getting error
Uncaught Error: Unknown provider: $controllerProvider from productsApp
and I can't view json file in console
index.html
<!DOCTYPE html>
<html data-ng-app="productsApp" >
<head>
<meta charset="utf-8">
<script data-require="angularjs#1.3.6" data-semver="1.3.6" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script type="text/javascript" src="http://demos.amitavroy.com/learningci/assets/js/xml2json.js" charset="UTF-8"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script type='text/javascript' src="script.js"></script>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body >
<div ng-controller="products">
<div ng-repeat="product in products">
<div ng-repeat="platform in product ">
{{platform._type}}
</div>
</div>
</div>
</body>
</html>
product_js.js - js file for x2js
var productApp = angular.module("productsApp",[]);
productApp.factory('productFactory',function($http){
var factory = [];
factory.getProducts = function(){
return $http.get("operations_mapping.xml");
}
return factory;
});
productApp.controller('products',function($scope,productFactory){
$scope.products = [];
loadProducts();
function loadProducts(){
productFactory.getProducts().success(function(data){
mappingss = x2js.xml_str2json(data);
console.log(mappingss.mappings.platform);
$scope.products =mappingss.mappings.platform;
});
}
});
Looks like you have included multiple version of angular.js script on your page, retain the latest one(mentioned below) and remove the rest of the references.
<script data-require="angularjs#1.3.14" data-semver="1.3.14" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
Here is the Updated Plunker
product_js.js is not included in your html. Add <script type='text/javascript' src="product_js.js"></script>
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>