I have created a sample demo application which has following html page.
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function alert1(p1) {
alert("P1 is "+p1);
}
</script>
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="Sample_JS.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="sample_js/sample_js.nocache.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.nameList = [];
$scope.ShowAlert = function () {
$scope.nameList.push($scope.nameFieldContainer);
$window.alert("Hello Angular : "+$scope.nameFieldContainer);
}
});
</script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div ng-app="MyApp" ng-controller="MyController">
<h1>Web Application Starter Project</h1>
<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td data-ng-model="nameFieldContainer" id="nameFieldContainer"></td>
<td id="test" ></td>
<td id="sendButtonContainer" ng-click="ShowAlert()"></td>
</tr>
<tr>
<td> <input type ="text" data-ng-model="nameFieldContainer"> </td>
<td colspan="2" style="color:red;" id="errorLabelContainer"></td>
</tr>
<tr>
<td><input type = "button" name="click" ng-click="ShowAlert()"></td>
</tr>
</table>
<table align="center">
<tr ng-repeat = "name in nameList">
<td colspan="2" style="font-weight:bold;">{{name}}</td>
</tr>
</table>
</div>
</body>
</html>
My gwt controller class as below
package com.google.client;
import com.google.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Sample_JS implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";
/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Button sendButton = new Button("Add");
final TextBox nameField = new TextBox();
nameField.setText("GWT User");
final Label errorLabel = new Label();
// We can add style names to widgets
sendButton.addStyleName("sendButton");
// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
RootPanel.get("errorLabelContainer").add(errorLabel);
// Focus the cursor on the name field when the app loads
nameField.setFocus(true);
nameField.selectAll();
// Add a handler to close the DialogBox
closeButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
dialogBox.hide();
sendButton.setEnabled(true);
sendButton.setFocus(true);
}
});
// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {
/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
//sendNameToServer();
MyTestJS.hasPopupBlocker(nameField.getValue());
}
/**
* Fired when the user types in the nameField.
*/
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
sendNameToServer();
}
}
// Add a handler to send the name to the server
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);
}
}
I am trying to call anularjs function from below native js method by using gwt button component, but i can't.
package com.google.client;
public class MyTestJS {
public static native boolean hasPopupBlocker(String name)/*-{
if (!name){
name = "Please enter name";
}else{
name = "Hello "+ name ;
}
return $wnd.ShowAlert();
}-*/;
}
How can I called angularJs ShowAlert() function from gwt (by clicking on button from java code or by other way) ?
please suggest.
any help will be appreciable......
thanks in advance.
Related
So I successfully displaying 1 database from my firebase using limitToLast function. Here is the webpage look like
Kinda curious how to display all of my databases (all childs from selected parent) from firebase console using javascript?
List of my database in firebase that I want to display
and here is my code below:
firebase.initializeApp(config);
var order = firebase.database().ref("order");
order.on("value", function(snapshot) {
console.log(snapshot.val());
}, function (error) {
console.log("Error: " + error.code);
});
var submitOrder = function () {
var orderId = $("#orderOrderId").val();
var shipping = $("#orderShipping").val();
var subtotal = $("#orderSubtotal").val();
var total = $("#orderTotal").val();
};
order.limitToLast(1).on('child_added', function(childSnapshot) {
order = childSnapshot.val();
$("#orderId").html(order.orderId)
$("#shipping").html(order.shipping)
$("#subtotal").html(order.subtotal)
$("#total").html(order.total)
$("#link").attr("https://wishywashy-179b9.firebaseio.com/", order.link)
});
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
<!-- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> -->
<!-- Load the jQuery library, which we'll use to manipulate HTML elements with Javascript. -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Load Bootstrap stylesheet, which will is CSS that makes everything prettier and also responsive (aka will work on all devices of all sizes). -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<!-- <script type = "text/javascript" src = "data.js"></script> -->
<body>
<script type = "text/javascript" src = "data.js"></script>
<div class="container">
<h1>Merchant Portal</h1>
<h3>Order Lists</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Order ID</th>
<th>Shipping Price</th>
<th>Subtotal</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<!-- This is empty for now, but it will be filled out by an event handler in application.js with the most recent recommendation data from Firebase. -->
<td id="orderId"></td>
<td id="shipping"></td>
<td id="subtotal"></td>
<td id="total"></td>
</tr>
</tbody>
</table>
</body>
</html>
You will need to generate a new <tr> for each order. A very simple way to do this is simply generate the DOM elements in your on('child_added' callback:
var table = document.querySelector("tbody");
order.on('child_added', function(childSnapshot) {
order = childSnapshot.val();
var tr = document.createElement('tr');
tr.appendChild(createCell(order.orderId));
tr.appendChild(createCell(order.shipping));
tr.appendChild(createCell(order.subTotal));
tr.appendChild(createCell(order.total));
table.appendChild(tr);
});
As you can see, this code creates a new <tr> for each child/order, and populates that with simple DOM methods. It then adds the new <tr> to the table.
This code uses a simple helper function to handle the repetitious creating of <td> elements with a text node in them:
function createCell(text) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(text));
return td;
}
I am trying to use AngularJs with ASP.NET MVC - this is my first attempt.
Index.html
#model string
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" ng-init="courses = [{'name':'first'},{'name':'second'},{'name':'third'}]">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="course in courses">
<td>{{ course.name }}</td>
</tr>
</tbody>
</table>
_Layout.cshtml
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Above works fine and grid is displayed with Name as header and first, second and third as 3 rows. So my next step is to use
courses = #Html.Raw(Json.Encode(Model))
instead of
courses = [{'name':'first'},{'name':'second'},{'name':'third'}]
CourseController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
namespace AngularJsMvc.Controllers
{
public class CoursesController : Controller
{
// GET: Courses
public ActionResult Index()
{
return View("Index", "", "[{'name':'first'},{'name':'second'}, {'name':'third'}]"); //This works fine when used with #Html.Raw(Model) in index.html
//return View("Index", "", GetCourses()); //This doesn't work when used with with #Html.Raw(Model) in index.html
}
public string GetCourses()
{
var courses = new[]
{
new Course { Name = "First" },
new Course { Name = "Second" },
new Course { Name = "Third" }
};
var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
return JsonConvert.SerializeObject(courses, Formatting.None, settings);
}
}
public class Course
{
public string Name { get; set; }
}
}
This works fine if I use
return View("Index", "", "[{'name':'first'},{'name':'second'},{'name':'third'}]");
But if I use
return View("Index", "", GetCourses());
Then, below is the error I get. Please help - I have been struggling for almost entire day yesterday. I tried with or without Json.Encode
angular.min.js:123 Error: [$parse:ueoe]
http://errors.angularjs.org/1.6.4/$parse/ueoe?p0=courses%20%3D
at angular.min.js:6
"<div class="container" ng-init="courses = " [{\"name\":\"first\"},{\"name\":\"second\"},{\"name\":\"third\"}]""="">"
The following worked for me:
<div class="container" ng-init="courses = #Newtonsoft.Json.JsonConvert.DeserializeObject(Model)">
This also works:
<div class="container" ng-init="courses = #HttpUtility.HtmlDecode(Model)">
It's all about how angular treats the object it tries to parse and since you're passing an HTML decoded string it will treat as a string and therefore it won't be able to iterate threw it.
Hi I am learning WebApi in VS2015. I have some experience in MVC4 so i know concepts of Routing in MVC$. I am following http://www.c-sharpcorner.com/uploadfile/65794e/web-api-with-angular-js/ website. I am trying to display some data from database as below.
public class TestController : ApiController
{
// GET: api/Test
public WebAPI db = new WebAPI();
public IEnumerable<LoginTbl> Get()
{
return db.LoginTbls.AsEnumerable();
}
}
WebApiConfig.cs as below.
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{Test}/{id}",
defaults: new { id = RouteParameter.Optional }
);
Service.Js code.
app.service("APIService", function ($http) {
this.getSubs = function () {
return $http.Get("")
}
}
);
I am not sure what to pass in $http.Get("")
This is my index.cshtml
#{
}
<style>
table, tr, td, th {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>
<h2>Welcome to Sibeesh Passion's Email List</h2>
<body data-ng-app="APIModule">
<div id="tblSubs" ng-controller="APIController">
<table>
<tr>
<th>UserName</th>
<th>Password</th>
</tr>
<tbody data-ng-repeat="sub in subscriber">
<tr>
<td>{{sub.UserName}}</td>
<td>{{sub.Password}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/APIScripts/Module.js"></script>
<script src="~/Scripts/APIScripts/Service.js"></script>
<script src="~/Scripts/APIScripts/Controller.js"></script>
I am using AngularJs as clientscript. I am not sure how to run the above application as i can see two RouteConfig.cs and WebAPiconfig.cs. Someone tell me which file i should change in order to run the application? Thank you...
In the tutorial you're following, they don't actually say what they named the API controller, but it is called SubscriberController. The route matches up with api/ and then the word before the word Controller - so, api/Subscriber in the tutorial, and api/Test in your case.
In your angular routing configuration, your code would become $http.get("api/Test");
In order to return JSON from Web API, we'll need this line of code in your WebApiConfig.cs :
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
Hello I want to create simple search table of data.
I want to highlight if data matched user type input. I done it by doc below since I'm starting using angular i wonder is there any better way? Some custom filter maybe ?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<style type="text/css">
table td{
padding: 5px;
}
.true{
color: green;
background-color: blue;
}
</style>
</head>
<body>
<div ng-controller="filtrController">
<div>{{search}}<hr/></div>
<input type="text" ng-model="search"/>
<table>
<thead>
<tr>
<td>Name:</td>
<td>Param1:</td>
<td>Param2:</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="foo in data | filter:search">
<!--<td ng-class="{true:'true',false:''}[search === foo.Name]">{{foo.Name}}</td>-->
<td ng-class="customFilter(search,foo.Name)">{{foo.Name}}</td>
<td ng-class="customFilter(search,foo.param1)">{{foo.param1}}</td>
<td ng-class="customFilter(search,foo.param2)">{{foo.param2}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('filtrController',function ($scope)
{
$scope.customFilter = function(search,searchTo)
{
if(search != '')
{
if(searchTo.indexOf(search) > -1) return 'true';
return '';
}
};
$scope.data =
[
{
Name:'name foo1',
param1:'param of foo1',
param2:'param 2 of foo1'
},
{
Name:'name foo2',
param1:'param of foo2',
param2:'param 2 of foo2'
},
{
Name:'name sfoo3',
param1:'param of foo3',
param2:'param 2 of foo3'
},
]
});
</script>
</body>
You just need to custom filter like this:
$scope.customFilter = function(data, searchFor) {
if (angular.isUndefined(data) || angular.isUndefined(searchFor)) return data;
angular.forEach(data, function(item) {
if(angular.equals(item, searchFor)) item.highlighted = true;
});
return data;
}
and html like this
<tr ng-repeat="foo in data | customFilter:{something:1}" ng-class="{highlighted: foo.highlighted}">
Update:
So, I just need to explain my approach in more details. You have data some of which is needed to be highlighted. So you need to set new property in your data and highlight it (using css and ng-class) if property set to true.
For setting this property you can create custom filter that takes your data array, changes it internal state by setting this property and return this array as result. This is what I implemented for you.
Update#2
Same behaviour as ng-filter needed. So here it is.
I am tring to conditionally set the colors of data elements in a table based on their value using ng-style. Each row of data is being generated using ng repeat.
So i have something like:
<tr ng-repeat="payment in payments">
<td ng-style="set_color({{payment}})">{{payment.number}}</td>
and a function in my controller that does something like:
$scope.set_color = function (payment) {
if (payment.number > 50) {
return '{color: red}'
}
}
I have tried a couple different things. and even set the color as a data attribute in the payment object, however it seems I cant get ng-style to process data from the data bindings,
Does anyone know a way I could make this work? Thanks.
Don't use {{}}s inside an Angular expression:
<td ng-style="set_color(payment)">{{payment.number}}</td>
Return an object, not a string, from your function:
$scope.set_color = function (payment) {
if (payment.number > 50) {
return { color: "red" }
}
}
Fiddle
use this code
<td style="color:{{payment.number>50?'red':'blue'}}">{{payment.number}}</td>
or
<td ng-style="{'color':(payment.number>50?'red':'blue')}">{{payment.number}}</td>
blue color for example
It might help you!
<!DOCTYPE html>
<html>
<head>
<style>
.yelloColor {
background-color: gray;
}
.meterColor {
background-color: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('ngStyleApp', []);
app.controller('ngStyleCtrl', function($scope) {
$scope.bar = "48%";
});
</script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
<div class="yelloColor">
<div class="meterColor" ng-style="{'width':bar}">
<h4> {{bar}} DATA USED OF 100%</h4>
</div>
</div>
</body>
</html>