Develop Reference

Saving into Local Storage with a Click Event

Hello stackoverflow: I am working on getting a click event save into local storage. However, I get that it is undefined as the answer. This is what I have so far as my click event:
$(document).ready(function() {
$(".btnlocalStorage").on("click", function() {
event.preventDefault();
console.log("I am clicked!")
var myContent = $(this).(".btnlocalStorage").val();
localStorage.setItem("myContent", myContent);
//localStorage.setItem("myContent", JSON.stringify(myContent));
})
})
This is the HTML part of it, a button and a text area:
<textarea type="text" class="TextBoxColors-17 form-control" id="TextBoxStorage-17" aria-label="5:00 PM" aria-describedby="inputGroup-sizing-sm"></textarea>
<button class="btn btn-primary btnlocalStorage" type="button" todo="saveToDo-11am"><i class="fa fa-floppy-o" style="font-size:18px;"></i>
</button>
What should happen is that when I type any content into the text area, when I click the save button, this content should be saved into local storage. I am getting the key name, but the value/content undefined. Please, help me get this working. Thanks!

You're trying to get the value of your button instead of the value of the textarea with:
$(this)
Your code should look like this :
$(document).ready(function(){
$(".btnlocalStorage").on("click", function() {
localStorage.setItem("myContent", $(".TextBoxColors-17").val());
console.log(localStorage.getItem("myContent"));
})
});
EDIT :
This code only works for one specific textarea, if you want to make it work for multiple textareas followed by a button, you must use :
$(this).prev()
"this" refers to the button wich triggered the event and the prev() function allow you to get the element just before it.
Be careful, your local storage item must have a different name from one button to another, otherwise all buttons will override the same item content, for the example I took the ID of your textarea but it can be any iterated variable :
$(document).ready(function(){
$(".btnlocalStorage").on("click", function() {
localStorage.setItem($(this).prop("id"), $(this).prev().val());
console.log(localStorage.getItem($(this).prop("id")));
})
});

Add new fields inside modal window on change at select (rails_admin)

I have:
When I click button "Add new" - I have modal window made by rails_admin with select and options there. Select element have id "#select_from_modal"
I want:
when user changing option in #select_from_modal - to add new fields in this modal window and save form.
I know, that I can add custom js by adding file to assets/javascripts/rails_admin/custom/file.js and I did it.
My code is:
$(document).on("change", "#modal", function() {
$('#select_from_modal').change(function() {
alert('hello!')
});
});
But it have strange behaviour. When I changing select option for the first time - nothing happens. For second time - I have alert 'hello'. For third time - I have this alert twice. Then 3 times, 4, and so on.
Please, help me to understand what am I doing wrong and how to make it in right way?

Try to use event delegation, e.g.:
$(document).ready(function() {
$(document.body).on('change', '#select_from_modal', function() {
alert('hi');
});
});

What causes blur?

I'm trying to make my own Wysiwyg redactor.
I have a problem: when I click the control button contenteditable div loses focus and make some actions, which I'd like to make only if was not clicked control-button.
So is there something like this in javascript:
$('#tarea').blur(function(event){
if($(event.reasonelement).is('#bold')) return false;
//Other actions here...
});
Thank you!

One way would be capturing the document's click event and decide what to do with that:
$(document).click(function(event){
elem = $("#tarea");
if (!elem.is(event.target) && elem.has(event.target).length == 0) {
// do your stuff here..
}
});
PS: This should work for all kind of elements and not just textareas.

Change the button from disabled='true' to 'false'

I have written a code regarding a submit form. When I click the button(Download), the status is disabled, and I want to make it enabled, but if I add an alert box between submit and make the disable false, it works. If I remove the alert box, it doesn't work. Is that the time problem or else? How can I solve it?
How can I change the button from disabled='true' to 'false'?
Here is my code:
<div id="fm" class="btnStyleFunc" onclick="disabled='true';submitform()">
<a><span>Download</span></a>
</div>
function submitform(){
var element1 = document.getElementById('form');
if (element1 != null){
} else {
}
document.getElementById('form').submit();
alert('test'); // <--------
document.getElementById('fm').disabled = false;
}

Try this:
function disabledFunc(id)
{
var divObj = document.getElementById(id);
divObj.disabled = false;
}
And call the function with the button id:
disabledFunc('fm');
Hope it helps!

Use this:
<div id="fm" class="btnStyleFunc" onclick="this.disabled=true;submitform()">
<a><span>Download</span></a>
</div>
Of course, the element is a DIV and not a button, so I don't know how well disabled will work on it...

As Farish and MrXenotype have pointed out, the "disabled" attribute is meaningless to a div element. It can be added dynamically but won't affect the behavior. But I understand why you might want to use a div instead of a button, especially if you have spent time customizing your style sheet to get it to look the way you want.
I think you can get the behavior you want though by making a small change:
<div id="fm" class="btnStyleFunc" onclick="this.onclick=null;submitform()">
<a><span>Download</span></a>
</div>
Basically when your onclick handler executes, you disconnect it from the div element. Now when someone clicks your "button" a second time it will do nothing. During the onclick you might want to also change your class to something other than btnStyleFunc - perhaps a new class called btnStyleFuncDisabled. Then you can modify your style sheet so that any div element with that class appears greyed out.
<div id="fm" class="btnStyleFunc"
onclick="this.className='btnStyleFuncDisabled'; this.onclick = null; dosubmit(this)">
<a><span>Download</span></a>
</div>

Note that:
<div id="fm" class="btnStyleFunc" onclick="disabled='true';submitform()">
will create a global variable disabled with the string value 'true', and
document.getElementById('fm').disabled = false;
compares the disabled property of an element with id "fm" to the boolean value false.

Javascript function only executing one line

I've got a div that starts out as hidden, and shows up when a button is clicked. There is another button on the div, and the onclick event calls this function:
function popuppage2OK() {
alert("you clicked ok!");
var x = new Object();
x.name = $("#boxforname").val(); //this is a text input
x.option = $("#boxforoption").val();//this is a text input
alert("hiding newfactorpage2");
$("#popupform").hide(); //this is a div containing the text inputs and the button with the onlcick event that calls this function
alert("popupform hidden");
displaystuff(); //another function ive written that needs to be called
alert("this is after the display attempt");
}
My probelm is that the only line that seems to execute is the line to hide the div. None of the alert boxes appear, and the displaystuff() function doesn't get executed, but the div does go back to being hidden. Any thoughts on why lines of code might get skipped like that?

When do you attach the eventhandler to the button inside the div ?
You should do it after the page has done loading, so in Jquery you can do something like:
$(document).ready(function () {
//attach the eventhandler here
})

Usually this kind of behavior happens when you've got an error in your javascript. Check to ensure that all of your selectors are valid and that there aren't any errors elsewhere.