We Keep Coding

Conditional statements in jquery for button status?

I'm new to JQuery. I want to put a conditional statement in my script but I'm not sure of the syntax for button effects. I wan't it along the lines of
if ".save" = .show then .hide ".donedit"
This script is for a table, I don't want users to be able to click the .donedit button if they have edited a field without saving the content.
Right now The .save button shows only when a user has edited a field, the ideal function would be to grey out or hide the donedit button if the .save button is showing.
Here's the relevant piece:
$(document).ready(function(){
//individual field edit buttons show as hidden
$(".edit").hide();
$(".donedit").hide();
//when the mass edit button is clicked in the header, the edit button
//will show for each field, the massedit button will hide showing the donedit button
$(".massedit").click(function(){
$(".edit").show();
$(".massedit").hide();
$(".donedit").show();
});
//When the donedit button is clicked the massedit button shows and the
// donedit button disappears
$(".donedit").click(function(){
$(".edit").hide();
$(".massedit").show();
$(".donedit").hide();
});
});

If you are using show and hide you can do
$(".save").css("display")
and if it returns "block" that means it is currently being shown, and if it returns "none" then it is currently hidden. So you can just check if:
if ($(".save").css("display") != "none") {
//donedit button code can run
}
That isn't a great way to do it since you are asking the DOM for the state instead of just storing whether or not ".save" is hidden or not, but it is probably the easiest solution.
EDIT:
You can even throw in an else statement if you want and alert the user that they are trying to close editing without saving, or use confirm and if it returns true then let them close without saving
Or better yet just change the code to
if ($(".save").css("display") != "none" && confirm("Continue without saving")) {
//donedit button code can run
}

JQM checkbox get checked on tap and then immediately becomes unchecked on android

I am using JQM for mobile web application development. I am trying to hide/show a part of the form depending on a checkbox status. This is working fine with iphone but behaving weirdly on android phone like when the user selects the check box it displays that block of form but immediately hides back and gets unchecked automatically. I am new to JQM, please let me know if I missed some thing to mention here.
$('form #addsp').click(function () {
if ($('form #addsp').is(':checked')) {
$('#addDetail').show()
} else {
$('#addDetail').hide()
}
});

$("input[type='checkbox']")[0].attr("checked",true).checkboxradio("refresh");
You need to refresh the checkbox to have it checked.
You can read more here:
http://jquerymobile.com/test/docs/forms/checkboxes/methods.html

Question on .submit and reloading form values AFTER the submit button is clicked

I am using jQuery 1.4.3 and have a newbie question.
In the following .submit function, I grab the value of the selected option in the facilityCodes dropdown list after I click the submit button and then during the submit function, select the facilityCode again in the dropdown list and then disable the list so that the user cannot change it. However, the situation is when I reload the page after the submit button is clicked the dropdown defaults to the first option and the list is enabled. I apparently am not understanding how .submit works so that I'm selecting the option I'm defining in my code and then disabling the list AFTER the page reloads. My question is what am I doing wrong? Am I using the wrong event?
Any help/direction would be greatly appreciated. Thank you.
Here is my code:
$(function() {
$("#ARTransferForm").submit(function() {
var msgsCount = 0;
var facilityCodeValue = $("#ARTransferForm\\:facilityCodes option:selected").val();
alert("facilityCodeValue = " + facilityCodeValue);
if (facilityCodeValue == 0) {
alert("To Facility Code must be selected");
msgsCount++;
} else {
$('select[id$=facilityCodes]').val(facilityCodeValue);
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});
});

Refreshing the page will erase everything you've done with JavaScript prior to the page refresh. If you're looking to preserve states through page reloads, you'll need to use server side code, or set a cookie.

The submit event is called on the current page when the form is about to post. You'll need to pass along a value (hidden field) that is checked on form load that you can check to determine if the list should be disabled.
Update:
On page load, you'll want to check to see if this is a repost where the hidden field id="disable_select" was set set during the post. If so, then you'll disable the form.
$(function(){
if ($('#disable_select').val() == '1') {
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});

Div loads and disappears on asp.net PageLoad

I have a div that I want to appear based on user input (works), however this div will appear and then hide itself on page load, because the javascript simply tells this Div to appear based on user input , and the input is defaulted to the option which causes the div to hide. I am including the code
<script type="text/javascript">
function HideUnhide() {
if (!$("#RadioButtonInput").attr("checked")) {
$("#hideableDiv").fadeOut(200);
} else {
$("#hideableDiv").fadeIn(200);
}
}
$(function () {
//initial hide/unhide
HideUnhide();
//click triggered hide/unhide
$(".RadioButtonID > input").click(
function (event) {
alert('click');
HideUnhide();
}
);
});
The RadioButton is binded to a SQL value in the website which stores session data, so it can't just "always be hidden" when the page loads, but it's visually annoying to watch this div be present and then disappear based on the data binding.
How can I fix this?

In the server side code that writes out the HTML for the div, test the SQL value and if it should be hidden, then add a style attribute of style="display:none" to the HTML.

You will have to set the initial visibility on the server side. Set the div to runat="server", and right after you set the Checked property of the button, do this:
myDiv.Style.Add("display", (myButton.Checked ? "block" : "none"));

How do I collapse a jQuery tab when a form is submitted?

I have a form where users can enter information by opening a series of jQuery tabs.
When the user submits the forms, I want to collapse any open tabs. How do I do that?
NOTE: It's not enough just to hide the content of the tab. The button has to be deselected and the visibility has to be set in a way so that the form will continue to work. I tried just saying...
$(".content").hide();
...but the contents of the tab wouldn't display properly after that. People need to be able to keep working with the form and submitting it over and over. Thanks for any help you can give me!

$('#Features').submit(function() {
$(".content").hide();
$(this).find(':input').removeAttr('checked'); //uncheck all inputs
return false;
})