I'm new to the Jquery world and am having an issue with the code below. I'm hoping you can let me know what I'm doing wrong.
<script type="text/javascript">
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().contains("x")) {
newNum.val("");
} newNum.clone().attr('alt','999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
</script>
The issue I am having is that my application has a SSN box which on page load,for security reasons, is populated xxx-xx-9999. However, if a user wants to update it I am attempting to clone the box, but changing the format to 999-99-9999.
The code above works fine in Firefox, however in Chrome and all versions of I.E. the field is not auto-inserting the dashes for the SSN. This causes the authentication to fail.
A few changes I've tried after research that have not worked are,
Changing the attr() to prop()
Changing the $ to Javascript
I appreciate any advice you can give me. Also let me know if I need to provide any additional information/code.
Regards,
I believe this is what you are trying to do.
JSFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var $ss = $(this);
var ssval = $ss.val();
if (ssval.indexOf("x") > -1) {
$ss.val("");
} else {
ssval = ssval.split(/\D+/g).join('');
ssvals = ssval.match(/(\d{1,3})(?:(\d{1,2})(\d{1,4})?)?/);
if (ssvals) {
ssvals.shift();
ssval = ssvals.filter(Boolean).join("-");
}
$ss.val(ssval);
}
});
});
Please try this
Demo: jsFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().indexOf("x")) {
newNum.val("");
} newNum.clone().val('999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
Related
there is a page with some basic HTML that I cannot touch that looks like this:
<a class="continue-shopping" href="https://someURL">Continue shopping</a>
what I want to do is send the user to a different link when they click on the someURL text link. the user can come to a page containing this html from many other pages.
i have tried many hours but cannot get my js to recognize a click event for a class associated with hyperlinked text. i could really use some help here. this is the js code i wrote which does not work
window.onload = function() {
prepEventHandler();
}
function prepEventHandler () {
var myClass = document.getElementsByClassName("continue-shopping");
myClass[0].onclick=window.open(document.referrer,"_self");
/* which make my pages go haywire OR THIS -- which also does not work */
myClass[0].addEventListener("click", function() {
window.open(document.referrer,"_self");
}
)
}
It just keeps ignoring the second function, and I am sure I am doing some really basic that is wrong. Again, thanks for any help!
Apart from preventDefault() you could also use return false
window.onload = function () {
var myClass = document.querySelector(".continue-shopping")
.onclick = function () {
window.location.href = "http://elsewere.com";
return false;
}
}
this code should work but it no longer does and i do not know why any hint much appreciated - there seems to be some problem with myClass[0]
window.onload = function() {
var myClass = document.getElementsByClassName('continue-shopping');
myClass[0].addEventListener("click", function(e) {
e.preventDefault();
window.location.href = document.referrer;
});
}
Java script in Html is as follows.
$(document).ready(function () {
var found = {{.found}}
window.alert("hiiii");
if (foundRecords==true) {
document.getElementById("abc").style.display = "block";
}
return
});
This should get loaded during the time of html loading. But it's not at all loading. I didn't find anything wrong in this simple peace of code.
if you want to get elements with class found {{.found}}
window.onload = function()
{
var found = document.getElementsByClassName("found");
if (found) {
document.getElementById("abc").style.display = "block";
}
}
If you use jQuery to load that function it will take a slight change:
$(document).ready(function () {
// get the class found and assign it to a variable found
var found = $('.found') // it was {{.found}} producing an error
window.alert("hiiii");
// where does foundRecords come from? it is up to you to clear this
if ( foundRecords == true ) {
document.getElementById("abc").style.display = "block";
}
// what is the return good for?
// it would be better to return true or false
// or leave it away
return;
});
Check the jsFiddle:
http://jsfiddle.net/bx0e18L4/
Now it alerts the message, but still has the problem with the variable foundRecords. Take care for that.
EDIT:
According to your comments above the variable foundRecords should be found, so the critical line should be:
if ( found == true ) { // processing }
First Question here, too! Yay! Just moved this from AskUbuntu.
I am just about to finish a little private project for gaining some experience where i try to change the app layout so it works as a normal website (on Jimdo, so it was quite of a challenge first) without much JavaScript required but is fully functional on mobile view.
Since Jimdo serves naturally only the actual site, I had to implement an
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
redirect into the __doSelectTab() function in tabs.js . (In js I took the values from the jimdo menu string to build the TABS menu with this link attribute)
Now everything works fine exept at page load the first tab is selected. I got it to set the .active and .inactive classes right easily, but it is not shifted to the left.
So my next idea is to let it initialize as always and then send a command to change to the current tab.
Do you have any idea how to manage this? I couldn't because of the this.thisandthat element I apparently don't really understand...
Most of you answering have the toolkit and the whole code, but I am listing the select function part of the tabs.js:
__doSelectTab: function(tabElement, forcedSelection) {
if ( ! tabElement)
return;
if (tabElement.getAttribute("data-role") !== 'tabitem')
return;
if (forcedSelection ||
(Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) {
window.clearTimeout(t2);
activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
offsetX = this.offsetLeft;
this._tabs.style['-webkit-transition-duration'] = '.3s';
this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
this.__updateActiveTab(tabElement, activeTab);
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
e.classList.remove('inactive');
});
var targetPageId = tabElement.getAttribute('data-page');
this.activate(targetPageId);
this.__dispatchTabChangedEvent(targetPageId);
} else {
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
el.classList.toggle('inactive');
});
var self = this;
t2 = window.setTimeout(function () {
var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)');
[].forEach.call(nonActiveTabs, function (el) {
el.classList.toggle('inactive');
});
}, 3000);
}
},
...and my app.js hasn't anything special:
var UI = new UbuntuUI();
document.addEventListener('deviceready', function() { console.log('device ready') }, true);
$(document).ready(function () {
recreate_jimdo_nav();
UI.init();
});
So meanwhile found a simple workaround, however I'd still like to know if there is another way. Eventually I noticed the __doSelectTab() function is the one that executes the click, so it does nothing but to show the other tab names when they are hidden first. so I added the global value
var jnavinitialized = false;
at the beginning of the tabs.js and run
var t = this;
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 0);
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 1);
setTimeout(function(){jnavinitialized = true;}, 10);
at the top of the __setupInitialTabVisibility() function. Then I changed the location.href command to
if (activeTab.getAttribute('jimdo-target') != null && jnavinitialized)
location.href = activeTab.getAttribute('jimdo-target');
And it works. But originally I searched for a way to change the tab on command, not to run the command for selecting twice. So if you know a better or cleaner way, you are welcome!
I am not a programmer, however I have been trying to look at similar samples to come up with my own version, here is what I am trying to do.
<script type="text/javascript">
var advertContainer = null;
var adblocked = null;
function Checkads() {
if ($('.wp_bannerize').height() == 0) {
var adblocked = document.createElement("span");
var adnotice = document.createTextNode("Please support our website by enabling ads");
adblocked.appendChild(adnotice);
var advertContainer = document.getElementById("wp_bannerize");
advertContainer.appendChild(adblocked);
};
}
$(document).ready(function(){
Checkads();
});
</script>
However I am getting an error : Uncaught Type error: Cannot call method append child "null"
Can anyone help me fix it
Update
Here is the much nicer and better code, however the text can only be visible in the source code and not on the website.
<script type="text/javascript">
function checkads() {
if ($('.wp_bannerize').height() == 0) {
$('<div id="adnotice">').text('Please support our website by enabling ads').appendTo('.wp_bannerize');
};
}
$(document).ready(function(){
checkads();
});
</script>
You use a class selector with jQuery:
$('.wp_bannerize')
But an ID selector with the native DOM method:
document.getElementById("wp_bannerize");
They're not the same. To fix your script, replace getElementById('wp_bannerize') with getElementsByClassName('wp_bannerize')[0], or just do it with jQuery:
if ($('.wp_bannerize').height() == 0) {
$('<span>').text('Please support our website by enabling ads').appendTo('.wp_bannerize');
}
<script type="text/javascript">
$(document).ready(function() {
alert("test");
document.getElementById("currentemp").onclick = disableThem;
});
function disableThem(){
if (document.getElementById("currentemp").checked) {
document.getElementById("edate_m").disabled = true;
document.getElementById("edate_y").disabled = true;
}
else {
document.getElementById("edate_m").disabled = false;
document.getElementById("edate_y").disabled = false;
}
}
$(function(){
alert("test2");
if (document.getElementById("currentemp").checked) {
document.getElementById("edate_m").disabled = true;
document.getElementById("edate_y").disabled = true;
}
else {
document.getElementById("edate_m").disabled = false;
document.getElementById("edate_y").disabled = false;
}
});
</script>
Hello. This script was working a few weeks ago. Now I noticed it stopped working even though I havent changed it. Usually when my javascript stops working its because I have tons of javascript and sometimes the functions cross over each other. But I've put in alert boxes and it seems it doesnt even load as it should.
Any ideas for debugging?
Put your custom function before document.ready, just in case.
You do not need two ready functions.
Make sure the elements are available in your page and the selectors are valid.
Here is your simplified code:
function disableThem() {
var state = $("#currentemp").is(":checked");
$("#edate_m").attr("disabled", state);
$("#edate_y").attr("disabled", state);
}
$(function() {
disableThem();
$("#currentemp").onclick = disableThem;
});
you example works for me see: http://jsfiddle.net/manuel/KXCM3/
Are you sure that jquery is loaded? Is the following code true?
alert(jQuery !== undefined);