I have this text box
<textarea rows="20" cols="100"> </textarea>
When someones enters text into it and refreshes the page how do I make the text inputted stay there
I would attempt something myself but I do not know where to start...
You can do it using Jquery and local storage like this. See fiddle https://jsfiddle.net/sxh0n7d1/13/
This will work with multiple <textarea>'s
window.onbeforeunload = function() {
$('textarea').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
}
window.onload = function() {
$('textarea').each(function(){
var id = $(this).attr('id');
var text2 = localStorage.getItem(id);
if (text2 !== null) $('#'+id).val(text2);
});
}
Related
I'm trying to get the file blob using the following function:
$('body').delegate('[id^="prod_img"]', 'click', function()
{
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = $('#prod_img' + id).files[0]; // <- what's the solution here
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
but I get a cannot read property '0' of undefined error. I know the answer is probably on the web, I just have difficulty conceiving the correct search term. Anyway, will you assist me here? I usually code
var file = event.target.files[0];
and I now don't know how to get the event here. Thanks.
UPDATE
The markup for the input element looks like so:
<input accept="image/*" title="Choose an image with a 250 x 300 pixel resolution." data-id="2" name="prod_img2" id="prod_img2" type="file" >
var selectedFile = $('#prod_img' + id).files[0];
files is a property of a DOM element, not a jQuery object. You need to extract the DOM element from the jQuery object that wraps it:
$('#prod_img' + id)[0].files
I got my code to work by adding an event variable like so:
$('body').delegate('[id^="prod_img_"]', 'change', function(event)
{
event.preventDefault();
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = event.target.files[0];
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
I am struggling to get the HTML data from the sourcedialog in ckeditor.
I can get the HTML data from the editor itself, no problem. But getting it from the dialog is a pain in the ass.
I want to display a live preview of the HTML entered in the source dialog, and for that I need the HTML data, not from the editor, but from the dialog which the user is editing.
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialog = ev.data.definition.dialog;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var editorName = ev.editor.name;
var htmlData = CKEDITOR.instances[editorName].getData();
if (dialogName == 'sourcedialog') {
dialog.on('show', function () {
//console.log(this.getSize().width);
console.log(this);
$("#sourcePreview").css("display", "block");
$("#sourcePreview").html(htmlData);
$(".cke_dialog_ui_input_textarea textarea").on("keyup", function() {
//var dialogElementUpdated = dialogObj.getElement().getFirst();
//console.log(editorData);
//$("#sourcePreview").html(htmlDataUpdated);
});
});
dialog.on('hide', function () {
console.log('dialog ' + dialogName + ' closed.');
$("#sourcePreview").css("display", "none");
});
}
});
This is what I have so far (sorry about all the console.logs, this is work in progress). I am obviously getting HTML data from the varible: htmlData, but this is from the editor, not the dialog.
CKEditor is great but yeah, there's a lot about it that's a pain in the ass.
if (dialogName == 'sourcedialog')
{
dialog.on('show', function ()
{
// 'input' is the correct event to listen to for a textarea,
// it fires on paste too.
this.getContentElement('main', 'data').getInputElement().on('input', function()
{
console.log('textarea contents: ' + this.$.value);
}
}
}
I have created a dynamic button. and now I,m trying to add a dynamic anchor tag. But it doesn't work. Before posting this I went through all the other example, but no success. Please advice.
<script>
$(document).ready(function(){
//creating an dynamic button element
var btn = document.createElement('input');
var text = document.createTextNode('Click Me!')
btn.appendChild(text);
btn.id = "myBtn"
btn.type = "button";
btn.value="Click me!"
document.body.appendChild(btn)
//adding click event to the dynamic button
$("body").on("click", "myBtn", function(){
var myLink = document.createElement('a')
var myText = document.createTextNode('This is a dynamic link')
myLink.setAttribute("href", "http://www.example.com");
myLink.target = "_blank"
myLink.title = "www.example.com"
myLink.style.marginTop = "25px"
myLink.appendChild(myText);
document.body.appendChild(myLink);
})
})
</script>
$(document).on('click','#myBtn',function(){
//write your function here
});
Now I have a form field:
<input id="my_img_field" type="file"/>
After I select the image in the browser, I want to render the selected image file on the target img tag:
<img id="image_preview" />
But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.
I heard that this could be done using HTML5 technique. Can someone teach me how?
the code in vanilla js
var file = document.getElementById('my_img_field').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
var img = document.getElementById('image_preview')
img.src = this.result
}
The following approach will work:
var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = $('#image_preview');
img.attr('src', this.result);
}
It can be like this
const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)
I have created a button dynamically in HTML5 + Javascript. I have assigned a click event to that button. When i clicked it, it's content & background color should change. Content is changing fine, but bgcolor is not changing.
my code is;
<style>
.selectBtn{ height:60px;width:80px;background-color:yellow; }
</style>
<script>
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function()
{
this.innerHTML='voted';
this.style.backgroundColor:'blue';
}
dx();
</script>
<body><div id='abc'></div></body>
Use = instead of colon. Use this:-
this.style.backgroundColor = "#f47121";
You will wan't to change some things
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function() {
this.innerHTML='voted';
this.style.backgroundColor = 'blue';
}
}
I'm not sure if Btn.type = 'button'; is valid but it sure is pointless
and on the style you want to change : to = you only use : in objects
Also you might wan't to use textContent instead of innerHTML
I could not resist to show how I would have done this, just for fun, and its educational purposes.
window.onload = function(){
(function(){
var doc = document;
var get = function(id){return doc.getElementById(id);};
var inject = function(el,str){el.innerHTML = str;return el;};
inject(get('content'),'<button type="button" id="btn-select">SUBMIT</button>');
get('btn-select').onclick = function(){inject(this,'Voted!').className = 'voted';};
})();
};
DEMO: http://jsfiddle.net/ZNfBe/