why after search and click on result search and click on plus(button add input) in the example on part Adding input, Date formating($('.find_input').delegate('input.date:text', 'keyup', ....) and normal number formatting($('.find_input').delegate('input.numeric:text','keyup',...) not work.
EXAMPLE: http://www.binboy.gigfa.com/admin/tour_foreign/insert_foreign
Js full code: http://jsfiddle.net/ZpDDR/
...
///// Date formating /////////////////////////////////////////////////////////////////////////////////////////
$dateSet = 0;
$monthSet = 0;
$yearSet = 0;
$('.find_input').delegate('input.date:text', 'keyup', function () {
$val = $(this).val().replace(/[^\d]+/g, "").match(/\d{1,12}$/);
if($val == null) {
return;
} else {
$val = $val.join("");
}
if($(this).val().match(/\d{4,}$/) && $val.length%2 == 0) {
$val = $val.match(/\d{2}/g);
if($yearSet < $monthSet) {
if($val.length == 4) {
$(this).val($val.join("").replace(/(\d{2})(\d{2})(\d{4})$/,'$3/$1/$2'));
$yearSet++;
} else if($val.length == 6){
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{4})$/,'$4/$2/$3'));
$yearSet++;
}
} else {
if($monthSet < $dateSet) {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$4/$3'));
$monthSet++;
} else {
if($val.length == 2) {
$(this).val($val.reverse().join("/"));
$dateSet++;
$monthSet++;
} else {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$2/$4'));
$dateSet++;
}
}
}
}
});
///normal number formatting/////////////////////////////////////////////////////////////////////////////////////////
$('.find_input').delegate('input.numeric:text','keyup',function () {
$val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
$(this).val($val)
});
The problem is that the element that you're delegating from,.find_input, doesn't exist yet when you're setting up the delegation function. delegate allows for defining event handlers for elements that aren't created yet, but only elements that match the second selector E.g., $('#must-exist-now').delegate('.can-be-created-later', ...);
I'm not sure if I described that well, but the solution is to change your statement to delegate from something that already exists on DOM load. For example: $(document).delegate('input.date:text', ...).
Related
I got a little problem that I can't solve...
I usually check my form like this:
function checkFirst(field) {
if (field.value.length < 2 || !regLetters.test(field.value)) {
//do something
} else {
//do something else
firstNameOk = true;
}
}
and on the HTML side with onblur="checkFirst(this)".
Now I'm using OOP and I can't use my methods in onblur and I don't know how I could call the class in the onblur HTML attribute...
I already got a solution to work around this without using onblur in HTML and in my case I'd like to know if it's possible or not.
Anyone to help me please?
Edit:to avoid people telling me to use addEventlistener i show you my solution that works fine but not the one i wanted to use...
this.data.forEach(item => item.addEventListener('blur', function () {
console.log(item.id)
// check first name field //
if (item.id === "first") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) { // if this field length =
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.firstNameOk = true;
}
// check last name field //
} else if (item.id === "last") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.lastNameOk = true;
}
// check email field //
} else if (item.id === "email") {
if (item.value.length < 2 || !this.regmail.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.emailOk = true;
}
// check textarea field //
} else if (item.id === "message") {
if (item.value.length < 1 || item.value > 100) { // if length of item is sup or equal to 1 and
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.messageOk = true;
}
}
}.bind(this))); ```
It should be a static function that belongs to the class then. That way you can call it directly.
I want to make the alert appear if the number of infant is more than adults.
I've tried but it looks like something went wrong.
Please help.. thanks before
ex: http://jsfiddle.net/pBxfX/132/
var button = $('#submit'),
adult = $('#adult option:selected').val(),
infant = $('#infant option:selected').val();
if(adult > infant) {
$("#alert").hide;
}
else if(adult == infant) {
$("#alert").hide;
}
else {
$("#alert").show;
}
A few things:
You need to treat hide and show as methods (call them as .hide() and .show())
You need to execute your checking code in the change event handler for the select.
When comparing adults to infants, you need to treat them as integers (they are currently being treated as strings).
See http://jsfiddle.net/pBxfX/133/ for updated code
var button = $('#submit');
$(document).ready(function() {
$(button).attr('disabled', true);
$('input[type="text"]').on('keyup', function() {
var from = $("#from").val(),
to = $("#to").val();
if (from != '' && to != '') {
$(button).attr('disabled', false);
} else {
$(button).attr('disabled', true);
}
});
// Run code when any <select> changes
$("select").on('change', function() {
var adult = parseInt($('#adult option:selected').val()); //convert to integers for comparison
var infant = parseInt($('#infant option:selected').val()); //convert to integers for comparison
if (adult > infant) {
$("#alert").hide(); //Note that it is .hide() not .hide
} else if (adult == infant) {
$("#alert").hide();
} else {
$("#alert").show();
}
});
});
hide() and show() are functions so you need to add () to call these functions.
if(adult > infant) {
$("#alert").hide();
}
else if(adult == infant) {
$("#alert").hide();
}
else {
$("#alert").show();
}
I want to create a system that displays certain content based on the number for this innerhtml content...
Here's the actual element itself, 17 is just the number for mine it is different for each user:
<span id="your_div_id_diamonds"><dd><div class="field_uneditable">17</div></dd></span>
I want it to display if their number is say between 10 and 20... Here's a code I've been trying to work with, but it only does one number at a time and currently isn't working...
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML = "17") {
document.getElementById('elitecontent').className="gotelite";
}
else {
document.getElementById('elitecontent').style.display="none";
}
}
});
Here's a version that works, but again only works for one number at a time... It'd be a huge pain if I had it go up to say 150 or 200, I'd have to make like 200 else if statements.
$( "#lev1" ).load('/u' + _userdata.user_id + ' #field_id-14 dd', function() {
var divs= document.getElementsByClassName('field_uneditable');
for (var i = 0, len = divs.length; i < len; ++i) {
if(divs[i].innerHTML.indexOf("7") != 1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else if(divs[i].innerHTML.indexOf("16") != -1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else if(divs[i].innerHTML.indexOf("17") != -1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else {
document.getElementById('elitecontent').innerHTML="Starter";
}
}
});
I basically want a code that works similar to with values, where I can just put something like >=10 and =<20
The problem you are facing with your current code is that you aren't using the correct comparison statements = is declarative, not used for comparison. In its place you should be using ==(matches regardless of data type) or === (must match data type as well) for instance
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML = "17") {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
should be
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML == "17") {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
However, for your needs something along the lines of:
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML <=20 && document.getElementById('your_div_id_diamonds').innerHTML >=10) {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
should work.
I am using this function to show and hide objects. I think the reason why this isn't working is because I am not selecting the object correctly.
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
d3.selectAll("#button1").on("click", function(){
generalHideOrShow($("#buttonsRight")); //selection
});
var buttons = d3.select("#svg").append("g").attr("id", "buttons");
var buttonsRightTop = buttons.append("g").attr("id", "buttonsRightTop");
var buttonsRight = buttonsRightTop.append("g").attr("id", "buttonsRight");
I wish to select 'buttonsRight' as above.
When I change it to select all 'div' tags to test it, it works.
generalHideOrShow($("div")); //selection
I have tried different ways of selecting it such as :
generalHideOrShow($(buttonsRight)); //selection
generalHideOrShow($(".buttonsRight")); //selection
generalHideOrShow($("g#buttonsRight")); //selection
None are working. How do I select this right side buttons ?
Since you are using jQuery, I think you can write it as
function generalHideOrShow(element) {
var $elem = $(element);
if ($elem.length) {
var $hid = $elem.filter('[data-hidden="true"]').removeClass('hidden').attr("data-hidden", false);
$elem.not($hid).addClass('hidden').attr("data-hidden", true);
} else {
return false;
}
}
This is how I managed to do it:
Call the generalHideOrShow Function with the onClick:
d3.select("thisButton").on("click", function(){
generalHideOrShow("#buttonsRight");
}
set the class to visible first so you can check the class later:
buttonsRight.classed("visible", true);
Then do if statements to check if the class is hidden or visible
function generalHideOrShow(element) {
console.log(element[0].getAttribute('class'));
if(element[0].getAttribute('class') === "visible"){
element[0].setAttribute('class', "hidden");
} else{
element[0].setAttribute('class', "visible");
}
I'm using Javascript to make my checkboxes larger. Doing this I use image one for black checkbox and another one with the checked checkbox. It works like the real checkbox. However, when the page loads, the black checkboxes are not successfully loaded unless I click somewhere in the page to invoke them. Please check here to the page.
Belowing is my js code which I think it will impact this:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
}
Below is my image on form load:
And this is my page when clicking on anywhere:
Which other functions and variables are already defined. Thus could anyone help me to enable them to display whenever the form loads?
I don't known why you use that
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
But when I open your script in http://checkintonight.freeiz.com/js/custom-form-elements.js
Try to call function clear() in end of Custom.init(), it works
init: function() {
//
...
//
this.clear();
}
Sorry for my bad English
Eventually, I found a bug in my Javascript code. I add the else statement in the init() function to test if the checkbox is also not checked. So the code becomes like below:
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
}
} else {
span[a].style.background = unchecked;
}
Then it works! Thanks everyone that reviewed and answered to my question.