I have a sidebar which is initially hidden on pageload. I want to show the div sidebar when the select-multiple field stickets isn't empty. I've been trying different solutions but so far it only works if it's a textbox where I input the value myself. What am I missing/doing wrong? Is this even possible for select-multiple?
$("#stickets").change(function() {
if(this.value.replace(/\s/g, "") === "") {
$(".sidebar").hide();
} else {
$(".sidebar").show();
}
});
$(".sidebar").click(function() {
$("#stickets").val("");
$(this).hide();
});
EDIT: I found out that it does work but only after I select an item the field. How can I show the the div without having to do this extra step?
Try this
if($("#stickets").val()==''){
$(".sidebar").hide();
}else{
$(".sidebar").show();
}
I have an dropdown menu and an add button which adds the selected value to the select-multiple list stickets. I just had to put the $(".sec-sidebar").show(); to the function for the add button.
Thanks everyone!
Not really.The select multiple return an array list when calling the jQuery.val() method.
So the correct test could be:
$("#stickets").change(function(){
if (!$("#stickets").val() || !$("#stickets").val().length){
$(".sidebar").hide();
}else{
$(".sidebar").show();
}
})
Related
I have a list with checkbox. I am submitting the checked rows but before submitting i am validating the list whether it have any checked values or not, for that i have written a jQuery.
jQuery(function(){
jQuery("#newDeliveredAll").click(function () {
if(jQuery('.notClosedCase').prop('checked')) {
jQuery(".notClosedCase").click(function(){
if(jQuery(".notClosedCase").length == jQuery(".notClosedCase:checked").length) {
jQuery("#newDeliveredAll").attr("checked", "checked");
} else {
jQuery("#newDeliveredAll").removeAttr("checked");
}
});
return true;
}else {
alert(" Please select atleast one order ");
return false;
}
});
});
But the issue which i am facing is, when the first row is not checkedeven tho if i have checked multiple rows and left the first row, its showing the same alert written in else part
You checked condition like below.
if(jQuery('.notClosedCase').prop('checked'))
This condition is true when all the checkbox is checked which has notClosedCase class. If any of the checkbox not checked, it is return false. so only you got false block.
Please use below condition.
if (jQuery('.notClosedCase:checked').length > 0)
Fiddle
Hope this will help you.
hi everyone i have a issue with jquery :
in my code i have two multiple selection one on the left one on the right and a button near the selection on the right and i when a click on it the text from the right is copiedinto an input this is already done.i can add or remove element from a list to another with two button :
add and remove . hope i have been clear
when the text is copiedinto the input i can't move it anymore unless another text is copied throught the button near the selection :
here is my jquery code :
if($('#rightoption:selected').val() === $("#chosen").val())
{
$('#remove').attr('disabled' ,'disabled');
}
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
chosen is the id for the input.
but the problem is that when i select something different from the thing in the input he still disabled the button remove
This :
else ($('#right option:selected').val() !==$("#chosen").val())
{
$('#remove').removeAttr('disabled');
}
is equivalent to
else {
$('#right option:selected').val() !==$("#chosen").val(); // this does nothing
}
$('#remove').removeAttr('disabled');
You probably wanted
if($('#right option:selected').val() === $("#chosen").val()){
$('#remove').attr('disabled' ,'disabled');
} else {
$('#remove').removeAttr('disabled');
}
or better :
$('#remove').prop(
'disabled', $('#right option:selected').val() === $("#chosen").val()
);
And I suppose the first test should have '#right option:selected' (note the space).
I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)
Name (input field)
Surname (input field)
Note (textarea)
Button (a button to submit the relative note)
I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:
The DOM structure of the single row is quite simple (I think):
So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.
Of course!
$("tr td textarea").each(function() {
if (this.value == "") {
$(this).closest("td").next("td").find("button").prop("disabled", true);
}
});
You could hide buttons onLoad with the next selector:
$('textarea:empty').parent().next('td').find('button').hide();
Or if you want to disable the buttons:
$('textarea:empty').parent().next('td').find('button').prop("disabled", true);
It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:
$( $('textarea') ).blur(function() {
var button = $(this).parent().next('td').find('button');
if($(this).val() === ''){
button.prop("disabled", true);
}else{
button.prop("disabled", false);
}
});
You can check this fiddle with your table included:
http://jsfiddle.net/6B9XA/4/
try this
$('table textarea').change(function()
{
var thisval=$.trim($(this).html())
if(thisval=='')
{
$(this).parent().next().children('button').attr('disabled')
}
})
I think you should use it this way:
$("#yourtableid").find("textarea").each(function() {
if (this.value == "") {
$(this).closest("tr").find("button").prop("disabled", true);
}
});
"#yourtableid" this should be changed to your table id.
Selectors optimization for performance boost.
You can use filter() to get only the buttons who contains an empty textarea within that row
$('tr button').filter(function(){ // get all buttons
return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons
I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189
However I want to do it with multi-select fields since they provide scroll bars.
Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.
Something like this: http://www.kj4ohh.com/stuff/selectfields.png
How would I do this in javascript/jquery?
How would I return the contents of both select fields back to my flask application?
EDIT:
I had tried the following javascript:
function assign(form)
{
for(i=0;i<form.unassigned.length;i++) {
if (form.unassigned.options[i].selected == true) {
form.assigned.add(form.unassigned.options[i]);
form.unassigned.remove(i);
}
}
//unselect all items
form.assigned.selectedIndex = -1
}
function unassign(form)
{
for(i=0;i<form.assigned.length;i++) {
if (form.assigned.options[i].selected == true) {
form.unassigned.add(form.assigned.options[i]);
form.assigned.remove(i);
}
}
//unselect all items
form.unassigned.selectedIndex = -1
}
but with strange results:
With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.
If you select two items, only one is moved.
If you select more than two, one is moved, one stays put and the rest vanish.
However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.
You have to use jquery plugin for better result
http://loudev.com/
You may try this
$(function(){
$('#toSel1, #toSel2').on('click', function(){
if($(this).attr('id')=='toSel2')
{
var l=$('#sel1 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel1 option:selected').each(function(){
$('#sel2').append($(this));
});
}
else
{
var l=$('#sel2 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel2 option:selected').each(function(){
$('#sel1').append($(this));
});
}
});
});
DEMO.
I am not a JS expert hence I am asking for some guidance. I have following scenario
page loads and commondiv is hidden
if user clicks button showeditform, I load editform in commondiv and show the commondiv
if user clicks button showeditform and editform is visible, remove it and hide commondiv
if user clicks button showpasswordform and if the editform is visible and I remove editform and show passwordform
if user clicks button showpasswordform and if the passwordform is visible, remove it and hide the common div
if user clicks button showeditform and if the passwordform is visible and I remove passwordform and show editform
As of now, I have set up flags and if elses but its not very good way to do it. How can I achieve this using minimum of jQuery code?
Update: Following is my attempt
$('a.editpo, a.resetpass').click(function(event){
event.preventDefault();
var urlToCall = $(this).attr('href');
var hyperlinkid = '#'+$(this).attr('id');
var targetId = $(this).attr('id').match(/\d+/);
var targetTrDiv = '#poformloadertr_'+targetId;
var targetTdDiv = '#poformloadertd_'+targetId;
var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ;
console.log(toToggle);
if(toToggle == true || $(targetTdDiv).html()==''){
$.ajax({
url:urlToCall,
success: function(html){
$(targetTdDiv).html(html);
$(targetTrDiv).show();
}
});
}else{
$(targetTrDiv).hide();
$(targetTdDiv).html('');
}
});
The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit personal info and reset pass, clicking these load up the form in a tr>td.
Try this
$(function(){
var $commonDiv = $("#commondiv");
//Add the edit and password forms into common div and hide them initially
$("#editform").hide().appendTo($commonDiv);
$("#passwordform").hide().appendTo($commonDiv);
//Editing answer based on your comments.
$(".showeditform").live('click', function(){
if($("#editform").hasClass("loading")){//If form is already loading just return
returnl
}
if(!$("#editform").is(":visible")){
$("#editform").addClass("loading").load("EditFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#editform").hide();
}
//Always hide the passwordform
$("#passwordform").hide();
});
$(".showpasswordform").live('click', function(){
if(!$("#passwordform").is(":visible")){
$("#passwordform").addClass("loading").load("PasswordFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#passwordform").hide();
}
//Always hide the editform
$("#editform").hide();
});
});
I have done this like a week ago, but the code is at home, where I am not at right now. But basically, you give your forms names in a array, and hide the ones that are not selected and if the one that is selected is clicked again use .toggle(); function to hide it.
You can give this a try. This is assuming you are storing your form HTML in JS. If you are storing it in a hidden container I can show you how to move that into the new parent or just copy the html into it.. hope this helps!
$("#commondiv").hide();
$("#showeditform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(editformHTML).show();
}
});
$("#showpasswordform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(passwordformHTML).show();
}
});
You would do something like this:
$('#showeditform').click(function()
{
if($('#commondiv').is(':visible'))
$('#commondiv').hide();
else
$('#commondiv').html('The text you want to set').show();
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#editform').show();
}
});
$('#showpasswordform').click(function()
{
if($('#editform').is(':visible'))
{
$('#editform').hide();
$('#passwordform').show();
}
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#commondiv').hide();
}
});
Honestly, it sounds like your page is doing far too much on a single page. The rules shown above give me a kind of a headache.