i am working on mobile app using phonegap.Here i am trying to display my database values into a list in my html page called nextpage.html.But i couldn't insert it as a links. could you pls help me to insert it as a links. when i click on those links it will display the details of that partcular data into a new page.
nextPage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<form id="nextForm" >
<ul data-role="listview" data-inset="true" id="category">
<li>
</li>
</ul>
</form>
</div>
</div>
</body>
</center>
</html>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
//$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++)
{
//pls do something
category = response[i];
categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
}
},
error: function()
{
alert("error");
}
});
});
category_id and category_name are my db values. i want the details of category_name by clicking on it. i failled to do so. pls help me...
my output is
You could add the anchor tag inside the li element:
var a = $('<a>').attr('href', '#').html(category.category_name);
categoryList.append($('<li>').attr('id', category.category_id).append(a));
replace your append with this:
$('#category').append('<li id="' + category.category_id + '">' + category.category_name + '</li>');
not the cleanest solution but will work
Related
iam working on mobile app. in my controller i created a json array and iam trying to display the array values into a list in my html page. i want show the list when html page is automatically loaded.
actually my json array contains 'category_id' $ 'category_name' and iam looking forward to next page when click on the 'category_name'
nextPage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="category">
<li></li>
</ul>
</div>
</div>
</body>
</center>
</html>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
//do something pls
},
error: function()
{
alert("error");
}
});
});
categorylist.php
function get_categorylist()
{
$cat=$this->categorylist_model->get_cat();
echo json_encode($cat);
}
my json array
[{"category_id":"1","category_name":"Academic Analysis"}, {"category_id":"2","category_name":"Teaching Analysis"},{"category_id":"3","category_name":"Skill Analysis"}]
You need to use the response in the $.ajax success function. This response object should be your json object and can therefore easily be accessed via the specified properties category_name and category_id.
$.ajax({
// ...
success: function(response){
// do something with the json response! E.g. generate a new list item and append it to the list.
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++){
category = response[i];
categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
}
},
});
I have parsed the json data in TableView. The code for table view is given below-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Cars</h1>
Back
</div>
<div data-role="main" class="ui-content" style="margin-top:-20px;">
<h2></h2>
<ul data-role="listview" id="listid">
</ul>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$.getJSON("json/details.json",function(data)
{
var html="";
for(var d in data.cars)
{
for(var i in data.cars[d])
{
html+= "<li><a href=''>"+data.cars[d][i].model+" <p>"+data.cars[d][i].doors+"</p></a></li>";
}
}
$("#listid").append(html);
})
.done(function()
{
$("#listid").listview().listview("refresh");
});
});
</script>
</div>
</body>
</html>
Now, When i click on first row, it should separate the Indica and Four Doors in Two test View, Like this-
Please give me suggestion. Thanks in Advance !!
html+= "<li><a href=''><span>"+data.cars[d][i].model+" </span><p>"+data.cars[d][i].doors+"</p></a></li>";
$('li a').on('click', function(event){
$('#model').text($(this).children('span').text());
$('#door').text($(this).children('p').text());
})
You could pass the text in a function on onClick.
Example:
<a onClick="cars(carName, carDoors)"/>
function cars(name, doors){
$('#carView').html(carName); //set the text for the car view
$('#doorView').html(carDoors);
}
I have a problem in accessing server side value into my jQuery function. I gave my localhost path (NewsRecord.php) as the AJAX URL (it is working) but if I give server path it is not working... I don't know what is the problem -- the server URL prints the JSON data properly. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>News Letter</h1>
</div>
<div data-role="content" id="level" ></div>
<div data-role="footer"></div>
<h4>Powered by Handigital</h4>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$.ajax({
url:'NewsRecord.php',
dataType:'json',
success:function(output) {
for(var u=0;u < output.length;u++)
{
$('#level').append('<div>Title :'+output[u].Title+'<br>Source :<a href='+output[u].links+'>'+output[u].Source+'</a><br>Category :'+output[u].Category+'</div><hr>');
}}
);
});
</script>
</body>
</html>
You need to place your for() loop in a function. This function can be given to the success property of the ajax method, where it will be called when the ajax call is complete (and is successful):
$(document).ready(function () {
$.ajax({
url: 'NewsRecord.php',
dataType: 'json',
success: function(output){
for (var u = 0; u < output.length; u++) {
$('#level').append('<div>Title :' + output[u].Title + '<br>Source :<a href=' + output[u].links + '>' + output[u].Source + '</a><br>Category :' + output[u].Category + '</div><hr>');
}
}
});
});
I wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?
The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.
Here is my exact _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/Tweets.js")
#RenderSection("Scripts",false)
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script src="../../Scripts/Tweets.js" type="text/javascript"></script>
</head>
<body>
#{
if (ViewBag.IsAdmin ?? false)
{
<div class="controlPanel">
New Post
#Html.ActionLink("Sign Out", "DeAuth", "Account")
</div>
}
else
{
<div class="controlPanel">
#Html.ActionLink("Log In", "Login", "Account")
</div>
}
}
<header>
<img src="#Href("~/Content/Images/gizmologo.png")" alt="Gizmo | Blog Solutions" title="Gizmo | Blog Solutions"/>
</header>
<section>
<div id="topSep" class="sep"></div>
<aside>
<img id="picture" width="100" height="100" src="#Href("~/Content/Images/dsykes.jpg")" alt="Picture" title=":P" />
<div id="twitterHeader">D.Sykes on Twitter</div>
<div id="tweets">
</div>
<div id="feedLink">RSS Feed</div>
</aside>
<div id="main">
#RenderBody()
</div>
<div id="bottomSep" class="sep"></div>
</section>
<footer>
<div id="copyright">Copyright © 2013, Gizmo Bloging</div>
</footer>
</body>
</html>
And here is the Tweets.js Script that wont load...
$(document).ready(function () {
//$.getJSON("https://twitter.com/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?", // this is the OLD Twitter json call!
$.getJSON("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?",
function (data) {
$.each(data, function (i, item) {
ct = item.text;
mytime = item.created_at;
var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
$("#tweets").append('<div>' + ct + " <small><i>(" + mydate + " at " + mytime + ")</i></small></div>");
});
});
});
I dont know what could be the problem, my Jquery is initialized properly and so is the script but i dnt get anything.. Can someone pleeease help!?
Working demo: http://jsfiddle.net/JTrs7/
Cool, if you are trying to fetch data cross domain try using JSONP
Helpful links: (JSONP vs JSON)
What are the differences between JSON and JSONP?
Sending JSONP vs. JSON data?
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
Hope it fits your needs :)
Sample code
$(document).ready(function () {
var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5&jsoncallback=";
$.ajax({
dataType: 'jsonp',
url: k,
success: function (data) {
console.log(data);
$.each(data, function (i, item) {
$("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text + "</div></div>");
})
}
});
});