Response title
This is preview!
Move this topic
Dynamic json listview trouble
in jQuery Mobile
•
4 years ago
Hi 
here is my code.
----------------------------------
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Page Title</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" />
- <link rel="stylesheet" href="css/app-3.css">
- <script src="js/jquery-1.9.1.min.js"></script>
- <script src="jquery.mobile-1.3.2/jquery.mobile-1.3.2.js"></script>
- <title>test 4</title>
- </head>
- <body>
- <div data-role="Page" id="mainPage">
- <div data-role="header"><h1>Welcome!</h1></div>
- <div data-role="content">
- <ul data-role="listview" data-inset="false" data-filter="true" id="movieList">
- </ul>
- </div>
- </div>
- <script>
- $(document).ready(function(){
- $.ajax({
- url: "data/alarsin.json",
- dataType: "json",
- success:function(data){
- $(data.products).each(function(key, value){
- let records = '<li>'+value.product+'</li>';
- $('ul').append(records);
- });
- }
- });
- });
- </script>
- </body>
- </html>
--------------------------------------
output is not in listview..
how can i get to work in listview with auto refresh as well. please help.
kristtee
1
Replies(20)
Re: Dynamic json listview trouble
4 years ago
You need to enhanceWithin.
After line 31
After line 31
- $('ul').enhanceWithin();
Also, you should not use
- $(document).ready(function(){
with JQM. You should use http://api.jquerymobile.com/pagebeforecreate/ .
- $(document).on("pagebeforecreate","#mainPage",function(){
Also, jQuery Mobile 1.3.2 is ancient, you should use 1.4.5.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
Thanks for your time and help. I shall do the changes and let you know.
Kristtee
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
Hi
I have tried, yet it did not work. I just want to load make a simple master/detail page using JQM with external json data. I did not know it is so difficult. Would it be still possible for you to help me please.
json
----------------
{
"products":[
{
"product": "G-32",
"pfor": "All sorts of dental troubles."
},
{
"product": "Aloes Compound",
"pfor": "Female Infertility - Primary or Secondary; Sub fertility, Menstrual Disorders"
},
{
"product": "Aluretic",
"pfor": "Improves function of: Kidneys, Heart, Liver & Lungs. Regulates urine elimination & excretory functions."
},
{
"product": "Arjin",
"pfor": "Comprehensive approach for better control of hypertension (essential) and associated multiple symptoms."
},
{
"product": "Ayapon",
"pfor": "Oral Herbal Haemostatic and Coagulant in all Bleeding condition."
},
{
"product": "Bangshil",
"pfor": "Genito-Urinary Tract Infections, Burning Micturition, Bladder Disturbances."
},
{
"product": "Dekofcyn",
"pfor": "Safe Ayurvedic remedy for all types of Cough."
},
{
"product": "Fortege",
"pfor": "Male Infertility, stress and strain etc."
},
{
"product": "Leptaden",
"pfor": "Leptaden stimulates, stabilizes, improves the quantity of Breast milk and improves and maintains the quality of Breast Milk."
},
{
"product": "Myron",
"pfor": "Makes the patient Fresh, Alert and Energetic."
},
{
"product": "R. Compound",
"pfor": "Rheumatic, Arthritic, Collagen diseases."
},
{
"product": "Siledin",
"pfor": "A Safe Herbal Formulation without drawbacks of modern psychotropic drugs."
},
{
"product": "Sooktyn",
"pfor": "Quick & Predictable results in HYPERACIDITY Syndrome."
}
]
}
---------------------------------
thanks man
kristtee
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
You pasted the wrong HTML. that’s a demo from the net.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
If you want to use 1.5.0…This works
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>enhanceWithin</title>
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
- <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
- </head>
- <body>
- <div data-role="Page" id="mainPage">
- <div data-role="header"><h1>Welcome!</h1></div>
- <div data-role="content">
- <ul data-role="listview" data-inset="false" data-filter="true" id="movieList">
- </ul>
- </div>
- </div>
- <script>
- $.ajax({
- url: "data/alarsin.json",
- dataType: "json",
- success:function(data){
- var records = data.products.map(function( value){
- return '<li>'+value.product+'</li>';
- }).join("");
- $(records).appendTo('#movieList').enhanceWithin();
- }
- });
- </script>
- </body>
- </html>
JΛ̊KE
Re: Re: Dynamic json listview trouble
4 years ago
Re: Re: Dynamic json listview trouble
4 years ago
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
Hi, thank you so much. You made it so simple. Being a retired doctor, having spent 5 weeks of time to put together a dynamic listview, it seems to have taken a few hours for you. I shows your expertise. Great, thank you. I still have one question. rightnow, your demos does't behave like normal listview - it is without rollover effects. And is there a way to dispaly a prodct detail page when clicked on an item? 
thank you
kristtee
Re: Re: Dynamic json listview trouble
4 years ago
Your original code just puts value.product into the list. What do you want in there? Links to something?
JΛ̊KE
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
Hi
The json file has product title and product for. Now, product title is in listview. when i click on a title in the listview, it should show what the product for [ which is also in the same json data file].
Thank you
Kristtee
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
Or do you want it like some other page that you found?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
Hi
here is the json
------------------------
{
"products":[
{
"product": "G-32",
"pfor": "All sorts of dental troubles."
},
{
"product": "Aloes Compound",
"pfor": "Female Infertility - Primary or Secondary; Sub fertility, Menstrual Disorders"
},
{
"product": "Aluretic",
"pfor": "Improves function of: Kidneys, Heart, Liver & Lungs. Regulates urine elimination & excretory functions."
},
{
"product": "Arjin",
"pfor": "Comprehensive approach for better control of hypertension (essential) and associated multiple symptoms."
},
{
"product": "Ayapon",
"pfor": "Oral Herbal Haemostatic and Coagulant in all Bleeding condition."
},
{
"product": "Bangshil",
"pfor": "Genito-Urinary Tract Infections, Burning Micturition, Bladder Disturbances."
},
{
"product": "Dekofcyn",
"pfor": "Safe Ayurvedic remedy for all types of Cough."
},
{
"product": "Fortege",
"pfor": "Male Infertility, stress and strain etc."
},
{
"product": "Leptaden",
"pfor": "Leptaden stimulates, stabilizes, improves the quantity of Breast milk and improves and maintains the quality of Breast Milk."
},
{
"product": "Myron",
"pfor": "Makes the patient Fresh, Alert and Energetic."
},
{
"product": "R. Compound",
"pfor": "Rheumatic, Arthritic, Collagen diseases."
},
{
"product": "Siledin",
"pfor": "A Safe Herbal Formulation without drawbacks of modern psychotropic drugs."
},
{
"product": "Sooktyn",
"pfor": "Quick & Predictable results in HYPERACIDITY Syndrome."
}
]
}
------------------
here, product is list in the listview. when i click on an item in the listview, it opens a dynamic page with 'pfor' - product detail with a back button. Thats it. Similar to that of a Mastter/Detail page
Thank you
kristtee
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
It’s nice that you know what that means. It means nothing to me.Similar to that of a Mastter/Detail page
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
That’s not jQuery Mobile. JQM likes to take the full width for a list view.
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
Hi
here is my static page.
-------------------------
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Fruits</h1>
</div><!-- /header -->
<div>
<ul data-role="listview">
<li><a data-transition="slide" href="#Alligator">Alligator</a></li>
<li><a data-transition="slide" href="#buf">Buffolow</a></li>
<li><a data-transition="slide" href="#cat">Cat</a></li>
<li><a data-transition="slide" href="#dog">Dog</a></li>
<li><a data-transition="slide" href="#ele">Elephant</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="Alligator">
<div data-role="header">
<a href="#mainpage" data-role="button" data-transition="slide" data-direction="reverse" data-icon="Home">Home</a>
<h2>Welcome</h2>
</div>
<div role="main" class="ui-content">
<p>Alligator</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
<div data-role="page" id="buf">
<div data-role="header">
<a href="#mainpage" data-role="button" data-transition="slide" data-direction="reverse" data-icon="Home">Home</a>
<h2>Welcome</h2>
</div>
<div role="main" class="ui-content">
<p>Bufflow</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer --> </div>
<div data-role="page" id="cat">
<div data-role="header">
<a href="#mainpage" data-role="button" data-transition="slide" data-direction="reverse" data-icon="Home">Home</a>
<h2>Welcome</h2>
</div>
<div role="main" class="ui-content">
<p>Cat</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
<div data-role="page" id="dog">
<div data-role="header">
<a href="#mainpage" data-role="button" data-transition="slide" data-direction="reverse" data-icon="Home">Home</a>
<h2>Welcome</h2>
</div>
<div role="main" class="ui-content">
<p>Dog</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
<div data-role="page" id="ele">
<div data-role="header">
<a href="#mainpage" data-role="button" data-transition="slide" data-direction="reverse" data-icon="Home">Home</a>
<h2>Welcome</h2>
</div>
<div role="main" class="ui-content">
<p>Elephat</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
</body>
</html>
----------------------------
I want to make it with dynamic data from json data here
{
"products":[
{
"product": "G-32",
"pfor": "All sorts of dental troubles."
},
{
"product": "Aloes Compound",
"pfor": "Female Infertility - Primary or Secondary; Sub fertility, Menstrual Disorders"
},
{
"product": "Aluretic",
"pfor": "Improves function of: Kidneys, Heart, Liver & Lungs. Regulates urine elimination & excretory functions."
},
{
"product": "Arjin",
"pfor": "Comprehensive approach for better control of hypertension (essential) and associated multiple symptoms."
},
{
"product": "Ayapon",
"pfor": "Oral Herbal Haemostatic and Coagulant in all Bleeding condition."
},
{
"product": "Bangshil",
"pfor": "Genito-Urinary Tract Infections, Burning Micturition, Bladder Disturbances."
},
{
"product": "Dekofcyn",
"pfor": "Safe Ayurvedic remedy for all types of Cough."
},
{
"product": "Fortege",
"pfor": "Male Infertility, stress and strain etc."
},
{
"product": "Leptaden",
"pfor": "Leptaden stimulates, stabilizes, improves the quantity of Breast milk and improves and maintains the quality of Breast Milk."
},
{
"product": "Myron",
"pfor": "Makes the patient Fresh, Alert and Energetic."
},
{
"product": "R. Compound",
"pfor": "Rheumatic, Arthritic, Collagen diseases."
},
{
"product": "Siledin",
"pfor": "A Safe Herbal Formulation without drawbacks of modern psychotropic drugs."
},
{
"product": "Sooktyn",
"pfor": "Quick & Predictable results in HYPERACIDITY Syndrome."
}
]
}
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
http://home.jejaju.com/play/EnhanceWithin/demo5.html is the same kind of code as before, with pages instead.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Dynamic json listview trouble
4 years ago
HI
WOW. THIS IS EXACTLY WHAT I AM AFTER. YOU HAVE MAKE IT. I AM SO THANKFUL. YET WHEN I TRIED IT DID NOT WORK. CODE UNDER.
---------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dynamic-Page-With-Listview</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div data-role="Page" id="mainPage">
<div data-role="header"><h1>Welcome!</h1></div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="false" data-filter="false" id="productList">
</ul>
</div>
<div data-role="footer"><h4>© All Rights Reserved 2018</h4></div>
</div>
<script>
$.ajax({
url: "data/alarsin.json",
dataType: "json",
success:function(data){
var records = data.products.map(function(value){
return '<li><a href="#'+value.product.replace(/ /g,"_")+'" data-role="page">'+value.product+'</li>';
}).join("");
$(records).appendTo('#productList')
$('#productList').listview("refresh")
var pages = data.products.map(function( value){
return `<div data-role="page" data-rel="back" id="${value.product.replace(/ /g,"_")}" >
<div data-role="page">
<div data-role="header">
<a href="#mainPage" data-type="button">Back</a>
<h2>${value.product}</h2>
</div>
<div role="main" class="ui-content">
<p>${value.pfor}</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>© All Rights Reserved. 2018</h4>
</div>
</div>
</div>`
}).join("");
$(pages).appendTo("body").enhanceWithin()
}
});
</script>
</body>
</html>
------------------------------------
I tried to put page but it did't work well. please tell where was i wrong. One more thing, in the script ---
<a href="#'+value.product.replace(/ /g,"_") what does this do?
Thank you so much for your help.
kristtee
Leave a comment on krish11's reply
Re: Dynamic json listview trouble
4 years ago
What did you change? It looks like mine. Did you put it on a server?
Since jQuery has a problem with a space in an id, that replace changes spaces to underscores.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to krish11's question
{"z2935432":[14737000007819162,14737000007817209,14737000007817211,14737000007816245,14737000007817289,14737000007817291,14737000007816259,14737000007813635,14737000007820259],"z2950240":[14737000007813443,14737000007813491,14737000007813493,14737000007813495,14737000007813497,14737000007813571,14737000007813609,14737000007813611,14737000007813615,14737000007813619,14737000007813643,14737000007813681]}
Statistics
- 20 Replies
- 3511 Views
- 1 Followers