I am trying to learn the basics of server side Dart. When I hit the submit element on the HTML page, the screen is cleared and replaced with "hello." I am trying to keep all elements in place, and put the "hello" in the div place. I have not found any basic documentation on this, so I may be missing a lot here. Is there a straightforward way to do this?
Here is the Server code:
import 'dart:io';
Future main() async {
var server = await HttpServer.bind(
InternetAddress.loopbackIPv4,
8080,
);
await for (HttpRequest request in server) {
request.response
..write("hello")
..close();
}
}
Here is the HTML:
<form action="http://localhost:8080" method="GET">
<input type="text" id="name" value="name">
<input type="submit" value="submit">
</form>
<div id="output"></div> // I want the "hello" to go here
It's quite common to build web applications that pull in data from other web applications, initiated by logic that performs HTTP calls to third party services.
lets look at how we can use the inbuilt HttpRequest classes to make HTTP calls to external services.
index.html
<!DOCTYPE html>
<html>
<head>
<title>A Minimalist App</title>
</head>
<body>
<div id="output">Hi</div> // I want the "hello" to go here
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
main.dart
import 'dart:html';
void main() {
var response = await HttpRequest.getString('http://localhost:8080')
querySelector('#output').text = response;
}
For more info visit here
Thanks. :) , hope it helps.
Related
I am using FastAPI to render a jinja2 template using a simple get request
This is my template
<!-- list.html !>
<html>
<head>
<title>Item Details</title>
</head>
<body>
{% for item in items %}
<p>{{ item }}</p>
{% endfor%}
</body>
</html>
#app.get("/list_items?search_string={search_string}", response_class=HTMLResponse)
async def list_items(req: Request, search_string: str):
print(8*'*', list(search_string))
items = list(search_string)
return templates.TemplateResponse("list.html", {"request": req, "items": items})
My form is as follows:
#app.get("/")
async def read_items():
html_content = """
<html>
<head>
<title></title>
</head>
<body>
<form action="/list_items/" method="get">
<input type="text" placeholder="Search.." name="search_string">
<button type="submit">Search</button>
</form>
</body>
</html>
"""
return HTMLResponse(content=html_content, status_code=200)
However, I get a detail not found error.
You should not include the {search_string} part in the route path:
#app.get("/list_items?search_string={search_string}", response_class=HTMLResponse)
^^^^
async def list_items(req: Request, search_string: str):^
You're already asking for this when including it as a parameter in your controller definition.
Instead, use the actual path you want to register the route for:
#app.get("/list_items", response_class=HTMLResponse)
async def list_items(req: Request, search_string: str):
.. and use the same path in your form action:
<form action="/list_items" method="get">
A small side note: since REST endpoints usually represent resources, a standard naming scheme would use just /items instead of /list_items, since GET on /items would mean "list the current items available".
html>
<head>
<title>Landing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="submit">
</form>
<% out.println(DATA) %> <!-- WRONG!! -->
</body>
</html>
Please ignore the action part
I am working on a spring mvc project and I have a problem. What I want is that, when the user clicks submit, we should not leave the page, we should just stay. But the values submitted would be used as a parameter to a function in the same page. Here, let's just say I want to print it, and that is the part that is wrongly entered.
What should I do to accomplish this? Please help
You can use ajax here when your submit button is clicked call this function and then using this call your ajax passed the value from your input to your server and then at your server side perform operation which you needed to do and then the result back to ajax .
Your form :
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="button" onclick="submit_values()">
<!--^^added this-->
</form>
<div id="result"><!--here data will come back--></div>
Then on click of your button submit_values() function will get called . i.e :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function submit_values() {
//get input value
var values = $("input[name='DATA']").val();
console.log(values);
$.ajax({
type: 'POST',
data: {
values: values//passing to server
},
url: "Your_server_url",
success: function(data) {
alert(data);//this will display whatever server will return
$("#result").html(data);//add response back to show
}
});
}
</script>
Then at your server-side do like below :
String data =request.getParameter("values");//get value
String send_back = something(data);//call your function
out.println("DATA BACK"+send_back );//this will go back to ajax
This code for after login user should post some hello message.
describe("launching Telekha",function(){
it("navigating to signin page",function(){
browser.get("www");
element(by.model("credentials.email")).sendKeys("abnsd6#gmail.com");
element(by.model("credentials.password")).sendKeys("123456");
var ptr = element( by.css('[ng-click="login()"]') );
ptr.click();
});
it("on dashboard",function(){
element(by.model("post.postText")).sendKeys("hello");
element( by.css('[ng-click="postit()"]') ).click();
});
});
HTML code for the button
<textarea id="post-editor" placeholder="Tell your friends" ng-model="post.postText" class="textareanoborder col-xs-12 col-md-12 ng-pristine ng-valid ng-isolate-scope ng-touched" autocomplete="off" aria-invalid="false"> </textarea>
This is a guess, but from experience it usually isn't far off. When the page you are navigating to is loaded, are there any animations, AJAX requests or other delays, separate from AngularJS that might be occurring? Protractor does not wait for these and will execute the code:
element(by.model("post.postText")).sendKeys("hello");
as soon as it can. If when this is executed, all the animations have not yet been completed, you element will not be visible to protractor and you'll see the error you've encountered.
To quickly test this, add a browser.sleep(10000); before the line where it's failing. browser.sleep(); is a command that will force the browser to wait for a set amount of time, in this case 10.000 milliseconds (10 seconds).
If this does end up working, you might want to change it to something more elegant such as:
browser.wait(function() {
return element(by.model("post.postText")).isPresent();
}, 10000);
Which will wait for your element to become visible, but only for a maximum of 10 seconds, after which it will continue anyway.
EDIT1: (which works fine):
HTML (Serving from http://localhost:8080)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
});
</script>
</head>
<body ng-app="app" ng-controller="myCtrl">
<textarea id="post-editor" placeholder="Tell your friends" ng-model="post.postText" class="textareanoborder col-xs-12 col-md-12 ng-pristine ng-valid ng-isolate-scope ng-touched" autocomplete="off" aria-invalid="false"> </textarea>
</body>
</html>
spec.js
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('http://localhost:8080');
$("#post-editor").sendKeys("testlol");
browser.sleep(2000);
});
});
conf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};
You can implement protractor.ExpectedConditions.visibilityOf() method to wait until element is visible on UI and then send data to input field.
var EC=protractor.ExpectedConditions;
it("on dashboard",function(){
var ele=element(by.id("post-editor"));
browser.wait(EC.visibilityOf(ele),8000,'Ele is not presented');
ele.sendKeys("hello");
element( by.css('[ng-click="postit()"]') ).click();
});
I'm trying to just get a console app to fire up as a web server so if I browse to locahost:3000 in a browser I should see a blank page with HELLO WORLD! written on it, but with the following all I get is a repeated message in the console panel 'AcceptEx failed: 10022':
import 'dart:io';
void main() {
HttpServer.bind(InternetAddress.ANY_IP_V4, 3000).then((server){
server.listen((HttpRequest request) {
request.response.write('''
<html>
<head>
</head>
<body>
<div>
HELLO WORLD!
</div>
</body>
</html>
''');
});
});
}
Update:
I was setting it to ANY_IP_V6 which was wrong my system doesnt have that, setting it to ANY_IP_V4 does seem to help along the issue, but now it just ends up getting to a point where it complains of a null reference exception Breaking on exception: The null object does not have a method 'cancel'. from noSuchMethod in class Object.
Try replacing InternetAddress with localhost, and make sure to close the response. Like this:
HttpServer.bind('127.0.0.1', 3000).then((server){
server.listen((HttpRequest request) {
request.response.write('''
<html>
<head>
</head>
<body>
<div>
HELLO WORLD!
</div>
</body>
</html>
''');
request.response.close();
});
});
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html