I am new with ionic framework.Currently i am working on ionicsidemenu app. I want to show records according to date, having date as heading and respective date having multiple records.
For this i have two web services one is for heading date another is for date-wise records. In my HTML file i have two ng-repeat one is for display heading date. Now i am not able to understand how to get records of particular date as date has to be sent to web service for getting records.
I have tried this:
<div ng-repeat="d in dates track by $index">
<h2>d.edate</h2>
<div ng-init="datewiserecords(d.edate);" >
<div ng-repeat="n in res1 track by $index" class="text-white" >
</div></div></div>
but its not working.Please help me.
I am not sure what you are looking for, but the way I understand the question makes me to give you a solution as below:
My Solution:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="get_date in dates">
<h2>{{get_date.date}}</h2>
<h4>{{get_date.data}}</h4>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates = [{date:"1",data:"One"},{date:"2",data:"Two"},{date:"3",data:"Three"}];
});
</script>
</body>
</html>
Hope This is helpful
Related
I have a JSP page, with some info pulled from Mongo DB. The outcome HTML page has UTF-8 encoding. Occasionally this char is being pulled from the DB: –, the en dash. When the page displayed in browser - this char is being displayed OK. But when in Android Webview - I see a question mark instead of it.
Any ideas how to solve it without touching the Mongo DB?
EDIT
Short HTML outcome:
<head>
<meta charset="utf-8">
....
</head>
...
<div class="photo_description">
<h1>
<span class="text-ellipsis">
NY – The sunrise
</span>
</h1>
<div class="button">
<div class="btn-txt">
View
</div>
</div>
...
</div>
...
Notice the dash in the <span> element.
I found an answer here:
${fn:escapeXml(photoTitle)}
I am working on a web app where, I have a Common popup as a direct child of , it contains few popups created dynamically from the JSON. There are two separate pages having user input form. JSON file is updated using the form data.
I am updating the contents of the popups using the updated JSON in the form submit function. I am facing the problem to refresh the popup contents on form submit. I have to restart the APP to see the changes on popups.
I tried triggering 'refresh' and 'create' events on popups in form submit function, but still no result.
Moreover even if I set the contents of popup div to be empty using $('#popup-div').empty() in submit function, I can still see the popup. Don't know if this is the caching problem.
Please advice for some solution, Thanks
Example Code:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
Watch Data
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
Watch Data
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
Here is the working demo
$( "#common-popup #data-popup")
.enhanceWithin().popup()
.on('popupafterclose', function(event) {
$(this).remove();
});
JS Fiddle Demo
The dynamic popup created should be removed after its closed. Creating it again and again makes multiple popups..but you are still referring to the first one, which created the problem.
I made a simple example using the android plugin for printplugin
Here the plugin:
https://github.com/EionRobb/phonegap-print-plugins/tree/master/Android
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Prueba de Impresion</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="printplugin.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function imprime(){
var html = document.getElementById("printHTML").innerHTML;
window.plugins.printPlugin.print(html,
function(result) {
alert("print ok");
},
function(result) {
if (!result.available){
alert("no printing available");
}
else{
//Localised error description
alert(result.error);
}
}
);
}
</script>
<div data-role="page" id="page">
<div data-role="header">
<h1>Prueba de Impresion</h1>
</div>
<div data-role="content">
<button data-icon="gear" onClick="imprime();">Imprimir</button>
Contenido</div>
<div id="printHTML">
<div style="color: red;">
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
</div>
<div style="color: green; page-break-before:always;">
<p>In the Propontis, as far as I can learn, none of that peculiar substance called BRIT is to be found, the aliment of the right whale. But I have every reason to believe that the food of the sperm whale—squid or cuttle-fish—lurks at the bottom of that sea, because large creatures, but by no means the largest of that sort, have been found at its surface. If, then, you properly put these statements together, and reason upon them a bit, you will clearly perceive that, according to all human reasoning, Procopius's sea-monster, that for half a century stove the ships of a Roman Emperor, must in all probability have been a sperm whale.</p>
</div>
<div style="color: blue; page-break-before:always;">
<p>They were not their families, nor their wives, nor their servants; the relationship was peculiar, and so unlike anything known to us that it is most difficult to describe. All property among the green Martians is owned in common by the community, except the personal weapons, ornaments and sleeping silks and furs of the individuals. These alone can one claim undisputed right to, nor may he accumulate more of these than are required for his actual needs. The surplus he holds merely as custodian, and it is passed on to the younger members of the community as necessity demands.</p>
</div>
</div>
<div data-role="footer">
<h4>Pie</h4>
</div>
</div>
</body>
</html>
the application runs and displays the message: no printing available, and in logcat I see the following message:
Error: Status=undefined Message=Class not found at file:///android_asset/www/phonegap.js:473
I have installed 1.4.4 send2printer
if someone could tell me I'm doing wrong
Thanks to all in advance
I have multiple pages in my one html file.
I trying to implement the pageinit event handler on the second data-role="page".
So I declared pageinit inside it's specific data-role="page".
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.
Please help me how to go about it.
Pageinit should run only once, it was made to be just like document ready.
If you want your code to run every time page is visited then use pageshow or pagebeforeshow.
Read more about it here.
Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.
I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.
Document pageinit fires more than once on iOS (jQueryMobile)
I am new to web dev and android and am trying to develop a web app with phone gap and also using jquery mobile for that.
I am trying to view and display my webpage within the mobile screen with headers and footers also added through jquery code.
The code which i have written to display the webpage does display for eg http://www.msn.com but when i give for eg http://46.137.... (obviously thats a incomplete address) it does not work . Bytheway the alert is shown in both the cases. Below is the code
<div id="cnt" data-role="content">
<script>
$("#cnt").load("http://46.137....", function() {
alert('Load was performed.');
});
</script>
<!-- <iframe src="http://46.137...."></iframe> -->
</div><!-- /content -->
Hey #LivingThing try like this,
...
<div id="video1" data-role="content">
<iframe id="cnt" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
...
<script>
function l() {
document.getElementById('cnt').src = "http://www.cnn.com/US/index.html"
}
$(window).load(function() {
l()
alert('Load was performed.');
});
</script>
All this into <div data-role="page">
I hope this helps. :)