We Keep Coding

How to reformat an auto formatted number using JQuery

Hello Im fairly new to Javascript/JQuery. I wanted to autoformat a number while it was being inputted.
I used a Jquery plugin for the same -
<script src="simple.money.format.js"></script>
And calling it using
$('.money').simpleMoneyFormat();
I want it be reformatted when I hit a button (Save) so that the value can be saved into the database.
Any help would be much appreciated.

You can use the submit event handler, the code will be called when the user hits the submit button, and before the data sent to the server
$('#your-form-id').submit(function () {
$('.money').simpleMoneyFormat();
});

See the following fiddle: https://jsfiddle.net/EliteSystemer/wv3sxo3j/
$('button').on("click", function() { //Submit
var m = $('.money').val(); //Get input value
m = m.replace(/,/g, ""); //Remove commas
$('.money').val(m); //Update input value
...send to server
});

How to pass a value from a parent window to another html page using javascript?

I have 2 windows home.html and result.html.
In home.html I have a <textarea> #txtinput and a <button> #btn.
In result.html I have another <textarea> #txtresult.
On home.html, if I enter a value into #txtinput and click #btn, I want to open result.html and pass the value of #txtinput into #txtresult.
I've tried the below code from another post, which displays the value in the new window's body but won't display it in my element
var myWindow = window.open();
myWindow.document.body.innerHTML = document.getElementById("txtinput").value;
Is it somehow possible in a simple way? I am relatively new to JavaScript, my courses are ongoing now and I am just curious to know the ways to do it. Any detailed help will be very much appreciated!

I hope i need to elaborate the below code
Button on click function in the home page:
function sample(){
//this will set the text box id to var id;
var id = document.getElementById("text_box_id").id;
//the sessionStorage.setItem(); is the predefined function in javascript
//which will support for every browser that will store the sessions.
sessionStorage.setItem("sent", id);
//this is to open a window in new tab
window.open("result.html","_blank");
}
Retrieve the value in result page:
$(document).ready(function(){
//This sessionStorage.getItem(); is also a predefined function in javascript
//will retrieve session and get the value;
var a = sessionStorage.getItem("sent");
alert(a);
});
For more information about sessionStorage
code.google.com/p/sessionstorage/
developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
I have done same thing as above, am getting values in new window that's great, but that values I am getting only in documet.ready() function. So I am not able to use these values in my JSP. once I got values I need to display them in JSP.

I hope this code help you
This should be in home page:
function sample(id) {
sessionStorage.setItem("sent", id);
window.open("result.html","_blank");
}
This is another way in the same home page function:
function sample() {
var id=document.getElementById("your_required_id").id;
sessionStorage.setItem("sent", id);
window.open("result.html","_blank");
}
This should be in result page:
function sample1() {
var a=sessionStorage.getItem("sent");
alert(a);
}
The id may be your text box id

In result.html, find the Window which opened it, using window.opener and then take your data of interest from that Window.
window.addEventListener('load', function () { // wait for ready
var home = window.opener, txtinput, txtresult;
if (home) {
txtinput = home.document.getElementById("txtinput");
txtresult = document.getElementById('txtresult');
txtresult.value = txtinput.value;
}
}, false);
In home.html, listen for a click on #btn and open result.html
// assuming button exists at invocation time
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
window.open('result.html');
}, false);

i think that a simple assignment, using the window.opener handle from within the child window, is what you need:
if (window.opener) document.getElementById("#txtresult").value = window.opener.document.getElementById("#txtinput").value;

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});

NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Trigger Full Calendar Refresh with Param on Select

