I have extensively searched on google and stackoverflow for this and didn't find any solution.
I am dynamically creating nested collapsibles and in the innermost layer there is a list view .My collapsibles are getting stlyed but not the list.
Comparing to other questions on the stackoverflow , this is diff as the multilevel hierarchy is generated while parsing the received json from the string.
Please have a look at the code and help me to style the list elements.
<div data-role="page" id="pageone">
<div data-role="header">
<h1>My items</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role = "collapsible-set" id="set">
<div>
Javascript:
<script>
var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';
console.log(jsons);
var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
$.each(value, function(key, value){ //Runs for each commodity
commodity = key;
var data1 = value;
$(document).on("pageinit", function() {
nextId++;
content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";
$.each(data1, function(key, value){
$.each(value, function(key, value){
variety = key;
content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
'<ul data-role="listview" id="noth">';
for(var i=0, len=value.length; i < len; i++){
grade = value[i];
content=content+'<li>'+grade+'</li>';
}
content = content + '</ul>';
content = content + "</p></div>";
});
});
content = content +"</p></div>";
$("#set").append( content );//.collapsibleset('refresh');
$("#set").enhanceWithin();
});
});
});
</script>
Working example: http://jsfiddle.net/eL9qL/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<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.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div data-role = "collapsible-set" id="set">
<div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';
console.log(jsons);
var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
$.each(value, function(key, value){ //Runs for each commodity
commodity = key;
var data1 = value;
$(document).on("pageinit", function() {
nextId++;
content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";
$.each(data1, function(key, value){
$.each(value, function(key, value){
variety = key;
content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
'<ul data-role="listview" id="noth">';
for(var i=0, len=value.length; i < len; i++){
grade = value[i];
content=content+'<li>'+grade+'</li>';
}
content = content + '</ul>';
content = content + "</p></div>";
});
});
content = content +"</p></div>";
$("#set").append( content );//.collapsibleset('refresh');
$("#set").enhanceWithin();
});
});
});
Solution:
You should use .enhanceWithin(); function if you want to enhance your content correctly. Remember, you are using two different widgets but you are enhancing only one of them. This function will enhance everything added dynamically. Of course this function works only on jQuery Mobile 1.4 +. If you are using older jQuery Mobile version just tell me and I will make a necessary change.
Related
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
I am new to javacript. I used an API for implementing custom search feature. But in my search page results show only after I enter the first search key. If I enter another search key, the results for the second key don't show up until I refresh the page.
How can I get the results to auto-update when entering more characters into the search box?
HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function display() {
document.location = "contentpage.html";
}
$(document).ready(function () {
$("#submit").click(searchAPI);
});
</script>
</head>
<body>
<input type="text" id="search1" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" >
<p id="desc"> </p>
<p></p>
</div>
</body>
</html>
My JS Code:
function searchAPI(){
var key= $("#search1").val();
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=' + key + ' &format=json&pretty=1&callback=?', function(data) {
var htmlContent = '<ul>';
for (var i = 0; i < data.RelatedTopics.length; i++) {
var desc = data.RelatedTopics[i].Text;
var url = data.RelatedTopics[i].Icon.URL;
var link = data.RelatedTopics[i].FirstURL;
document.getElementById('link').href = link;
var y = document.getElementById("link");
y.innerHTML = link;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:block'/> " +
"<p id='desc'>" + desc + "</p>" + "<a target='_blank' id='link' href=" + link + " >go to website</a></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
Can anyone help me to solve this issue...Thanks in advance.
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.
This is my html code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="questionsPage" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Questions</h1>
</div>
<div data-role="content">
<div id="questions_list" data-role="collapsible-set" data-theme="a" data-content-theme="d" data-inset="false"></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/questions_list.js"></script>
</body>
</html>
and this is question_list.js:
$('#questionsPage').live('pageshow', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'api/questions.json?id=' + id, function(data) {
questions = data;
$.each(questions, function(index, question) {
$('#questions_list').append('<div data-role="collapsible" id="section_' + question.id + '">' +
'<h2>' + question.question + '<input type="checkbox" id="checkbox_' + question.id + '" /></h2>' +
'<p>test</p></div>');
$('#section_' + question.id).collapsible();
});
});
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Well, i can see the divs with the checkbox.
But when i click on the checkbox, the div is collapsed and the checkbox is not being checked.
What i am trying to is, when i click on the checkbox, it would be checked.
And when i click anywhere else, only the div would collapse without the checkbox being checked.
Thank you very much!
Right after:
$('#questions_list').append('<div data-role="collapsible" id="section_' + question.id + '">' +
'<h2>' + question.question + '<input type="checkbox" id="checkbox_' + question.id + '" /></h2>' +
'<p>test</p></div>');
Insert:
// This will simply stop the check box from allowing its parent to be clicked (collapsed) while the checkbox itself is clicked
// I havn't tested, but should work
$('#checkbox_' + question.id).on("click", function(e) { e.stopPropagation(); });
I can't get <div class="inner"> to append correctly so it wraps:
It should be:
<div class="module">
<div class="<h2>...</h2>
<div class="inner">
...
...
...
</div><!-- end .inner-->
</div><!-- end .module-->
Instead, when I inspect in Chrome developer tools, it has the closing tag next to it:
<div class="inner"></div>
Here's the script:
<!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" />
<title>NDM Test</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script>
$(document).ready(function () {
$.get('feed.xml', function (feed) {
$('.module').append('<h2><span>Dynamic heading</span></h2>');
$('.module').append('<div class="inner">');
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
var html = '<div><h3>' + title + '</h3>';
html += '<ol>'
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
$('.module').append($(html));
$('.module').append('</ol></div>');
});
$('.module').append('</div>'); /* this should close .inner??*/
$('.module').append('<p>More </p>');
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="module">
</div>
</div>
</body>
</html>
Thanks in advance :)
try this code,
var html ='<div class="inner">';
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
html += '<div><h3>' + title + '</h3>';
html += '<ol>';
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
html += '</ol></div>';
});
html +='</div>';
$('.module').append($(html));