I am learning dojo and a begginer. I would like to load and edit a text file from interface using Dojo. Please direct me which component in dojo would suffice this.
From the answer to my comment, my understanding is that you want to:
Enter a file name into a form on your webpage.
Dojo will then load that particular text file from your sever.
The file then needs to be displayed on the screen in some sort of editing componant.
The user then needs the facility to post the file back to the server.
I would have thought that the best approach is to use dojo/request to get the text file and then use it again to post it back. You could the various dojo dijits to do the selecting and displaying.
A very crude solution would be:
<form data-dojo-type="dijit/form/Form">
<input type="text" id="fileName" data-dojo-type="dijit/form/TextBox" />
<button data-dojo-type="dijit/form/Button" type="button">Get
<script type="dojo/on" data-dojo-event="click">
require([
"dijit/registry",
"dojo/request"
], function(registry, request) {
var fileName = registry.byId("fileName").get("value");
request(fileName, {
"handleAs": "text"
}).then(function(content){
registry.byId("content").set("value", content);
});
});
</script>
</button><br /><br />
<textarea id="content" data-dojo-type="dijit/form/TextBox"></textarea>
<button data-dojo-type="dijit/form/Button" type="button">Send
<script type="dojo/on" data-dojo-event="click">
require([
"dijit/registry",
"dojo/request"
], function(registry, request) {
var content = registry.byId("content").get("value");
request("myhandler.php", {
"method": "post",
"data": {
"content": content
}
}).then(function(content){
// deal with the response
});
});
</script>
</button>
</form>
This will load a text file with the filename you enter in the text box (after clicking get). The content is loaded into the textarea for editing and can be sent back to a server script by clicking send.
This is as I said, "a very crude example". However, it shows the use of dojo/request to receive and post information to/from the server. Obviously, you'd want a more sophisticated solution that hides/shows widgets at the appropriate moment. You would probably want to replace the filename textbox with a some sort of combo populated via your server code...etc, etc.
I'd suggest you write your own widget to encapsulate the whole operation, rather than declare it all in markup. You could use dojo/request to load a json file from the server to populate a combo box to select the file. You'd also want to ensure the information being posted back is from a trusted source.
Important! This will only work if the textfile and you webpage are residing on the same domain. It will not work for cross-domain requests. If you want to do cross-domain you'll need to create a json solution.
Related
I have a simple React form. I am trying to send the data from this form using Fetch API to my Java backend. Here is my React Form file:
import React, {Component} from 'react';
class Form extends Component {
constructor(props){
super(props);
this.state={value:""};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event){
event.preventDefault();
this.setState({value:event.target.value});
}
handleSubmit(event){
event.preventDefault();
const data = new FormData(event.target);
fetch('http://localhost:8080/add/person', {
method: 'POST',
body: data
});
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<label>Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit"/>
</form>
);
}
}
For some reason, the data variable always has an empty JSON when I am in debug mode. In my Java backend, when I receive the request, I am seeing blank form data.
Any ideas as to why I am not able to send data across to my Java backend?
EDIT: I would also like to point out that my frontend is hosted on localhost:3000, while my Java backend server is on localhost:8080
why not just submit your data using the value stored in state?
handleSubmit(event){
event.preventDefault();
const data = this.state.value; //change here
fetch('http://localhost:8080/add/person', {
method: 'POST',
body: data
});
}
UPDATE: in your package.json add "proxy": "http://localhost:8080" if that doesn't work you will have to open it up using something like this but for what ever framework you're using on your backend.
https://www.npmjs.com/package/cors#enabling-cors-pre-flight
http://www.baeldung.com/spring-cors
as #Tadas Antanavicius said your input is also missing a name value. here is a nice and short medium article on the react portion of what you are trying to do with your code. you can even remove your onChange from your input field.
https://medium.com/#everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f
Your problem is unrelated to your backend - the fetch code looks correct.
FormData is not being constructed as you would expect. You can try this out by opening Chrome Devtools' Network tab and watch the request as it goes by: empty request payload.
The problem is that the FormData constructor's argument relies on each input in the form having a name attribute, which you're missing. If you add it, (name="name") your front end should behave as expected:
<input type="text" name="name" value={this.state.value} onChange={this.handleChange} />
EDIT: As per your above conversation, seems like you also have a server side CORS issue. My answer fixes your original question, but yes you'll need to resolve the CORS one as well, the easiest way probably being to refer to the docs of whatever Java framework you're using. It's a very common problem and should be in FAQ.
Background: I have to support multiple file uploads in IE7-9. I've found uploadify and FileReader which are both flash based.
Our current file upload allows the user to select a file, type in a description and check some check boxes. That data is all sent to the upload servlet at the same time and the servlet gets the file data and the description and the checkbox values and stores the file on the server and adds an entry into the database.
The problem: uploadify and FileReader both want to send the file directly to the server, I don't have a chance to add a description or set any flags. I've worked with FileReader some now and can intercept the file instead of sending it to the server. What I would like to do is get the binary data and put it into the form, let the user add the description and then submit the form with the binary file data.
I've all ready tried just adding a hidden field to the form but the data didn't seem to come through.
If worse comes to worse I think I could just upload the file and then update the database when the form is submitted, I don't want to do that but I think that would work.
Does anyone know of anyway to add the file data to the form and then to get the servlet to recognize that data as part of the form?
You can pass data along side your upload in Uploadify, just use the formData attribute like this (found here):
<input name='someKey' type='text' value='Some Value'/>
<input type="file" name="file_upload" id="file_upload" />
<script>
$('#file_upload').uploadify({
// Some options
'method' : 'post',
'formData' : { 'someKey' : $('input[name=someKey]').val() }
});
</script>
I am using a html form like this:
<form action="question" method="get">
where question is a java servlet class which renders the data from the form and display on other page.
What I am trying to do is display this data just below the html form not on other screen.
(Somewhat like the page where we Ask Question in stackoverflow.com where the question you enter is rendered and displayed below.)
So I am trying to do same. Anyone has an idea how to do that?
The simplest way to do it, is to use javascript (client side).
Below is a very crude example on how to do this. This will give you an idea on how to proceed.
create a html page, with two separate text area boxes.
Let the first text area box be the source where you type in the text.
Assign it an id 'source_area'.
<textarea id='source_area'>
</textarea>
Let the second text area box be the destination.
Assign it an id 'destination_area'.
Set this area as "readonly" because you don't want users typing here directly.
<textarea id='destination_area' readonly>
</textarea>
Now when a user types into the first box, we need to capture the particular action.
For this example I will use the "onKeyUp" to capture events when a keyboard key is released.
Now when typing into the source text box, a key on your keyboard is released, it will invoke a javascript function "transferToNextArea()" is invoked.
We will create the javascript function "transferToNextArea()" in
Read more about javascripts here. http://w3schools.com/js/js_events.asp
Complete list of events here. http://w3schools.com/jsref/dom_obj_event.asp
The javascript function will extract text from 'source_area' text box.
It will then assign the same text into 'destination_area'.
function transferToNextArea()
{
//extracting text.
var varSrcText = document.getElementById("source_area").value;
//assigning text to destination.
document.getElementById("destination_area").value=varSrcText
}
Complete html (tested in Google Chrome)
<html>
<body >
Source Box
<textarea id='source_area' onKeyUp="transferToNextArea();">
</textarea>
<br>
Destination Box
<textarea id='destination_area' readonly>
</textarea>
</body>
<script type="text/javascript">
function transferToNextArea()
{
var varSrcText = document.getElementById("source_area").value;
document.getElementById("destination_area").value=varSrcText
}
</script>
</html>
This is just a very basic example. It is not very effecient, but it will give you an idea of how data can be moved around.
Before assigning the text, you could manipulate the text however you want it using javascript.
Stackoverflow formats the text as per the html tags after extracting it. This will require lot more code and more work.
Using a servlet for the above task is overkill.
You would use a servlet, only if you want to do something with the data on the server side.
Example
a) store it in a database before displaying it below.
Read about "ajax" calls to send and recieve data between the server and client.
Ajax will give you the means to send data to the servlet without having to refresh the whole page.
Create a JSP with a form
on submit post the data to some servlet
process request and produce resultant data and set it to request's attribute
forward the request to same jsp
check if the data is not null display under the form
Just let the servlet forward the request to the same JSP page and use JSTL <c:if> to conditionally display the results.
request.setAttribute("questions", questions);
request.getRequestDispatcher("/WEB-INF/questions.jsp").forward(request, response);
with
<c:if test="${not empty questions}">
<h2>There are ${fn:length(questions)} questions.</h2>
<c:forEach items="${questions}" var="question">
<div class="question">${question}</div>
</c:forEach>
</c:if>
See also:
Our servlets wiki page - Contains concrete Hello World examples.
I'm trying to create a web scraper for my coming android app. Therefore I need to use a simple search form on a website, fill it out and send my results back to the server.
As mentioned in the Jsoup-Cookbook, I scraped the site I needed from the Server and changed the values.
Now I just need to post my modified document back to the server and scrape the resulting page.
As far as I've seen in the Jsoup-API there is no way to post something back, except with the .data-Attribute in Jsoup.connection, which is unfortunately not able to fill out text fields by their id.
Any ideas or workarounds, how to post the modified document, or its parts back to the website ?
You seem to misunderstand how HTTP works in general. It is not true that the entire HTML document with modified input values is been sent from the client to the server. It's more so that the name=value pairs of all input elements are been sent as request parameters. The server will return the desired HTML response then.
For example, if you want to simulate a submit of the following form in Jsoup (you can find the exact HTML form syntax by opening the page with the form in your browser and do a rightclick, View Source)
<form method="post" action="http://example.com/somescript">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="hidden" name="hidden1" value="hidden1value" />
<input type="submit" name="button1" value="Submit" />
<input type="submit" name="button2" value="Other button" />
</form>
then you need to construct the request as follows:
Document document = Jsoup.connect("http://example.com/somescript")
.data("text1", "yourText1Value") // Fill the first input field.
.data("text2", "yourText2Value") // Fill the second input field.
.data("hidden1", "hidden1value") // You need to keep it unmodified!
.data("button1", "Submit") // This way the server knows which button was pressed.
.post();
// ...
In some cases you'd also need to send the session cookies back, but that's a subject apart (and a question which has already been asked several times here before; in general, it's easier to use a real HTTP client for this and pass its response through Jsoup#parse()).
See also:
HTTP tutorial
HTTP specification
That's not the way. You should create a POST request (use Apache HTTP Components), get the response and then scrape it with JSoup.
I have a page where multiple forms are submitted to different 3rd party sites...I want to hide the responses and then parse through them using my code (I already have the success/failed submission response messages with me.. I can check each response for existence of such a message).
One possible solution is to assign a target frame to each form, then hide display of each such frame.. However in such case is it possible to store each response in hard disk or parse through it(to check for success/failure message)? I want to do this in a jsp/java web app...
Ajax post. For example, use jQuery and the jQuery Form plugin.
Then something like this to submit all forms with a button click
<input type="button" value="Submit all" id="submitAll">
<script type="text/javascript">
$(document).ready(function() {
$('#submitAll').click(function() {
$('form').ajaxSubmit({
success: function(responseText, statusText, xhr, $form) {
alert('form submitted, return status:' + statusText);
}
});
});
});
</script>