Accessing HTML <textarea> data and store them as file [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have following task:
I need to gather information from multiple <textarea> tags, format them a bit and save on hard drive preferably in CSV format.
Important note no. 1: that data source HTML document is a file on my local hard drive, it's not hosted on any server (this file is a product of export from some database management tool).
Important note no. 2: only script language engine available is python
I already do some effort on preparing some python script that embed CSS stylesheet links and JavaScript links into this HTML file to use and some jQuery library functions for displaying purposes.
Now, on specific action (i.e. "save" button click) I need to:
Search for filled <textarea> tags (jQuery job?)
Format them and glue in single variable preferably (jQuery as well)
Display "save as" dialogue
Save file on hard drive
Well as far as I know, JavaScript is not allowed to manipulate files on machine file system, so for writing file this should be some server-side script, is that correct?
Should this save script be triggered by "save as" button? (realized as submit form button)? If yes, can I run firstly some JavaScript function (gathering textarea data and format them) and later save this in file?
How this kind of data can be passed to this server-side script?
Thank you for all kind of help and advice.
EDIT:
I see that some users already point <a> tag with download attribute, but there is one additional issue: we have to assume IE as web browser, which by default does not support download attribute.

The correct answer was posted as a comment instead of as an answer for some reason. Code courtesy of gabrielperales:
JavaScript:
$(function(){
function toCSV(text){
var str= 'data:application/octet-stream;charset=utf-16le;base64,';
str += btoa(text);
return str;
}
$('#editor').on('change', function(){
$('#download').attr('href', toCSV($(this).val()));
});
});
HTML:
<textarea id="editor"></textarea>
<br/>
<a id="download" href="" download="file.csv">Download</a>

Related

Custom HTML,CSS,JS,PHP Pages in Wordpress [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am new to Wordpress. I am used to make websites from scratch.
I am currently working on a wordpress template (Astra).
I need to make a custom page using HTML,CSS,JS,Php from scratch and add it to my wordpress pages.. How can I do it?
I've google it and saw many approaches but didn't get anyone of it.. Some suggested to make a Parent/Child related pages but I don't know ..
Can I just put a .php file in the directory and make a link between it and wordpress pages?
How can I link css/js pages with them also ?
Simply Create a .php file with all the html css JS and php code. on Top add comment inside your file
<?php
/* Template Name: Custom Page HTML */
and then create a new page and Select new created Template and publish that page.
you can create this file inside your theme folder.
I would suggest creating a normal page in wordpress then in the back end editor you can edit the html raw. I usually use my JavaScript inside my html. As for the css you can edit that by going to the page you created when logged in, then clicking customize. There should be a additional css option where you can edit the styling.

Transferring a file from an input to an iframe JavaScript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am working on a project : I need to extract the text of a PDF file and put this text in a "div".
For the moment I managed to do it by using the tag <iframe>.
But it works only when I know the path of the PDF File like for instance : src="nameofthefile.pdf" or src="folder/nameofthefile.pdf"... And now I would like to have the same result but when this PDF file is uploaded by an extern users in front-end.
So I think about the tag <input id="input" type="file"> but when I used it alone with my PDF I manage but the text is still encoded ...
So here are my questions (sorry for this four questions ... :P)
0) Firstly is it easy to decode a PDF text so that I can use only the <input> tag ?
1) If not can we get back a file in input and stock it in an iframe ? (thanks to javascript)
2) If the answer to the second question is "no" does it exist a way to upload a PDF file in an iframe and to give to this frame a special "src"attribute. Or is it possible to define dynamically the attribute "src" (like in day-to-day language : "if a user uploads a PDF file, my programm is able to know that the PDF is at this precise place and so it can extract the text" ?
3) Or last question : is it possible to upload a file thanks to the tag <iframe> by using only javascript or maybe JQuery but no AJAX or PHP? If not which method I should work on it ?
(I don't really want to use backend technologies like PHP^^)
To sum up about my code : I integrated the code from https://github.com/hubgit/hubgit.github.com/tree/master/2011/11/pdftotext into my project. But you need to know the src of the PDF ...
Thank you.
I don't really know if you can "extract" the text out of a PDF. But i think the part with the "special" src attribut would be the easyest way to use php.
<?php
$file = //Some Code for choosing the newest file in a directory;
echo '<iframe src="',$file,'"></iframe>';
?>

HTML Input onclick to javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm new to JavaScript and I'm trying to link my button to a external function in a JavaScript file on my c: drive. The current code looks like
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="MapPoint()" >
What I want it to do is to go to the JavaScript file (src="./_JavaScript/Map.js) and run the MapPoint() function. This has to be possible?
Thanks,
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="JavaScript:MapPoint()" >
Include the JavaScript file with this in the header
<script src="./_JavaScript/Map.js"></script>
You need to include the external file that contains the function.
In your html add the script tag to the javascript file loc:
<script type="text/javascript" src="path/to/jsfile/js"></script>
You have two basic routes:
You can open your static html file that uses relative links everywhere to reference your additional resources. So you can include your javascript file using <script src="./_JavaScript/Map.js"></script> if Map.js is in the _JavaScript folder along with your HTML file.
You can have a Webserver hosted locally on your machine to serve static and dynamic content from your machine. A good place to start with this is by using a WAMP application stack.
The easiest/simplest would be to do the following:
Run your HTML thru a web server (Apache on *nix or IIS on Windows)
Put the HTML file and javascript file in the same folder
Edit the HTML file to include a line at the bottom: <script src="Map.js"></script>
Make sure the MapPoint() is properly defined in your Map.js file
Do as agressen said and then to add event on your button try this
var bt = document.getElementById('btnPoint');
bt.addEventListener('click', function () { MapPoint();}, false);
What you have will actaully work just fine as long as you have a function called "MapPoint" defined on your page.
Your function should be available to this page either included in the page or linked to an external file. It can be hosted online somewhere or just relative to this page's URL... but it shouldn't be linked to off your actual C:\ (for security reasons... and when you do publish this page it won't work).
The purists will suggest a few changes to your code though.
If you use the onclick attribute, most developers these days use all lower case
Typically functions start with a lowercase letter by convention... e.g. mapPoint();
For cleanliness you'll likely want to put those functions in a separate file that can be cached by the end user's browser (using an expires header)
If you end up using jQuery (or something similar) you can make you code a bit cleaner (although a bit abstract) by not using the onclick attribute but rather binding the event to the element through a jQuery selector
To include your function in an external file just add a tag like this to your page.
<script src="./JavaScript/Map.js"></script>
For legacy reasons the closing tag is required. Place the tag inside the <head>...</head> tag if you are unsure where to put it, but if you know it won't be needed until after the page has loaded the best place to put it is just before the closing </body> tag.
If you do end up using jQuery there's several ways to bind this event but the easiest is to use jQuery's click method:
$('#btnPoint').click(function(){
//do what you want here... or even call another method
mapPoint();
});

Is there a way to reduce copy pasting in html/css for content which every page contains? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.

Javascript download contents of a element [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Download textarea contents as a file using only Javascript (no server-side)
Basically I have a live html editor in javascript and I want to add the ability for the user to click a button or link and download their html document. My idea was just to download the file with the contents of the textarea element, but I can't seem to find out how.
I do have php if any server-side things are needed, it doesn't have to be strictly javascript but I want an option to do this. Thanks! And please comment because sometimes my questions can be rather confusing :|
Well there is an another simple way to do this on the client side itself, i believe that will be a best fit for you because, the html editing is done on the client side and you dont need any server data.
http://pixelgraphics.us/downloadify/test.html
the above component lets us download a content from the client side and WYSIWYG editor is a DIV with a Contenteditable true attribute which allows editing, so you can get the html content and pass it on to this component for client side download

Categories