I want to call a function of javascript from servlet.
servlet code:
File ff = new File(uploadedFile+"/"+fileName+".mp4");
FileOutputStream fileOutSt = new FileOutputStream( ff );
fileOutSt.write(data);
fileOutSt.close();
request.setAttribute("src", ff);
RequestDispatcher dispatcher=request.getRequestDispatcher("/WEB-INF/jsfunction.js");
dispatcher.include(request, response);
my javascript code:
myfunction(fileInput)
{
var fileUrl = window.URL.createObjectURL(fileInput);
}
The problem is javascript calls but it display the code content but not execute it.
how can i get fileURL.
Several things are wrong here:
First, the inclusion of your javascript source is improper, because the javascript must be included (or referenced) always within an HTML file. In your case, instead, you are serving a MP4 file.
If you must absolutely execute that js code (remember that js is always executed in a browser), I suggest you serve an HTML page instead. In this case, the jsfunction.js script must be referenced within the HTML code:
<html>
<head>
<script type="text/javascript" src="jsfunction.js" />
</head>
<body>
...
</body>
</html>
Second: Even if you include the script, you must then invoke your function. You can call it immediately, from a scriptlet, or as a response to some client event (onclick, onload, etc).
javascript plays on client side and Servlet plays on server side. You cannot execute Javascript on serverside. It should execute by browser.
I suggest you to make a javascript call in window onload.
RequestDispatcher interface provides the facility of dispatching the request to another resource it may be html, servlet or jsp. But not to JS. Since JS always runs in browser itself.
request.setAttribute("filename",filenamehere); //put filename
RequestDispatcher requestDispatcher;
requestDispatcher = request.getRequestDispatcher("/filename.jsp");//dispatch here
requestDispatcher.forward(request, response);
In filename.jsp
String value = (String)request.getAttribute("filename");//getting filename
Do like this. This way we will get the file url.
How to pass response from servlet to html
Call your servlet in same html using ajax with jquery.
In servlet
//getting input from `html` page
String userName = request.getParameter("userName").trim();
//now process your request here
//forward response to `html` page
response.setContentType("text/plain");
response.getWriter().write("your file url");
In html call this servlet using ajax
$.ajax({
url : 'yourservletaction',
data : {
userName : $('#userName').val()//if you want to send any input do like this
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);//getting file url as response. so use this url in you js
}
});
Related
<html>
<head>
<meta charset="utf-8">
<title>Test page for Query YQL</title>
<link rel="stylesheet" href="http://hail2u.github.io/css/natural.css">
<!--[if lt IE 9]><script src="http://hail2u.github.io/js/html5shiv.min.js"></script><![endif]-->
</head>
<body>
<h1>Test page for Query YQL</h1>
<div id="content"></div>
<input type="button" name="bt1" value="click" onclick="pesquisa()">
<form name="s2">
<input type="text" name="s1">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.query-yql.min.js"></script>
<script type="text/javascript">
function pesquisa(){
$(function () {
var t = $('#content').empty();
var url= document.s2.s1.value;
var statement = 'select * from feed where url="'+url+'"';
$.queryYQL(statement, function (data) {
$('<h2/>').text('Test: select * from feed').appendTo(t);
var r = data.query.results;
var ul = $('<ul/>');
$.each(r.item, function () {
$('<li/>').append(this.title).appendTo(ul);
$('<li/>').append(this.link).appendTo(ul);
<?php
$titulo = "<script>document.write(titulo);</script>";
$site = "<script>document.write(site);</script>";
//echo $titulo;
//echo $site;
?>
});
ul.appendTo(t);
});
});
};
</script>
</body>
</html>
How can you save the this.title and the this.link values into 2 different variables an then call them into php so you can insert the data into a DB?
It's just a simple YQL query to search on rss feeds.
After doing the query, I want the results to be saved in a database, but I can't discover how to do that.
First of all, you have to understand that you are working on a Client-Server architecture.
This means:
Let's say that this file you are showing us is called "TestYQL.php" (because you did not say the name of it). This file is executed by php (server side), which reads line by line the contents of it, and generates another new file from the original. For educational purposes, let's say the generated file is called "GeneratedTestYQL.html". This file no longer has any php code inside, since it is directly html and js flat. It knows nothing about php. So there are no php functions, variables, nothing. This last file is the one that reaches the client, and the code is executed by a web browser like Chrome, Firefox, etc.
In your case, the file "TestYQL.php" all you have of php is what is inside the <? Php ....?> Tags. With php you creates 2 variables, each with a tag inside, but without any purpose since they are not used in any way. So, the generated "GeneratedTestYQL.html" file is the same as the original, but without the lines inside the <? Php ...?>.
This means that: The contents of the variables that you use in PHP can be sent to the browser, because with PHP you will generate the file that will be executed in the browser.
Now, when the file "GeneratedTestYQL.html" arrives, the browser starts to show all the contents of the file, it generates the form in which, when you click the button, executes the function pesquisa() and now starts javascript (JQuery) bringing data of the feeds, and for the first time, these variables "this.title" and "this.link" begin to exist in javascript.
Since there is no such thing as php here, you can NOT access those variables from php.
So, how to save that data in a DB?, well, the common way is to send all the data you want from the browser, to the server, then the server sees what to do with that data. To send data from the browser to the server, you do it by making GET or POST requests to a php file from the server (preferably another file, let's say it will be called "saveFeeds.php").
Data can be sent with a GET request, but it is semantically incorrect since GET means you want to fetch data from the server. So to send that data to the server, you will have to make a POST request from the browser, which is more appropriate.
There are now 2 simple ways to make a POST request. The first and most common of these is from a form in the browser, the other way is using Ajax.
How to do it from a form?
Currently in your code, you have already put a form (That is called "s2"), although currently the same is not necessary, but leave that now.
If you wanted to send the data through a form, you should do 2 things. First and most obvious, create the form; second, the data received from the internet (title and link of feed), send them to the server.
Assuming you fetch data from a single feed per url, and the designated file in charge of receiving the request will be "saveFeeds.php". So, you could create a form like the following after the previous one:
<Form class = "sender" action = "saveFeeds.php" method = "post">
<Input type = "hidden" name = "title" value = ""> <br>
<Input type = "hidden" name = "link" value = ""> <br>
<Input type = "submit">
</ Form>
Then you need to put the feed data inside the form, because, at this moment, you can't send anything. You could add a function like:
Function appendFeedToForm (title, link) {
Var form = $ (". Sender");
Form.title.value = title;
Form.link.value = value;
}
And then call it from inside the $ .each of the result as
AppendFeedToForm(this.title, this.link);
The second case, the easiest way to make a request to the same file using Ajax is with a JQuery shortcut:
$.post("saveFeeds.php", r.item);
If you are interested in validations, you can take a look at the JQuery documentation. The important thing about ajax requests is that you can send all the data you want without having to force you to reload the page. Therefore, you can send as many feeds as you want in the same way you would send one.
Now with the data sent from the client to the server, it is necessary to handle the reception of the data. Currently we were pointing all the data to the file "saveFeeds.php", so, now, finally we can put the content from javascript. To access them, simply in that file, you should check the fields:
$ _POST ['title'] // This names are from input names of form
$ _POST ['link'] // or properties sended through Ajax
So, here, you have tp prepare the connection to your database and save those parameters. Currently you did not mention which database engine you are using, so, for this moment, I'll shorten the answer here.
Note: I was not giving you the best practices to solve your problem, but rather the minimum necessary.
I am using spring mvc. i want to set attributes to my httpSession. I want to do something like
// this is inluded in my js file
function setName(name){
<%session.setAttribute("name", name)%>
}
I dont think it will work.You should try to know the Principle of the jsp:
1.the <%session.setAttribute("name", name)%> is java code,it will excute in the server before the jsp is return to the browser.
2.the function setname() is js code, it will only work in browser.
3.you can see response in browser finally like that:
// this is inluded in my js file
function setName(name){
}
yeah,there will be nothing in setname;
If I have understood correctly what you want. You can't set attribute in your httpSession with javascript cause it's client side. If you want to set attributes in your httpSession, you have to get the name server-side (with a get or a post) and change your httpSession in your java.
If you want to change it dynamically, you have to use Ajax to do your request.
This question already has answers here:
Can scripts be inserted with innerHTML?
(26 answers)
Closed 8 years ago.
Using Ajax, I'm calling a php file that contains javascript, but in this way, the javaScript doesn't work.
The main.html file is given here. It just uses Ajax for calling a php file called test1.php for updating all page at client.
<!DOCTYPE html>
<html>
<body>
<!-- run php file to fill the page -->
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.body.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.php",true);
xmlhttp.send();
</script>
</body>
</html>
And the test1.php file is very simple test as follows:
<p id="demo">Hi there</p>
<script>
document.write("Yes! Hi there");
alert('Welcome!');
</script>
Now, just for checking that test1.php is ok, I put in the browser's url line:
localhost/test1.php
and everything works ok, the text of the html and js are displayed and an alert window with the word Welcome! is displayed.
But if I call the main page
localhost/main.html
Then only the html text 'Hi there' is displayed. The JS is ignored.
Anybody knows why is this?
Thanks
Krasimir Tsonev has a great solution that overcome all problems. His method doesn't need using eval, so no performance nor security problems exist. It allows you to set innerHTML string contains html with js and translate it immediately to an DOM element while also executes the js parts exist along the code. short ,simple, and works exactly as you want.
So in this case, the response from ajax is the src string which then translated to a DOM object according to Krasimir Tsonev and then you have it works with js parts that are executed.
var el = str2DomElement(xmlhttp.responseText);
document.body.innerHTML = el.innerHTML;
Enjoy his solution:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
Important notes:
You need to wrap the target element with div tag
You need to wrap the src string with div tag.
If you write the src string directly and it includes js parts, please take attention to write the closing script tags correctly (with \ before /) as this is a string.
Here are 3 basic examples of what you can do with ajax & how you should do it:
Main html
js
function ajax(a,b,c){ // Url, Callback, just a placeholder
c=new XMLHttpRequest;
c.open('GET',a);
c.onload=b;
c.send()
}
function changeHTML(){
document.getElementById('mytext1').innerHTML=this.response;
}
function executeJS(){
(new Function(this.response))()
}
var array=[];
function loadJSON(){
array=JSON.parse(this.response);
updateFields();
}
function updateFields(){
for(var a=0,b;b=array[a];++a){
document.getElementById(b.id).textContent=b.data;
}
}
window.onload=function(){
ajax('getHTML.php',changeHTML);
ajax('getJS.php',executeJS);
ajax('getJSON.php',loadJSON);
// even if this works you should execute ajax sequentially
}
html
<div id="mytext1"></div>
<div id="mytext2"></div>
getHTML.php
<?php
echo "<div>i'm html</div>";
?>
getJS.php
<?php
echo "var a='hello';alert(a);";
?>
getJSON.php
<?php
$arr=array(array('id'=>'mytext2','data'=>'data'));
echo json_encode($arr);//json_decode
?>
if you want to execute a javascript function use the executeJS function and pass a valid javascript string.
There is no need for EVAL!
TIP:using json you can pass a function as data but as the parsing does not like the string function at the beginning a nice trick is to convert the javascript to base64 and back into a normal string with javascript with atob(base64) and have something like this:
function updateFields(){
for(var a=0,b;b=array[a];++a){
if(b.func){
(new Function(atob(b.func)))()
}else{
document.getElementById(b.id).textContent=b.data;
}
}
}
php
<?php
$arr=array(
array('id'=>'mytext2','data'=>'data'),
array('func'=>base64_encode("alert('jsonfunc')"))
);
echo json_encode($arr);//json_decode
?>
maybe there are some little errors ... i wrote that now. and can't check ajax atm.
if you have any questions just ask !!
I want to give you one advice that insted use of javascript you can use jquery ajax it will be easy and latest thing for ajax.
You can use $.ajax function. You can use json easily with this function
When you make an AJAX call you contact to a server url. If your url is, as in this case, a php page, it will execute on the server and return to your AJAX call the HTML that it produces... now you can play with that HTML and manage it or publish into your current's page DOM.
-AJAX is a server call that executes server code.
-A script tag embeded on a php page is HTML that will execute the code it contains on client when parsed and executed by a browser.
So... your code isn't executing because it's never being called... the response to your AJAX call will be exactly
<p id="demo">Hi there</p>
<script>
document.write("Yes! Hi there");
alert('Welcome!');
</script>
The php page executes and return that to your current page as text/html.
If you want to execute client code from your javascript you should have it on the same .js file or in another one included, but if you include it on a server page you'll need to redirect your browser to that page, if you call it with AJAX the code won't execute as the client browser won't parse it.
I have a basic html file which is attached to a java program. This java program updates the contents of part of the HTML file whenever the page is refreshed. I want to refresh only that part of the page after each interval of time. I can place the part I would like to refresh in a div, but I am not sure how to refresh only the contents of the div. Any help would be appreciated. Thank you.
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
e.g.
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the id selector.
Let's assume that you have 2 divs inside of your html file.
<div id="div1">some text</div>
<div id="div2">some other text</div>
The java program itself can't update the content of the html file because the html is related to the client, meanwhile java is related to the back-end.
You can, however, communicate between the server (the back-end) and the client.
What we're talking about is AJAX, which you achieve using JavaScript, I recommend using jQuery which is a common JavaScript library.
Let's assume you want to refresh the page every constant interval, then you can use the interval function to repeat the same action every x time.
setInterval(function()
{
alert("hi");
}, 30000);
You could also do it like this:
setTimeout(foo, 30000);
Whereea foo is a function.
Instead of the alert("hi") you can perform the AJAX request, which sends a request to the server and receives some information (for example the new text) which you can use to load into the div.
A classic AJAX looks like this:
var fetch = true;
var url = 'someurl.java';
$.ajax(
{
// Post the variable fetch to url.
type : 'post',
url : url,
dataType : 'json', // expected returned data format.
data :
{
'fetch' : fetch // You might want to indicate what you're requesting.
},
success : function(data)
{
// This happens AFTER the backend has returned an JSON array (or other object type)
var res1, res2;
for(var i = 0; i < data.length; i++)
{
// Parse through the JSON array which was returned.
// A proper error handling should be added here (check if
// everything went successful or not)
res1 = data[i].res1;
res2 = data[i].res2;
// Do something with the returned data
$('#div1').html(res1);
}
},
complete : function(data)
{
// do something, not critical.
}
});
Wherea the backend is able to receive POST'ed data and is able to return a data object of information, for example (and very preferrable) JSON, there are many tutorials out there with how to do so, GSON from Google is something that I used a while back, you could take a look into it.
I'm not professional with Java POST receiving and JSON returning of that sort so I'm not going to give you an example with that but I hope this is a decent start.
You need to do that on the client side for instance with jQuery.
Let's say you want to retrieve HTML into div with ID mydiv:
<h1>My page</h1>
<div id="mydiv">
<h2>This div is updated</h2>
</div>
You can update this part of the page with jQuery as follows:
$.get('/api/mydiv', function(data) {
$('#mydiv').html(data);
});
In the server-side you need to implement handler for requests coming to /api/mydiv and return the fragment of HTML that goes inside mydiv.
See this Fiddle I made for you for a fun example using jQuery get with JSON response data: http://jsfiddle.net/t35F9/1/
Usefetch and innerHTML to load div content
let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"
async function refresh() {
btn.disabled = true;
dynamicPart.innerHTML = "Loading..."
dynamicPart.innerHTML = await(await fetch(url)).text();
setTimeout(refresh,2000);
}
<div id="staticPart">
Here is static part of page
<button id="btn" onclick="refresh()">
Click here to start refreshing every 2s
</button>
</div>
<div id="dynamicPart">Dynamic part</div>
$.ajax(), $.get(), $.post(), $.load() functions of jQuery internally send XML HTTP request.
among these the load() is only dedicated for a particular DOM Element. See jQuery Ajax Doc. A details Q.A. on these are Here .
I use the following to update data from include files in my divs, this requires jQuery, but is by far the best way I have seen and does not mess with focus. Full working code:
Include jQuery in your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Create the following function:
<script type="text/javascript">
function loadcontent() {
$("#test").load("test.html");
//add more lines / divs
}
</script>
Load the function after the page has loaded; and refresh:
<script type="text/javascript">
$( document ).ready(function() {
loadcontent();
});
setInterval("loadcontent();",120000);
</script>
The interval is in ms, 120000 = 2 minutes.
Use the ID you set in the function in your divs, these must be unique:
<div id="test"></div><br>
I am using following code in my html file and run manually not in webserver through double clicking only.it did not parse xml and give correct node value? any help please? how jquery
will work if xml content is big one, because the code i have used is not having callback function, how does it identify all xml data has been recieved before parsing?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("http://www.hindu.com/rss/01hdline.xml", function(response){
var response = $.paseXML(response);
var $xml = $(response);
//Now you can find any xml node with $xml using various methods of jQuery
//E.g
alert($xml.find( "title" ));
});
});
your success handler will not be called, place an alert of see in firebug, because of "Same Origion Policy". Also have a look at Cross-Origin Resource Sharing
what you can do is make a server side proxy, make request to the Url and get a xml response, then pass back that response to your client side where you can use jquery to parse the xml.