I am trying to get the content of a JSP using AJAX, fill the page with some additional data (the content object), and then load the full page I get on a new window:
JavaScript:
var request = $.ajax({
type: 'POST',
url: ctx + "/model/nbReport.jsp",
dataType: 'html',
data: {content: content}
});
request.done(function(data) {
var reportWindow = window.open();
$(reportWindow.document).html(data);
});
This is the JSP:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css" media="all">
#page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin-top: 3.0in;
margin-bottom: 1.0in;
#bottom-center {
content: element(footer);
}
#top-center {
content: element(header);
}
}
#page-header {
display: block;
position: running(header);
}
#page-footer {
display: block;
position: running(footer);
}
</style>
</head>
<body>
<div id="page-header">
</div>
<div id="page-footer">
</div>
<div id="page-content">
${param.content }
</div>
</body>
</html>
The .done() callback is never executed. I tried also to implement a .always() and it is not run as well. Actually if I check the request object it has readyState=1, that should mean that the post was never completed. But actually checking on the firebug console the POST appears to be successful.
The response of the post is the HTML contained inside the JSP. No error is reported in the logs.
Does anybody know how could I solve this empasse?
What I aim to do is to get the page "/model/nbReport.jsp", populate it with the data contained in content (which is just a list of HTML tags dynamically created) and open the filled page in a new window.
Related
My WebApp URL is this:
https://script.google.com/macros/s/[Deployment ID]/exec
It shows the form correctly. I have a button on top of this form to come back to home page. It only has to add ?page=home to the above url. But when I click that button URL is shown as following:
https://n-f22j6yycycwkqttwlgfk5eezyixnbwfyfih4bba-0lu-script.googleusercontent.com/userCodeAppPanel?page=home
So last parameter part is what I have expected with my webapp url, not with this:
...script.googleusercontent.com/userCodeAppPanel
which I do not understand so far.
What is userCodeAppPanel?
How to solve this problem?
I tried to create sample project for similar webapp with only three pages. But when I deployed I get other problem - not the above one. So I guess the question also should be changed now.I did change the question.
New question is : Google WebApp URL if changed manually is working but via button href not working. Why?
GS doGet function:
Within doGet i have following -
var html = doGetPageOrIndex(e);
return html;
function doGetPageOrIndex(e){
var page = e.parameter.page
return HtmlService.createHtmlOutputFromFile(page || 'index2')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle('App Demo')
}
HTML page1
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Heading Page 1</h3>
<p>Thanks Man</p>
</body>
</html>
HTML page2
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h4>Your Page2</h4>
<p>You are welcome!</p>
</body>
</html>
This demo is being copied from another user of stackoverflow.
here is Index2 HTML page code:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<title>Single Page App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
text-align: center;
margin: 2px;
text-transform: uppercase;
background-color: blue;
}
span:hover,
a:hover {
background-color: yellowgreen;
}
body {
background-color: brown;
color: white;
font-size: 2em;
}
a:visited {
color: white;
}
</style>
</head>
<body>
<h1><span id="type">Multi</span> Page App </h1>
<div id="main">Loading...</div>
<script>
//Change base url
google.script.run
.withSuccessHandler(url => {
$('base').attr('href', url)
})
.getUrl()
//Function to handle hash change
function change(e) {
let hash = e.location.hash
if (!hash) {
main()
return
}
google.script.run
.withSuccessHandler(htmlFragment => {
$('#main').html(htmlFragment)
})
.getHtml(hash)
}
google.script.history.setChangeHandler(change)
//Function to add Main page html
function main() {
$('#main').html(`
<ul>
<li>Page1</li>
<li>Page2</li>
</ul>`)
}
//Loads Main html from main function
//Adds toggle to span to change to a Multiple page app
$(() => {
main()
$('#type').on('click', () => {
let hf = $('a').attr('href')
if (!hf) return
hf = hf.indexOf('#') + 1
$('#type').text(hf ? 'Multiple' : 'Single')
$('a').each((i, el) => {
$(el).attr('href', (i, v) =>
hf ? '?page=' + v.slice(1) : '#' + v.slice(6)
)
})
})
})
</script>
</body>
</html>
If I edit the URL manually and use following and then enter - I will get target page without problem.
https://script.google.com/a/macros/5times.co.in/s/AKfycbyY7gR13A1C7a7SVtbYnCy_2TiMeeZWM1ggW134GMKTHOwLvjfnJsGEmtzSgYQmLLIsbQ/exec#page2
But If I use the home page and then click page1 or page2 link then nothing happen to the page. Even though the URL is correctly changed as expected. This is confusing to me. If I edit the URL again and change page1 to page2 and then enter it will work. So why it is not loading page1/2 when I click the page1/2 link on main page?
All the codes are copied above. Thank for your effort in advance.
I'm currently trying to get the live value of a Java object in Javascript to fill up some progress bar.
Here is the code in the JSP file :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="server_ihm_web.server"%>
<!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>
</head>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar1 {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
#myBar2 {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
#myBar3 {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar1"></div>
</div>
<br>
<div id="myProgress">
<div id="myBar2"></div>
</div>
<br>
<div id="myProgress">
<div id="myBar3"></div>
</div>
<%
server serv = new server();
serv.startServer();
%>
</body>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar1");
var elem2 = document.getElementById("myBar2");
var elem3 = document.getElementById("myBar3");
var id = setInterval(update, 100);
function update() {
elem.style.width = <%=serv.getBar1()%> + '%';
elem2.style.width = <%=serv.getBar2()%> + '%';
elem3.style.width = <%=serv.getBar3()%> + '%';
}
}
</script>
</html>
serv values are updated every few seconds but nothing changes for the progress bar.
I think it always take the base value of the object so everytime update() is called it will change the progress bar to the same value.
Is there a way to update the values of serv for the javascript ?
I think you are mixing things that live on separate dimensions :)
Javascript executes in the browser and JAVA (JSP) on the server.
If your ideas was to have the jsp scriptlet execute in the user's browser, it is not going to happen.
If you need to update the page with a progress when it is already in the user's browser, you will have to implement some ajax call to get the updates on the background.
The JSP tags <%= ... %> are evaluated in the server, before the page is displayed the first time in a browser. So, the values of that tags are static, and don't change in each execution of the javascript functions.
For that values to change, you need to do a request to the server, and reload the page. To avoid reloading an entire page each time, you need to do an Ajax request to obtain a new value to display with Javascript.
I am trying to transition-in a new page using ajax and everything is working fine except that the CSS transition is not animating correctly. More specifically, I have an <a> element that when clicked fires an ajax POST request to my server. The server sends back an HTML file that is appended to the body of my document using jQuery's .done() deferred object method. However, when I add the CSS class to the new HTML that will make it transition into the browser viewport the style changes are applied instantly rather than being animated. If I execute .addClass() after a 1ms timeout the animation executes correctly. I assume the problem has something to do with the DOM not being fully finalized by the time my class is added, but I haven't been able to fix it without using .setTimeout(). While this is a simple-enough fix, it doesn't seem very robust, and it still means that there is something I don't understand about the process. Any tips are definitely appreciated.
Here are the relevant bits of code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Intercepting Link Clicks</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id = 'firstScene'>
<a href="/server/" id = 'serverRequestLink'>Get Stuff From The Server</a>
</div>
app.js
$(document).ready(app);
function app () {
$('#serverRequestLink').on('click', getServerStuff);
};
function getServerStuff (e) {
e.preventDefault();
$.ajax({
method: 'POST',
url: 'ajaxTest',
}).done(function(secondSceneHTML){
$('body').append(secondSceneHTML);
$('#secondScene').addClass('visible');
});
};
secondScene.html
<div id = 'secondScene'>
<p>I'm the second scene.</p>
</div>
app.css
#secondScene {
background-color: blue;
position: fixed;
top: 0;
bottom: 0;
left:200px;
right: 0;
transition: all 1s;
}
#secondScene.visible {
top: 0; right: 0; bottom: 0; left: 0;
}
I closely followed an AJAX tutorial ( https://www.youtube.com/watch?v=WwngGtboldU ) to learn how to prevent certain sections of a website from loading. You can see at 17:50 he clicks the links and, rather than the entire page loading, only a certain section loads in.
However, it's simply not working for me. When I click "Cats" or "Dogs", the entire page loads. It's very frustrating! Could anyone figure out what might be going wrong in my version? I've been using XAMPP, by the way, and I always test this by opening cats.php or dogs.php.
style.css
body{
background-color: aqua;
}
ul#nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}
ul#nav li {
display:inline;
margin-right:10px;
}
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History API</title>
</head>
<body>
<nav id="main">
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
</nav>
footer.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var nav, content, fetchAndInsert;
nav = $('nav#main');
content = $('section#content');
//Fetches and inserts content into the container
fetchAndInsert = function(href) {
$.ajax({
url: 'http://localhost/BlankApacheHistoryAPI/content' + href.split('/').pop(),
method: 'GET',
cache: false,
success: function(data){
content.html(data);
}
});
});
//User goes back/forward
$(window).on('popstate', function() {
fetchAndInsert(location.pathname);
});
nav.find('a').on('click', function(e) {
var href = $(this).attr('href');
//Manipulate history
history.pushState(null, null, href);
//Fetch and insert content
fetchAndInsert(href);
e.preventDefault();
});
});
</script>
</body>
</html>
cats.php
<?php
require 'views/header.php';
?>
<section id="content">
<?php require 'content/cats.php'; ?>
</section>
<?php
require 'views/footer.php';
?>
content/cats.php
Cats say meow
dogs.php
<?php
require 'views/header.php';
?>
<section id="content">
<?php require 'content/dogs.php'; ?>
</section>
<?php
require 'views/footer.php';
?>
content/dogs.php
Dogs say woof
I think you are missing the last forward slash:
url: 'http://localhost/BlankApacheHistoryAPI/content' + href.split('/').pop(),
should be
url: 'http://localhost/BlankApacheHistoryAPI/content/' + href.split('/').pop(),
At the end of your fetchAndInsert = function(href) you wrote }); while in fact the paranthesis should be there. Change it to }; (hint: check your developer console (F12) to see any error messages)
Remove history.pushState(null, null, href); - it's actually redirecting you to the link ("the entire page loads")
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.