I am trying to write save as dialog with javascript,
I have a content of data, and I want to allow the user to save it,
I managed to get the code below to work, but this code is changing the html data,
So my question is:
1)How can I retrived the html data back, as it was before I the click on the button?
2)Can I do it more elegant way?
<script type="text/javascript">
function saveChanges()
{
var oldHtml = document.documentElement;
document.open("text/html","replace");
document.write("Hello");
document.close();
document.execCommand("saveas", false, "default.htm");
}
</script>
<body>
<button onclick="saveChanges();">Click to save123</Button>
</body>
The usual way to do it is to provide a download link which, when clicked, makes the server return a result with the Content-Disposition: attachment header set.
document.execCommand('SaveAs'...)
is not part of standard, and is not supported by all browsers. Better way to do this is to provide download link.
Related
I'm new to JQuery. I'm trying to call vbscript function inside jQuery. I want to call vbscript on button click using jQuery. I tried calling vbscript function "callfun()" using button onclick() method of javascript for button "Say Hello", and it is working. But when I'm trying to call the same vbscript function "callfun()" using jQuery for button "Say MACRO". It is showing nothing.
(THE BELOW CODE REQUIRES ENABLING OF ACTIVEXOBJECTS.)
Steps to run the below code:
Copy and save the below code in notepad and save the file with .html extension.
Open chrome, search for "IE TAB" extension or download from here, install it, and add it to chrome to enable the plugin icon.
Now open the .html file, click on IE TAB extension.
The link or html page will open automatically directly inside the IE TAB plugin and then the html code can be tested.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/Vbscript">
Function callfun()
Msgbox("Hello!")
End Function
</script>
<script>
$(document).ready(function(){
$("#mac").click(function(){
callfun();
});
});
</script>
</head>
<body>
<input type = "button" onclick = "callfun()" value = "Say Hello" />
<input type = "button" id="mac" value = "Say MACRO" />
</body>
</html>
I even tried making changes in the jQuery script as:
Adding vbscript label before the function.
<script>
$(document).ready(function(){
$("#mac").click(function(){
vbscript:callfun();
});
});
</script>
Adding jQuery attr() function.
<script>
$(document).ready(function(){
$("#mac").attr("onclick", "callfun()");
});
</script>
Adding language in jQuery attr() function.
<script>
$(document).ready(function(){
$("#mac").attr("language", "vbscript").attr("onclick", "callfun");
});
</script>
But nothing called the vbscript function using jQuery.
Someone PLEASE help me or suggest me a way to get it done.
despite the fact you may be using this legitimately its not a 'nice' way to go about doing whatever your trying to do. and most browsers and even windows itself will try its hardest to block what you are doing on multiple levels because security wise this is a very VERY sketchy way of doing whatever your trying to accomplish lol
so the fact this doesnt work does not surprise me. what i would do is to get a packet sniffer running and read all the http data that occours to get clues on if its properly sent out and how server / page responds.
this probably violates the same-orgin policy DOM model of internet rules and stuff or atleast kinda close to violating it, your work is interesting i used to love vbscript but vbscript is becoming rapidly deprecated too
i dont recomend doing this at all: but just for test, you can lower your IE security settings level temporarily. and see if doing that allows sketchy scripts to go through
Is it possible to load an external web page like 'http://www.google.com' and then append my own HTML/JS code to the end of it (e.g. to run a function)?? Surely there is a way to load an external page then add a little bit of my own code after it? Something like this:
<html>
<script>
document.location.href="http://www.google.com/"; //Load external page
function myscript() {
...blahblah
}
</script>
<button onclick="myscript();">Click me</button>
</html>
I'd like that button to be at the bottom of the external page. Please do not suggest parsing methods in php. I've tried doing this by parsing the page first in php then appending my own script to it and echoing as I described here:
Append HTML to page after redirect
This works for simple pages where there are no re-directs or when the final external page can be parsed properly. The problem is that I can't properly parse the external page. The code that is parsed doesn't seem to function without the code from previous pages (before the re-directs). I need to do this without parsing/scraping/crawling.
Thanks!
EDIT: I've tried displaying the external page in an iframe as suggested by Amadan:
<script>
function myscript() {
...blahblah
}
</script>
<iframe src="http://www.google.com/"></iframe>
<button onclick="myscript();">Click me</button>
</html>
However, in firefox it just displays a blank box but in IE it says "This content cannot be displayed in a frame: To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
Any way I can get around this?
EDIT 2:
I've included jquery and the cross domain script here (https://github.com/padolsey/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js). This is the code I'm using now to get the contents using ajax. How would I go from that to actually displaying the content in the webpage? Sorry I'm really bad with ajax/jquery!
function test () {
$.ajax({
url: 'http://www.google.com/',
type: 'GET',
success: function(res) {
var content = $(res.responseText).text();
alert(content);
}
});
}
You can't append anything to a page you don't control except by installing a browser extension (which then works only for the clients where your extension installed).
You can include the contents of a page you don't control inside your own page (in two main ways: client-side iframe and server-side pull), but you seem to be saying this is not what you want.
Try something like this:
var html = '';
$.ajax({
uri: 'http://ya.ru',
method: 'POST',
success: function(data){
htmlx = data;
}
});
About manipulating html inside an variable
var test = $("<div/>");
test.append(html);
test.find(".innertest");
// When I'm ready to append it..
$('#container').append(test);
If it doesn't work, you can use another page on your server for getting a remote page and use ajax to request it.
The client I am working for is trying to make it so that his page never has to reload. Instead he just wants to use AJAX. Now I realize that the way im doing it is not a very efficient way to do it but it is the easiest and you would understand why if you would see his site..
I'm trying to get it to work so that AJAX will refresh only parts of the page or the whole page.
My code is:
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
function refresh (update) {
$.get(location.href, function (data) {
console.log(data);
var EL = $(data).find(update);
var HTML = $('<div>').append(EL.clone()).html()
alert(HTML);
$(update).replaceWith(HTML);
});
}
</script>
</head>
<body>
<div style="font-size: 64px;">The current timestamp is <b class="time"><?php echo rand(999, 9999999); ?></b></div>
<br><br>
<button onclick="refresh('.time')">Refresh Time</button>
</body>
</html>
When you first load the page PHP generates a random number. Hitting the refresh button is suppose to refresh this number. However, the same number stays there. The request returns the exact same page instead of return a page with a new number.
And again, people note that I know this is not a very efficient way to do this, but its the way i'm trying to get it to work
Am I doing something wrong? (besides requesting the whole page when only actually using part)
EDIT
You can try it out here: http://methods.x10.mx/projects/refreshPageParts.php
Change your call to this, to break the caching:
function refresh (update) {
$.ajax({
type: "get",
cache: false,
url: location.href,
success: function (data) {
$(update).replaceWith($(data).find(update));
}
});
}
See the notes on caching in the documentation: http://api.jquery.com/jQuery.ajax/
By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.
I tested your example on my local wamp stack and it is working fine!
btw: you forgot semicolon after the following line (It is not necessary though)
var HTML = $('<div>').append(EL.clone()).html();
EDIT: your code is working... also on the url you provided. The strange thing is you have to wait a few minutes before it is working. So when you visit the page and press the button, the time won't be updated... however if you wait few minutes it will... only once then you have to wait again. I bet your server is caching the page. So your problem is server side... disable the cache and it will work!!
EDIT:
you also could try to make the get url dynamic with a dummy parameter like so
http://methods.x10.mx/projects/refreshPageParts.php?v=dummy
maybe you don't have to make dummy dynamic, it might work with a static variable also. i'm curious, let me know ;-)
I'm sure I'm missing something pretty basic, but I have just started to get myself up to speed on jQuery and Javascript programming. Previously I was doing server side programming with PHP.
I'm now in the middle of creating a prototype for HTML5 webapp, where I would like to have different screens. Now with PHP that was pretty easy, I could just used server side templates like Smarty and be done with it.
However to make my app more webapp like, I would like to dynamically change between screens without having to reload the window.
I have looked into several options that might be anwsers to my question, but I'm not sure whether I'm on the right track.
I have checked for example JsRender, JsViews or even the pure jquery load command.
But what I'm not sure is whether these things would allow me to have something like this:
HEADER_PART
MAIN_CONTENT
FOOTER_PART (also contains links to common JS files that I use)
I would like to dynamically update the MAIN_CONTENT part. Currently my application is only one page, and all my custom logic that belongs to that page is in one JS file. In this JS file, I use a simple $(function() { ... to load my page, so whenever it gets loaded, parts of my page get updated asyncronously. This is fine, since all my blocks in this certain page would have to be loaded when that one page gets loaded.
But what if I have a link, like main.html#otherscreen, and when I click that screen, I would like to change my MAIN_CONTENT and also run another page load specific JS that handles blocks on that other screen, not the first page?
I know I could still use probably server side templating and load my pages using AJAX requrests, but again, not sure whether that is the right approach.
Could you please enlighten me? :)
Thanks & best regards,
Bence
Check out jQuery.load(). Using this function you can dynamically load content into a div on the page, which is what I think you want to do. Just find the div on the page you want to load content into and call
$('#mydiv').load(url, data, function(response){
//do something once it's done.
});
Per your comments...
This is actually very easy. .load() should replace the content in the div (I think. If not, just call .empty() first). Of course you could get fancy and add effects, like
function changePages(url) {
$('#mydiv').fadeOut('fast', function() {
$(this).load(url, function(response){
$('#mydiv').fadeIn('fast');
});
});
}
To handle things like the hash in the URL, in your click event you have to make sure you first call e.preventDefault():
$('#mylink').click(function(e){
e.preventDefault(); //e is a jquery event object
var link = $(this);
var hash = link.attr('href'); // get the hashtag if the href is '#something'
changePages(someUrl + hash);
});
For dynamic loading of data into the page without changing your header and footer you should use jQuery's AJAX function. It allows you to post requests to the server and receive data back without reloading the page. A simple example would be something like:
<html>
<head>
<title>Example</title>
<!-- Assuming jQuery is already referenced -->
<script type="text/javascript">
$('span.buttonish').click(function(){
$.ajax({
// The URL can be a file or a PHP script of your choosing
// it can also be pure HTML without the <html> tags as they
// are already in your file
url: 'path/to/the/file/that/return/data',
success: function(receivedData) {
// The received data is the content of the file or the return
// data of the script and you can use it as you would with any data
$('#content').html(receivedData);
}
});
});
</script>
</head>
<body>
<div id="header">
<!-- Something -->
</div>
<div id="content">
<span class="buttonish">Click me to change the text... </span>
</div>
</div id="footer">
<!-- Something -->
</div>
</body>
<html>
I have a controller (Spring-MVC) that generates a PDF report on a get request. The controller sets headers like "application/OCTET-STREAM", "Content-Disposition", "attachment; filename=\"" + filename + "\"" so that the user gets the save/open dialog forced to them. The controller gets a pdf generated and writes the pdf bytes directly to the response's output stream. The ModelAndView that is returned is null.
The issue is I need/want to disable the button that generates the report request after it is clicked and then re-enable it when the report is finished in order to prevent double clicking.
I thought I could use prototype.org's Ajax.Request to do this... This bit of code does work the buttons properly but then I'm stuck because the client never gets the pdf. I'm guessing I need to do something with the response but I don't know what. Any ideas/help is appreciated.
function displayPdf(button_b, pdf_url) {
button_b.disabled = true;
new Ajax.Request(pdf_url, {
asynchronous:true,
evalScripts:true,
method:'get',
onComplete: function(response) {
button_b.disabled = false;
},
onFailure: function() {
redAlert('crap');
}
});
}
The best way I can think to accomplish everything that you want, assuming that you're still forcing a download would to be something like this I think:
<html>
<head>
<script>
function get_it() {
document.getElementById('the_button').disabled = true;
document.getElementById('the_frame').src = "http://www.ca3.uscourts.gov/opinarch/063575p.pdf";
}
function enable_button() {
document.getElementById('the_button').disabled = false;
}
</script>
</head>
<body>
<iframe id='the_frame' onload='enable_button()'></iframe>
<button id='the_button' onclick='get_it()'>Get it</button>
</body>
</html>
Basically, you're telling it to send it to the iframe instead of using an AJAX request. Once the pdf is ready, the iframe's onload event will fire, re-enabling the button. You'll probably want to use actual event listeners for this as opposed to the deprecated inline ones that I've used in the example :P
My guess is you just want to prevent double clicking of the button. Why not just use a setTimeout to enable the button a few seconds after its been clicked?
setTimeout() example
so at the start of your desplayPdf function, you might put:
setTimeout("button-b.disabled = false",4000);
This would disable the button for 4 seconds after its clicked, and then enable it.