I am trying to render a listview on a second page using jquery.mobile.
I am using a single HTML with multiple "pages".
<div data-role="page" id="foo">
List
</div>
<div data-role="page" id="bar">
<div id="ListDiv">
<ul id="listview" data-role="listview" data-inset="true">
</ul>
</div>
</div>
<!--application UI goes here-->
<script type="text/javascript">
$("#loadList").click(function(){
$.getJSON(
"http://localhost/index.php/api/list",{format: "json"},
function(data){
var output = '';
$.each(data, function(key, val) {
output += '<li>' + val +'</li>';
});
$('#listview').append(output).listview('refresh');
});
});
But the problem now is when I click the #loadList button, it does take me to the #bar page, however, it doesn't seem $("#loadList").click() gets executed, because the list doesn't show up on the #bar page. Namely, nothing gets appended to #listView.
Any thoughts?
First there's a problem in this code, $.getJSON loading logic is false. Change page can not be used in a same time with $.getJSON.
There are 2 ways you can make this work:
Remove onclick event and load your data during second page initialization:
$(document).on('pagebeforeshow', '#bar', function(){
$.getJSON(
"http://localhost/index.php/api/list",{format: "json"},
function(data){
var output = '';
$.each(data, function(key, val) {
output += '<li>' + val +'</li>';
});
$('#listview').append(output).listview('refresh');
});
});
});
Unfortunately there's a problem with this solution. Used page event is not going to wait for $.getJSON, so in some cases your listview will be empty when page loads and content will suddenly appear. So this solution is not that great.
Second solution is remove href="#bar" attribute from the button but leave a click event. When $.getJSON action is successful the use changePage function and load next page. In case there's a problem with accessing second page listview store your result (In this ARTICLE you will find how, or HERE) and append it again during a pagebeforeshow event of a #bar page.
I made you a working jsFiddle example: http://jsfiddle.net/Gajotres/GnB3t/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
Load JSON data
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<h2>Simple list</h2>
<ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JS :
$(document).on('pagebeforeshow', '#index', function(){
$('#populate-button').on('click',function(e,data){
$.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
dataType: "jsonp",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
success: function (result) {
ajax.jsonResult = result;
$.mobile.changePage("#second");
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
});
});
$(document).on('pagebeforeshow', '#second', function(){
ajax.parseJSONP(ajax.jsonResult);
});
var ajax = {
jsonResult : null,
parseJSONP:function(result){
$('#movie-data').empty();
$('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
$('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
$('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
$('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
$('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');
$('#movie-data').listview('refresh');
}
}
You have id="loadList)", that is, with a closing parenthesis in
List
Maybe this is causing your problem?
Related
I am creating a student ID card and then I am creating a button below it to give an option to the user to download the ID card as PDF.
My ID card div is as follows:
<!doctype html>
<html>
<head>
<title>Admin Registration</title>
<script src="js/jquery.min.js"></script>
<script src="js/show_message.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type=\"text/javascript\">
$(document).ready(function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('receipt-outer').html(), 15, 15, {
'width': 170,\n" +
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body>
<div class='receipt-outer'>
<div class="receipt-inner">
<div class='idcard_heading'><p>Student ID Card</p></div>
<div class='clear'></div>
<div class='receipt_details'>
<div class='idcard_heading1'>
<div class='id_pic'>
<div class='id_pic_inner'>
<img src='images/pic"+fno+".jpg' height='120px' width='140px'><br>
<img src='images/sign"+fno+".jpg' height='50px' width='140px'>
</div>
<table id='id_table'>"+
<tr><th>Name : </th><td>"+s_fname+" "+s_mname+" "+s_sname+"</td></tr>
<tr><th>Course Name : </th><td>"+cname+"</td></tr>
<tr><th>Course code : </th><td>"+ccode+"</td></tr>
<tr><th>Commence of course : </th><td>"+st_from+"</td></tr>
<tr><th>End of course : </th><td>"+till+"</td></tr>
<tr><th>Timing : </th><td>"+ctiming+"</td></tr>
</table>
</div><br>
<div style='height:30px; margin-top:20px; margin-right:20px;'>
<span style='float:right;'>Issuing Authority</span></div>
<div id='editor'></div>
</div>
</div>
</div><br><br>
<button id='cmd'>Download </button>
</div>
</body>
</html>
I want to download the part of the div starting from the div class="receipt-outer" to the end in pdf format, just excluding the download button.
So I imported jspdf.min.js file and created a script which listens to the click event and then downloads the div as pdf. But I am getting the above mentioned error in the console whenever I hit the download button.
Please tell me where have I gone wrong. Why is it not downloading my file as pdf
dompdf might be what you are looking for:
Available here:
https://github.com/dompdf/dompdf
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$("body").ready(function() {
$.ajax({
url : "helloworld.txt",
dataType: "text",
success : function (data) {
$(".slider").html(data);
}
});
});
});</script>
I want this code to get HTML code from a .txt file and add it in here:
<div class="slider"> <!-- News Slider --> </div>
The txt file contains the following:
<div class="callbacks_container">
<ul class="rslides" id="slider">
<li>
<h2>Zeah</h2>
<h3>New continent, 50% expansion</h3>
</li>
<li>
<h2>Sailing</h2>
<h3>Sail around the world</h3>
</li>
<li>
<h2>2016</h2>
<h3>Christmas event coming to an end</h3>
</li>
</ul>
</div>
The function above doesn't work and I can't find a way to fix this.
You missed a few braces at the end and the URL should be /helloworld.txt
The / is importamt
I suggest using syntax highlighting.
<script type="text/javascript">
$(document).ready(function() {
$("body").ready(function() {
$.ajax({
url : "/helloworld.txt",
dataType: "text",
success : function (data) {
console.log("executed");
$(".slider").html(data);
}
});
})})
</script>
I have a simple HTML page with a table containing multiple rows. Each row has a cell with a hyperlink to another HTML page named "photos.html". Currently the "photos.html" page displays every single image linked to from the main page. I would like to change this so that if the user clicks a hyperlink on the main page, the "photos.html" page is opened but only the images relating to the specific row are displayed.
Here is a simplified example of what I am trying to accomplish:
<HTML>
<HEAD>
</HEAD>
<BODY>
Link 1 <!-- Open "photos.html" with Link 1 images only -->
Link 2 <!-- Open "photos.html" with Link 2 images only -->
</BODY>
</HTML>
Is this possible in HTML?
Use the Jquery
$("a").click(function(event){
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
alert( $(this).attr("src") );
});
}
});
});
Update
</html>
<head>
<script src="code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$("a").click(function(event){
var anchor=$(this);
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
//var img='<img id="theImg" src="'+($(this).attr("src"))+'" />';
anchor.next("div.images").append($(this));
});
}
});
});
});
</script>
</head>
<body>
Link 1 <!-- Open "photos.html" with Link 1 images only -->
<div class="images">
</div>
Link 2 <!-- Open "photos.html" with Link 2 images only -->
<div class="images">
</div>
</body>
</html>
data object containing the page's html code.
In this line alert( $(this).attr("src") ); you can access all the elements.
For example : Get all DIV tags
$("div", data).each(function() {
alert( $(this).attr("id") );
});
I have looked through the older posts regarding this problem but did not find the solution to my problem.
I have 2 REST services on my computer, 1 for login and 2nd for sending a list items.
I am able to connect and login using the login webservice .
My second webservice is called after the login and it provides JSON data in following form..
[{"oid":101,"summary":"this is my first order"},{"oid":102,"summary":"this is second order"}]
I want to parse this JSON string and create a list of "oid" and then if I click on 1st item i should see the "summary" on a new page. When i hit the back button i want to call the service again so the list refreshes.
here is the code i tried.
<script>
$.getJSON('http://192.168.2.36:8080/phoneservlet/getOrders', function(data){
var output = '';
$.each(data, function(index, value){
//add each value to the output buffer (we also have access to the other properties of this object: id, start, and end)
output += '<li>'+ value.oid +'</li>';
});
//now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list)
$('#your-orders').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');`
});
</script>
And this is the for list
<div data-role="page" id="currentorders">
<div data-role="content" id="data">
<ul data-role="listview" id="your-orders" data-divider-theme="b" data-inset="true">List of Orders</ul>
</div>
The problem is that my list does not get populated. I see an empty List with just the title of my list which is "List of Orders"
I am new to jquery so i still have not figured out how i can show the summary on a new page..
I think that you might missed the following access rule in config.xml file:
<access origin="*" />
1) For first issue you need to check get json url
2) Second issue show the summary on a new page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<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" id="currentorders">
<div data-role="header">
<h1>Orders</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="your-orders" data-divider-theme="b" data-inset="true"></ul>
</div>
</div>
<div data-role="page" id="summary">
<div data-role="header">
Back
<h1>Summary</h1>
</div>
<div data-role="content" id="content">
</div>
</div>
</body>
<script>
$('#currentorders').live("pageshow", function(){
// Here obj get using $.getJSON function, I have done direct using your json object only for example
var obj = [{"oid":101,"summary":"this is my first order"},{"oid":102,"summary":"this is second order"}];
var list = "";
$.each(obj, function(key, value){
list += '<li class="row">'+value.oid+'</li>';
})
$('#your-orders').html(list).trigger('create');
$('#your-orders').listview('refresh')
})
$('#currentorders li a').live("click",function(){
var content = $(this).attr("data-title");
$("#summary #content").html(content);
$.mobile.changePage( "#summary", { transition: "slide", changeHash: false });
})
$('#summary #back').live("click",function(){
$.mobile.changePage( "#currentorders", { transition: "slide", reverse: true, changeHash: false });
})
</script>
</html>
You cannot connect to an IP address through a PhoneGap Application as these cannot be whitelisted, you can only make CORS requests to domains whitelisted in your config: http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html
I'm having trouble getting click events from list items. In this page:
http://bec-systems.com/list-click.html
The first the entries in the list fire click events. However, if I dynamically add 3 more events by pushing the "Refresh Update List" button, the next 3 list entries do not generate click events.
Appreciate any suggestions as to how I can make this work, or generally improve the code.
Thanks,
Cliff
Code is also listed below:
<!DOCTYPE html>
<html>
<head>
<title>Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#refreshUpdateButton").on("click", function(event, ui) {
console.log("refreshUpdateButton")
versions = ["0.3", "0.4", "0.5"]
for (var i=0; i < versions.length; i += 1) {
$("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>');
if ($("#updateVersionsList").hasClass('ui-listview')) {
$("#updateVersionsList").listview("refresh");
} else {
$("#updateVersionsList").trigger('create');
}
}
})
$('[id^=updateVersionItem]').on("click", function(event, ui) {
console.log("updateVersion, selected = " + $(this).attr('id'));
})
});
</script>
</head>
<body>
<!-- Software update page -->
<div data-role="page" id="software-update-page">
<div data-role="header">
<h1>Software Update</h1>
</div><!-- /header -->
<div data-role="content">
<h1>Select Software version:</h1>
<ul data-role="listview" id="updateVersionsList">
<li><a id="updateVersionItem-0">0.0</a></li>
<li><a id="updateVersionItem-1">0.1</a></li>
<li><a id="updateVersionItem-2">0.2</a></li>
</ul>
<br>
<a data-role="button" class="ui-btn-left" id="refreshUpdateButton">Refresh Update list</a>
</div><!-- /content -->
</div>
</body>
</html>
Use this form of .on() (per comments below).
$(document).on("click", '[id^=updateVersionItem]', function(event, ui) {
console.log("updateVersion, selected = " + $(this).attr('id'));
})
Example: http://jsfiddle.net/saluce/YaAEJ/
Otherwise, whenever you dynamically add the new elements, you need to attach the click event to those items.
Assuming the following code:
function doThisOnClick(event, ui) {
console.log("updateVersion, selected = " + $(this).attr('id'));
}
$('[id^=updateVersionItem]').on("click", doThisOnClick);
You can either unbind the handler and reattach to all matching items:
$('[id^=updateVersionItem]').off("click", doThisOnClick);
$('[id^=updateVersionItem]').on("click", doThisOnClick);
Or just dynamically add it to the new items once you add it:
$("#updateVersionsList").append('<li><a id="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>').on("click", doThisOnClick);
create a new function and call it for default and dynamic elements
<a onclick="myfunction()">