I am using jQuery mobile and Knockout.js to test the first example on http://knockoutjs.com/documentation/foreach-binding.html but nothing is displayed and error console of FireFox reveals this error:
Timestamp: 9/10/2012 1:13:16 PM
Error: NotFoundError: Node was not found
Source File: http:///kotest/Scripts/knockout-2.1.0.js
Line: 46
Note that this is the latest knockout-2.1.0.js downloaded today.
The code is below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
</head>
<body>
<h4>People</h4>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
I should mention that it works as expected if references to the jQuery mobile js files are deleted.
Update:
You can try the jQuery mobile pageinit function.
<script type="text/javascript" >
$(document).on('pageinit','[data-role=page]', function(){
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
});
</script>
include a div Tag with the data-role="page" binding from jquery mobile:
<div data-role="page" >
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
Your document is not in the ready state. Since you're using jQuery mobile, you'll want to listen for the pageinit event, then apply your KO bindings in that:
$(document).bind('pageinit', function() {
// Use KO here
});
Note that Daniel's answer suggests to use document.ready, however, that doesn't work in the jQuery mobile bits where page contents are loaded asynchronously via AJAX. Instead, you must use pageinit event.
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
I want to send a angularjs binded value which has mailid's seperated by , to mailto of anchor tag.
team.emails will have a single mail id or many mail id's seperated by comma.
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><a href='mailto:{{team.emails}}'</a></td>
</tr>
On clicking that column in the row should open outlook with the team email addresses in To part.
Kindly let me know if this is the correct approach.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
</head>
<body ng-app = "myapp" ng-controller="homeController">
<table style="width:100%">
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><p>
<a href="mailto:{{team.emails}}" target="_top">
Send Mail</a>
</p></td>
</tr>
</table>
</body>
<script>
angular.module('myapp', []).controller('homeController', ['$scope', function($scope){
$scope.teamsData = [{
name:'john',
emails:'xxx#gmail.com,yyy.gmail.com,zzz.gmail.com'
},
{
name:'mark',
emails:'lll#gmail.com,ppp.gmail.com,ooo.gmail.com'
}]
}])
</script>
</html>
I got a problem with js file. My js file is not linking to HTML file. Please help me.
HTML code:
"
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="repeaters.js"></script>
<link href = "Repeaters.css" type="text/CSS" rel="stylesheet">
</head>
<body ng-app="repeatModule"> <!-- root module-->
<div ng-controller="controlRepeater"> <!-- controller name-->
<div>
<table>
<thead>
<tr>ID </tr>
<tr> NAME</tr>
</thead>
<tbody >
<tr ng-repeat="product in products"> <!-- Great. Now let's add the repeat directive. It is important to understand that ngRepeat will repeat itself and its contents for each element in the collection. We must therefore apply it to the <tr> and not the <tbody>. -->
<td>{{product.id}} </td>
<td>{{product.name}} </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="oddrow">
</div>
</body>
</html> "
Below is my Angular js code:
This js file is not linking to HTML code. how can I debug this kind of issues?
> var myApp = angular.module('repeatModule', [])
.controller("controlRepeater", ["$scope", function ($scope) {
$scope.products = [
{id:1, name: "Hockey" }
{id:2, name: "cricket" }
{id:3, name: "pool" }
{id:4, name: "badminton"}];
}]);
Your array syntax is wrong, you need commas to separate your array items:
$scope.products = [
{id:1, name: "Hockey" },
{id:2, name: "cricket" },
{id:3, name: "pool" },
{id:4, name: "badminton"}
];
Once you fix this, it should work, see this codepen.
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
Currently i work on a project in asp classic, jquery, and html
Recently, i sucessfully convert a html file to a pdf using "from-html.js", but i got one question wich is:
How can i insert some images in the pdf that i create ? i searched for a long time now and i don't find the way to do it.
I tried to use addhtml.js or addimage.js mixed up with my actual code but it doesn't work.
there's what i have currently done
<title>Recapitulatif Commande</title>
<script type="text/javascript" src="./examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./dist/jspdf.min.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script src='./libs/Blob.js/Blob.js' type='text/javascript'></script>
<script src='./libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
<script src='./libs/png_support/zlib.js' type='text/javascript'></script>
<script src='./libs/png_support/png.js' type='text/javascript'></script>
<script src='./libs/deflate.js' type='text/javascript'></script>
<script src='jspdf.plugin.png_support.js' type='text/javascript'></script>
<script language="JavaScript">
$(document).ready( function(){
var doc = new jsPDF();
var specialElementHandlers =
{
'#editor': function (element, renderer)
{
return true;
}
};
$('#cmd').click(function ()
{
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers,
});
doc.save('RecapCommande.pdf');
});
});
</script>
<div id="mydiv">
<h2><center>Bonjour voici un recap des notes</center></h2>
<table id="table" width="100%" border="2px solid">
<thead>
<tr>
<th width="33%" align="center">date : </th>
<th width="33%" align="center">montant : </th>
<th width="33%" align="center">statut : </th>
</tr>
</thead>
</table>
</div> <!-- /container -->
<table id="table14" width="100%" >
<thead>
<tr>
<th width="33%" align="center"><button id="cmd" align="center" >Imprimer votre commande</button></th>
</tr>
</thead>
</table>
If you can help me, i would be so relieve, thanks
you will have to convert your table into a canvas then display it.First attach a hidden canvas to your div.Second copying your div into the hidden canvas.Third hide your table and unhide the canvas.fourth generate pdf.
<Script>
//first
$("#table").append('<div id="can" style="background-color:white" >
<canvas id="canvas" width="300" height="320" style="background-color:white"></canvas> </div>');
//second
canvg('canvas', $("#table").html());
//third
var im = document.getElementById('canvas');
im.style.display = 'block';
var create = document.getElementById('table');
create.style.display = 'none';
//fourth..call function for pdf generation
</Script>
Encode your images to base64, and insert the data blob into the img src area... i.e.:
<img src="data:image/jpeg;base64,/9j/4AA......9k=" />
I know this is an old post, however I've been dealing with this issue today and have found that base64 images are the only way the HTML to PDF conversion can output them.