Jquery change function inside click function not working properly - javascript

I have selects with some values, and i want to remember value by clicking one of them and after change do something with this.
$("select[id^='zmieniaj']").click(function() {
var poprz=$(this).val();
$("select[id^='zmieniaj']").change(function(){
...
});
});
So im remembering clicked value in variable and i refer to it in change function. It works good when i click only once on select and made change in the same step. If i click few times it does not trigger change function imimmediately, but it remembers how many times i clicked and when i made change it acts crazy by making up for previous clicks.
How to do that, if CONDITION A-click and CONDITION B-change is made only then, and only once do what is in change function ??

Try something like
$("select[id^='zmieniaj']").focus(function () {
var $this = $(this);
$this.data('fvalue', $this.val());
}).change(function () {
var $this = $(this),
cval = $this.val(),
pval = $this.data('fvalue');
});

Related

Use multiple elements to trigger single onclick function

Right now this will work when I click "box1" but not "box2". I'd like to have a single tapBoxes variable that listens for a click on either box1 OR box2, and triggers the function. Any ideas?
var tapBoxes = document.getElementById("box1") || document.getElementById("box2");
tapBoxes.onclick = function() {
...
}
Define the function first. Then assign it to all the buttons you want.
tapBoxesClick = function() {
...
}
document.getElementById("box1").addEventListener("click", tapBoxesClick, false);
document.getElementById("box2").addEventListener("click", tapBoxesClick, false);
Give your elements a class, lets say myBox, then use jquery to do what you want:
$(document).ready(function(){
$('.myBox').click(function(){
//do what you want with the clicked box
})
})

How to pass a value from textbox into a jQuery function?

I'm trying to figur out how I can set the var number and then use it in my other function Custom.init(number); and make it stay on the page.
//Set number onclick
function setVar() {
var number = document.getElementById("textbox").value;
//Pass in number
jQuery(document).ready(function() {
Custom.init(number);
});
};
If you're using jQuery, the ready function should wrap all other functions as it will be invoked first and foremost.
$(document).ready(function(){
var number = document.getElementById("textbox").value;
//Then do your validation here
var setVar = function(){
Custom.init(number);
//whatever else is involved with this
}
})
If that doesn't work I'd check the console for a specific error and ensure your Custom.init function is working as expected.
It doesn't make sense to hide the ready handler inside a function. The comments in your code do also suggest that you wish to call Custom.init in response to a mouse click on some element. You would register an event handler to this end.
A suggested streamlining:
//Set number onclick
$(document).ready(function() {
$(<selector for clickable elements>).on (
"click"
, function (eve) {
Custom.init(parseInt($("#textbox").val()));
1;
}
);
});

Why is jQuery .click() is skipped over?

I have a small script of javascript which iterates over a set of checkboxes which grabs the name attribute and value and then convert it to json. Then I use that value to set the href of an element and then try to trigger a click.
For some reason everything seems to function properly except for the click. I successfully change the href, I console.log() a value before the .click() and after. Everything hits except for the click. The url in the href is value as I clicked it manually.
I have my script included just before the closing body tag and have it wrapped in $(document).ready(). and I do not have duplicate ID's (I viewed the rendered source to check)
Can anyone offer some insight on this?
Here is the javascript
$(document).ready(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var i = 0;
var list = new Array();
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var id = $(this).val();
list[i] = new Array(name, id);
i++;
});
var serList = JSON.stringify(list);
console.log(serList);
var webRoot = $("#webRoot").text();
$("#exportLink").attr('href', webRoot+"/admin/admin_export_multiExport.php?emailList="+serList); //hits
console.log('1'); //hits
$("#exportLink").click(); //this line never executes
console.log('2'); //hits
});
});
$(selector).click() won't actually follow the link the way clicking on it with your mouse will. If that's what you want, you should unwrap the jquery object from the element.
$(selector)[0].click();
Otherwise, all you're doing is triggering event handlers that may or may not exist.
I may guess you need
$(document).on('click', '#multiExport', function(e){
(you can replace document by a nearest element, if you got one).
if you need dynamic click event binding.
EDIT
I would try something like that :
$(document).ready(function() {
$("#exportLink").click(function() {
window.location = $(this).attr('href');
});
$("#multiExport" ).on('click', function(e){
//whatever you want
$('#exportLink').attr('href', 'something').trigger('click');
});
});
$("#exportLink").click(); // this would launch the event.
I must admit I am very surprised that the .click() does not work.
If the idea is to load the page, then the alternative is
$(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var list = [];
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
list.push([name, val]);
});
var serList = JSON.stringify(list);
var webRoot = $("#webRoot").text();
location=webRoot+"/admin/admin_export_multiExport.php?emailList="+serList;
});
});

Adding new input:checkbox and not has value

I have problem in add new input:checkbox, when i adding new input and checked on it next setup clicked on button i not have value for input:checkbox that was checked. how is fix it?
DEMO: http://jsfiddle.net/G4QRp/
$(function () {
$('a.add_input').live('click', function (event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class').split(" ")[0];
var size_un = $($class).length;
var $this = $(this),
$div = $this.closest($class),
$clone = $div.clone().hide().insertAfter($div).fadeIn('slow');
$clone.find('.adda').not(':has(.remove_input)').append('<div class="mediumCell"></div>');
$clone.find('input').val('').prop('checked', false);
$this.remove();
var size_un = $($class).length---1;
$($class + ':last input:checkbox').prop('name', 'checkbox_units[' + size_un + '][]');
console.log($($class + ':last input:checkbox').prop('name'));
});
});
Your code always clears the value of all the checkboxes it adds:
$clone.find('input').val('').prop('checked', false);
It's working fine, though it's quite confusing. The alert correctly shows the checkboxes that are checked, but since your code has set the value to '' for each of them, well, it's empty. If you change it like this:
$clone.find('input').prop('checked', false);
it shows the values to be the same as the original checkboxes.
You might want to think about using "data-" attributes instead of the "class" string for storing things like that "add_units" class name.

Why is my jQuery plugin for removing text on focus and re-adding it on blur not working?

I would like the text in the value field of a text box to disappear when that text box gains focus, and then reappear in response to the eventual blur event - but only if the value is empty (that is, if the user hasn't entered anything after putting focus into the text box). So far, I have this:
this.each(function() {
obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
This plugin works if I have only one element in the page.
If I have two elements then it doesn't work. Why would this be?
The obj variable isn't scoped to the function, it's globally scoped, so there will only be one of them -- set to the last one that the plugin is applied to. Use the var keyword to scope the variable to the anonymous function alone so that there will be one for each thing that the plugin is applied to.
You'll want to write your plugin seperate from your code implementation.
Your plugin would look something like this:
(function($) {
$.fn.watermark = function() {
return this.each(function() {
var obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
};
})(jQuery);
Then to use your plugin:
$(document).ready(function() {
$('.watermark').watermark();
});
Additionally as tvanfosson you'll want to include the var keyword on your obj. If you don't have the var keyword on your obj declaration only the last textbox will have the watermark effect.

Categories