Hi guys i using this jquery to show a div when i select a option
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
});
});
But i have a problem when i load the page get results from database, the option on select return SELECTED and the div only shows if i change the option..
can samebody help what i neeed to do to solve this?
explain again: get the val() from select and show the div without change the option... sorry for my english..
thanks
You can trigger the change after you bind it.
$('#select1').change( function(){
// your change code
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();
When the page loads (and after you bind the onchange function to your form elements) you should trigger any of these functions:
$(document).ready(function(){
$("#select1").trigger('change');
});
This way it will act as if the user selected it even if the value was loaded from the database.
EDIT: czarchaic's answer is also very good, as chaining the event trigger to the event binding is more compact and it may be easier to read the code, and in this instance is probably the better solution. The answer I provided will work fine as well, and while it's longer, it as the small advantage that it will also work in cases where the function was not bound by jquery (i.e. when the event is explicitly declared in the HTML):
<select id=""select1" onchange="if ($(this).val() == '2' ) {
$('#hide1').fadeIn('fast');
} else {
$('#hide1').fadeOut('fast');
}
">
<option...
You can do something like this. Triggering the change event after binding it.
$("#select1").change(function(){
if ($(this).val() == "2" ) {
$("#hide1").fadeIn("fast");
} else {
$("#hide1").fadeOut("fast");
}
}).change();
Related
I have been trying to figure this out for hours, switching it around every which way, but nothing seems to work. Each function works great individually, but I can't seem to get the .change function to fire when the check all button is clicked. What am I doing wrong?
The first function is from this: It selects all the checkboxes, but the change does not affect the second function.
The second function is from this: It changes the class of the divs (and therefore the css), but only if a single checkbox is checked/unchecked.
$(document).ready(function(){
(function() {
var checked = false;
$('button.check-all').click(function() {
checked = !checked;
$('input[class^="orgImgColl\["]').prop('checked', checked);
if (checked) $(this).text('Uncheck All');
else $(this).text('Check All');
});
})();
$('input[class^="orgImgColl\["]').change(function(){
if(this.checked){
$(this).children('table').removeClass('unchecked');
$(this).children('table').addClass('checked');
$(this).siblings('table').removeClass('unchecked');
$(this).siblings('table').addClass('checked');
$(this).parentsUntil('tr').removeClass('unchecked');
$(this).parentsUntil('tr').addClass('checked');
} else {
$(this).children('table').removeClass('checked');
$(this).children('table').addClass('unchecked');
$(this).siblings('table').removeClass('checked');
$(this).siblings('table').addClass('unchecked');
$(this).parentsUntil('tr').removeClass('checked');
$(this).parentsUntil('tr').addClass('unchecked');
}
});
});
here is the HTML/PHP
<div class=\"unchecked\">";
echo "<input class=\"orgImgColl[".$i."]\" style=\"float:right\" type=\"checkbox\" name=\"orgImgColl[]\" value=\"".$row['img_id']."\"/>
<table class="unchecked" id="imgList" cellspacing="0" cellpadding="3" width="90%">
etc.
Just so you know the $i in the input class is for debugging purposes, so you can ignore it.
It is because when you change the checked state using script the change event is not fired, the solution is to trigger the change event manually once the checked property is changed using .change() or .trigger('change')
(function () {
var checked = false;
$('button.check-all').click(function () {
checked = !checked;
$('input[class^="orgImgColl\["]').prop('checked', checked).change();
if (checked) {
$(this).text('Uncheck All');
} else {
$(this).text('Check All');
}
});
})();
Demo: Fiddle
You can improve the selector by changing only those checkboxes which are not in the desired state using something like (not tested)
$('input[class^="orgImgColl\["]')[checked?'not':'filter'](':checked').prop('checked', checked).change();
Demo: Fiddle
I want get the value from the select name and when the value will be somthing, take some action. All value are save in pdo db.
Html: <header>Something</header>
Code:
<select name='name_of_select'>
<option value='on'>On</option>
<option value='off'>Off</option>
</select>
Ex. When the value will be set to on, hide element header. The value I getting from the db. And the value present {$option_selected_value} in smarty template.
Try this, this will be help you
$('select[name=name_of_select]').change(function(){
if($(this).val()=='on')
$('header').show();
else
$('header').hide();
});
Fiddle here
This will do what you are asking, but it relies on you adding IDs to the select and the header elements. If you're not going to be able to do that then please post some real markup and I'll fix this to suit :)
$("#selectID").on("change", function() {
if ($(this).val() == "on") {
$("#headerID").show();
} else {
$("#headerID").hide();
}
});
I have many input field that post data when enter key is press i have done one thing that i find id to of selected button and want to pas with click event bt it gives error here is code
$(".text").bind("keydown", function(event) {
// track enter key
var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (keycode == 13) {
var id=$(this).parent().find("input[type=submit]").attr('id');
(id).click(); // this one give error
return false;
} else {
return true;
}
});
(id).click(); this line gives error that id.click is not a function.what i m missing.
I think you are looking for:
$(this).closest("form").find("input[type=submit]").trigger("click");
There is no need to try to find the id and create a different JQuery object. You will have a reference to what you are looking for with find("input[type=submit]").
In order to know for sure, we would need to see your markup in order to find the most effective way to find what element you are looking for,
id is a string.
Strings don't have a click method.
Instead, you should submit the form directly:
$(this).closest('form').submit();
You need to use the following:
$("#"+id).trigger("click");
I have a form on my page with a dropdown of counties. I want to somehow, with jQuery or PHP say that if a certain county is selected then redirect otherwise process the form.
I've created a fiddle to try and explain...
http://jsfiddle.net/KVjAc/
Just submit the form and use a php header command for the values you want to redirect. That would be the first thing to check in the form processor script.
No need for javascript unless you are using ajax to refresh parts of the page based on the selection.
I hope this helps(if you need a javascript/jquery solution),
$('#selectbox_ID').change( function() {
if($(this).val() == "your country"){
}
});
Do something like:
$(document).ready(function () {
$('#county').on('change', function () {
var value = $(this).val();
if (value == 'cheshire' || value == 'city of london' || value == 'durham') {
window.location.href = 'http://www.google.com/';
}
})
});
EDIT: Also, you need to add values to your option elements: <option value="cheshire">Cheshire</option>
I have a PHP notification system, and the amount of notifications is put into a DIV using jQuery. The only problem is that when there are 0 notifications, the empty DIV still shows up. This is the jQuery I am currently using:
$(document).ready(function() {
$.get('/codes/php/nf.php', function(a) {
$('#nfbadge').html(a);
$('#nfbadge:empty').remove();
})
});
setInterval(function() {
$.get('http://localhost/codes/php/nf.php', function(a) {
$('#nfbadge').html(a);
$('#nfbadge:empty').remove();
})
}, 8000);
The only problem is that if at document load there is 0 notifications and a notification is added, the badge will not show up, so basically if the element is removed it won't come back unless the page is reloaded, but I made the notification system so that the page wouldn't have to be reloaded. How can I fix this?
.remove() takes the element out of the DOM as well as the content. This is why it doesn't come back unless you reload. Use .fadeOut() or .hide() instead
You should probably do something more like this:
var elm = $('#nfbadge'),
T = setInterval(getCodes, 8000);
function getCodes() {
$.get('/codes/php/nf.php', function(a) {
elm.html(a);
if (elm.is(':empty') && elm.is(':visible')) {
elm.hide();
}else{
elm.show();
}
});
}
Will need some more work on your part, but should get you on the right track!
If you have control over the PHP, you shouldn't be using jQuery to be removing DIVs, it's a waste of resources and load time, even if it's just a few lines of code.
In your PHP template you should include the #nfbadge div in a conditional statement, something like:
if($notifications) {
echo '<div id="nfbadge">';
//notification stuff
echo '</div>';
}
Then with your jQuery code you could do something like the following:
var $nfbadge = $('#nfbadge');
if($nfbadge) {$nfbadge.html(a)}
Why don't you just make the div hidden?
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/