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
}

Text of textbox doesn’t update in submit button click

I have two radiobutton. If one of them be checked a textbox be active and get data.
They are in update page. In page-load fill them by data from database and I check ispostback.
If textbox have text in page load, its text change and everything work fine but if it haven’t text in first place, it keep default text and doesn’t update in submit button click.
String val = "0";
if (radiobutton2.Checked && textbox1.Text.Length != 0)
val = textbox1.Text;
in page load use this code for initialize radiobuttons:
t.ReadOnly = true;
t.BackColor = System.Drawing.Color.Gray;
and there's a javascript code for active and inactive this textbox
function CheckedChanged(rbtnelement, txtelement) {
if (document.getElementById(rbtnelement).checked) {
document.getElementById(txtelement).readOnly = false;
document.getElementById(txtelement).style.backgroundColor = "white";
}
else {
document.getElementById(txtelement).readOnly = true;
document.getElementById(txtelement).style.backgroundColor = "grey";
}
}

It’s because the textbox readonly property become false in c# code (it run in server side) and it become true in javascript (it run in client side). In server side (c# codes) textbox remain readonly and don’t send its text.
if remove one of them and manage textbox in one side (client or server) it will work fine.

jquery dialog submit button cannot control enable/disable

I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.

I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");

firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?

Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.

disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/

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 use javascript to simulate a mouse click (in Google Maps)?

http://geodit.com:8000/test
Here, I have a simple Google Local Search API and Google Maps code.
How do I make it so that when I click the title of a search result, I simulate the clicking of the address? My objective is to make the pop up box appear on the map by clicking the title. I binded it to this:
$(".gs-title").click(function(){
//SIMULATE MOUSE CLICK of the address HERE
$(this).parent().parent().find(".gs-address").click(); // this doesn't work!!
alert("the title was clicked!!"); //this works fine.
return false; //this also works fine. The hyperlink gets disabled because I returned false.
});
I want to be able to click the title, NOT open the link. And then, pop up the box on the map. In other words, I want to treat the the result as a whole.

Solved. I removed the A tags manually.
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
$(container).find('a').replaceWith(function() { return $(this).contents(); });
return container;
}

The Html code is:
<div class="gs-title"><a target="_blank" class="gs-title" href="http://www.google.com/maps/place?source=uds&q=pizza&cid=12855512876323852687">California <b>Pizza</b> Kitchen</a></div>
<div class="gs-address">...
so I think right path coul'd be:
$("a.gs-title").click(function(){
$(this).parent().siblings('.gs-address').click();return false;
});