I want to trigger an refresh events with a specific parameter when selecting a value in a select box.
I have my select box defined in a grails tag:
<g:select name="resourceId"
from="${Resource.list()}"
optionKey="id"
optionValue="name"
onchange="refreshCalendar()"/>
I understand that I can trigger a JS function with the onchange item in the tag.
refreshCalendar function:
$('#calendar').fullCalendar('refetchEvents')
My calendar is configured as:
$('#calendar').fullCalendar({
events: '${createLink(action:'loadSchedule' )}'
}
How can I now provide the calendar refresh function or the events item within the fullcalendar configuration with an id param selected in the select box?
Thanks

Dont know if this is the "cool" way but it is working now with this solution:
var source;
function refreshCalendar(id) {
source = '${createLink(action:'loadSchedule' )}' + '?resourceId=' + id;
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', source );
$('#calendar').fullCalendar('rerenderEvents');
$('#calendar').fullCalendar('removeEventSource', source );
}
So the calendar is loading with the new src and later its removed

Jquery/javascript copy to clipboard

I'm using http://www.steamdev.com/zclip/#usage to copy some text to the clipboard and that code is working just fine. It uses flash to create a crossbrowser solution and it is based on ZeroClipboard, which seems to be considered to be the best working solution at the moment.
However I would like to have multiple copy to clipboard buttons or links on my page. Here is an example.
http://jsfiddle.net/stofke/TB23d/
This code works, it copies the text of the coupon code to the clipboard and opens up a new page with the correct link. How can I use that code on other links without having to duplicate it for each and every link / id.
Using just the class
$(function() {
$('.copy').zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $(this).text(),
afterCopy: function() {
window.open($(this).attr('href'));
}
});
});
doesn't work: as you can see here: http://jsfiddle.net/stofke/EAZYW/
if you remove the afterCopy function you'll see that $(this).text() will return the whole page instead of just the text between the link tag.
doing something like this
$(function() {
$('a.copy', this).zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $('a.copy', this).text(),
});
});
slightly improves upon it but returns all text between the link tag as you can see here.
http://jsfiddle.net/stofke/hAh3j/

UPDATE: This no longer works but I cannot delete the post
This seems to work - someone might be able to make it more elegant
http://jsfiddle.net/5nLw6/7/
$(function() {
$('.copy').each(function() {
var linkId = $(this).attr("id");
$(this).zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $("#"+linkId).text(),
afterCopy: function() {
window.open($('#'+linkId).attr('href'));
}
});
});
});

I actually discovered that using ZeroClipboard directly is just as easy, I just added this code in case someone wants a solution without using zclip.
ZeroClipboard.setMoviePath('http://shopsheep.com/js/ZeroClipboard.swf');
$(document).ready(function() {
$(".copy").each(function(i) {
var clip = new ZeroClipboard.Client();
var myTextToCopy = $(this).text();
var myTextUrl = $(this).attr('href');
clip.setText(myTextToCopy);
clip.addEventListener('complete', function(client, text) {
window.open(myTextUrl);
});
clip.glue($(this).attr("id"));
});
});
http://jsfiddle.net/stofke/JxMbd/

This is what we follow in Oodles Technologies.
To use zero copy to clipboard you need two files
1 . ZeroClipboard.js
2 .ZeroClipboard.swf
both file can be download from here
<html>
<head>
<script src =”../ZeroClipboard.js”></script>
<script >
// configure ZeroClipboard first
ZeroClipboard.config( { moviePath : /path/swffile/ZeroClipboard.swf } );
// initialize constructor
var client = new ZeroClipboard($(“#elementid”));
/* elementid is the element on which click , the data will copy to clipboard. you can also pass multiple elements, it use jquery selector */
</script>
<body>
<input type=”text” id =”targetid”></button>
<button id =”elementid” data-clipboard-text ='data for copy’ >copy</button>
</body>
</head>
<html>
ZeroClipboard automatically copy the value of data-clipboard-text attribute when event accur on element pass to ZeroClipboard's constructor

Light weight jQuery solution... re-use class to copy text from any element.
$(document).on('click', '.copytoclipboard', function(e) {
if($("#holdtext").length < 1)
$("body").append('<textarea id="holdtext" style="height:0;width:0;border:0;outline:0;resize:none;"></textarea>');
$("#holdtext").val($(this).text()).select();
document.execCommand("Copy");
});