Knockout js Grid view Is not showing up - javascript

i am new to Knockout.js. I was trying to execute the following code to see the grid view of data. i took most of the code from Official Knockout website examples. but console in google shows error!! output is blank.Any suggestions?
The data array is passed as parameter in the pageGridModel().
<%# page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO- 8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="knockout-3.4.0.js"></script>
</head>
<body>
<div data-bind='simpleGrid: gridViewModel'>
</div>
<script type="text/javascript">
var initialdata=[
{name:"aaaa1",price : 101,sales :110},
{name:"aaaa2",price : 102,sales :210},
{name:"aaaa3",price : 103,sales :310},
{name:"aaaa4",price : 104,sales :410},
{name:"aaaa5",price : 105,sales :510},
{name:"aaaa6",price : 106,sales :610},
{name:"aaaa7",price : 107,sales :710},
];
var pageGridModel= function(items){
this.items=ko.observableArray(items);
this.addItem=function(){
this.items.push({name:"aaaa1",price : 101,sales :110});
};
this.sortItem=function(){
this.items.sort();
};
this.jumpToFirstPage=function(){
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel =new ko.simpleGrid.viewModel({
data :this.items,
columns:[{headerText:"NAME" ,rowText:"name"},
{headerText:"PRICE" ,rowText:"price"},
{headerText:"SALES" ,rowText:"sales"},
],
pageSize:4
});
};
ko.applyBindings(new pageGridModel(initialdata));
</script>
</body>
</html>

You are missing the knockout.simpleGrid.1.3.js script reference in your head tag. simpleGrid is an optional plugin that is not included with the main KO library.
Here is it working in jsfiddle.
<div data-bind='simpleGrid: gridViewModel'>
</div>

Related

why my php function is not executed by jquery $.get

I have a JavaScript in HTML file that call a php file in a $.get jquery API. When I run the HTML file on my computer where WAMP is running (for php), I can't get the result of php function on the screen,neither the text of h1 tag nor the the output of print function. Thanks for a lot your answer.
Regards
Here is my html file AJAXTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<script type = "text/javascript"
src = "jquery-1.3.2.min.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
alert("init passage 2" + " Andy");
$.get("http://localhost/greetUser.php", { "userName": "Andy" }, processResult);
alert("processresult passage" + data);
$("#output").html(data);
}
function processResult(data, textStatus){
alert("processresult passage" + data);
$("#output").html(data);
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
and here is my php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title>greetUser.php</title>
</head>
<body>
<div>
<h1>Réponse</h1>
<?php
$userName = $_REQUEST["userName"];
print "<p>Salut, $userName!</p> ";
?>
</div>
</body>
</html>
It looks like everything should largely be working, but one thing that I can see that would break it, is that you have the
alert("processresult passage" + data);
$("#output").html(data);
being called inside of the init() function, directly after the $.get call.
At this point in the execution, the 'data' variable does not exist and using it will cause an error and halt all javascript from continuing, as the execution has to wait until the request is returned to be able to process it (in the processResult function, which you appear to be handling correctly)
Removing those lines, I think should solve your problem.
Try this:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/greetUser.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
UPDATE
I don't understand the downvote, but if you try this, it works:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/file.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
PHP file:
<?php
$userName = $_POST["username"];
print "<p>Salut, $userName!</p> ";
?>

How to display INPUT TYPE on Selection?

I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})

open a simple pop up window with my string contents

I used jquery getJSON method to get the two strings from java servlet. one string contains the type of data like simple string, XML and HTML and another string contains data. I need to open a popup window with different size based on contents.
Below the code used to get the strings.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
var applid=$('#applicationid').val();
var applname=$('#appname').val();
$.getJSON('ActionServlet',
{
appid:applid,
appname:applname
},function(data) {
var errortype = data.errortype;
var errorMsg = data.errorMsg;
});
});
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="applicationid"/>
<input type="text" id="appname"/>
<input type="button" id="submit" value="Ajax Submit"/>
<br/>
<div id="hello" title="Hello World!"></div>
</form>
</body>
</html>
You can user fancybox. It gives options for opening the passed html string check here
To open a new window you can use the window.open() function.
To display the XML as raw text, you need to escape the special characters.
Javascript does not have builtin function for it (like htmlentities() in php).
You can try the following code:
function htmlentities(str)
{
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}

Set jsp page as a div content in a javascript file

In my J2EE web application I've used Extjs. I am brand new to J2EE. There is a button(plan) in a layer.
Here is my javascript file code segment for creating a button in the layer.
contentE1 : 'tourPlanning', //my layer
title : 'Tour Planning',
items : [ new Ext.Button({
text : 'Plan',
handler : function() {
document.getElementById("mapView").innerHTML = '\TourPlan.jsp';
}
}),
What I want is I need to set a jsp page(TourPlan.jsp) as a content(for my mapView div-I have a Google map view in my page). The output becomes, it sets the map view div content to Tourplan.jsp.
My TourPlan.jsp file(as an example) if like this.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tour Plan</title>
</head>
<body>
<h1>Plan Your Tor</h1>
<!-- More Content Here -->
</body>
</html>
I am new to all of these thing, so I would be much appreciated if anyone could be so kind enough to explain how should I do such a thing.
You can try like this
<div id="mapView" style="display:hidden;">
<%# include file="TourPlan.jsp" %>
</div>
<script>
contentE1 : 'tourPlanning', //my layer
title : 'Tour Planning',
items : [ new Ext.Button({
text : 'Plan',
handler : function() {
document.getElementById("mapView").style.display="block";
}
}),
</script>
Hope it will help you.

Javascript variable not refreshing in Phonegap application

I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link.
The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string.
I have tried clearing the variable to fix this but no luck.
Is this a platform limitation or am i doing something wrong?
Code is below
<!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>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
ideaSpace.innerHTML=idea;
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
Thanks
Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try:
<!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>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
//ideaSpace.innerHTML=idea;
ideaSpace.removeChild(ideaSpace.firstChild);
ideaSpace.appendChild(document.createTextNode(idea));
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>

Categories