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
}

Label Textbox ServerControl

Can I create a server control, where it loads as a label and on user click becomes a text box with two buttons(save,cancel) on the bottom right corner and then on pressing save becomes a label again with the entered text or cancel will cancel the edit(if any) and becomes a label again with the existing text?

I have created a JSfiddle for the same:-
http://jsfiddle.net/c2S5d/29/
Code:-
$(function() {
$("#lbl").click(function() {
var text = $("#lbl").text();
$("#lbl").hide();
$("#edit").show();
$("#text").val(text);
});
$("#save").click(function() {
//make call to server if you want to save the value in DB
var text = $("#text").val();
$("#lbl").text(text);
$("#edit").hide();
$("#lbl").show();
});
$("#cancel").click(function() {
$("#edit").hide();
$("#lbl").show();
});
});
in Save button event you can make ajax call or whatever you want to do...

You can do this using visible property visible=true OR visible=false
Most asp controls have visible property - More information for visible property

How to clear content div and reappear with javascript

I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??

You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo

Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.

Wordpress, form caching and show hide div

In my Wordpress (3.8.1) i have made a form. I have 1 checkbox when i click on it a hidden div shows on the screen asking to input extra information.
Javascript code for showing the hidden div:
$(function(){
$('.toggler').click(function(){
if (this.checked) {
$('div.showdiv').slideDown();
} else {
$('div.showdiv').slideUp();
}
});
})
When i fill in the form and accidentally refresh the page then the browser remind the options i have checked and text i have putted, except my hidden div is hidden again even if the check box is still checked. So i have to uncheck and check again and there is the hidden div again. It is not so important and maybe it will never happen someone refreshes the page but you never know.
I am not so good in Javascript hope someone could help me out

Your if/else function is called only when you click on the checkbox. So when the page is refreshed, there is no click on the checkbox and so no display/hide of the div.
You can do this to check the status of the checkbox when the page is displayed :
$(function(){
// Check the checkbox status when the page is displayed
if ($('.toggler').is(":checked")){
$('div.showdiv').slideDown();
} else {
$('div.showdiv').slideUp();
}
// And change the status on click
$('.toggler').click(function(){
if (this.checked) {
$('div.showdiv').slideDown();
} else {
$('div.showdiv').slideUp();
}
});
})

Calling javascript function from code behind to remove div, but divs appear when postback

I have 2 divs with asp control in them. When I want to perform a certain action I want the divs to appear, for the rest, I need them to hide.
In my Page_load, I have this code to call the javascript function:
if (Request.QueryString["isMovingTask"] != null)
{
isMovingTask = Convert.ToBoolean(Request.QueryString["isMovingTask"].ToString());
}
if (!isMovingTask)
{
Page.ClientScript.RegisterStartupScript(GetType(),"Remove","removeDiv();",true);
}
the isMovingTask is a bool value that gets sent from my action file("viewTask.aspx"). If it is true, it means I am asking to move a task so I need the divs displayed, otherwise hide them. So in the if statement I check to see if it is not true, then I want to hide the divs. So I call a JS function called "removeDiv()" which looks like:
<script type="text/javascript">
function removeDiv() {
$('#checkboxes').remove();
$('#exhibitWarning').remove();
}
</script>
"viewTask.aspx" is my page that calls a "moveTemplate.aspx" file inside a fancybox, all this code is in the "moveTemplate.aspx" page. so the first time I launch it, everything works, the divs are hidden etc. But when I click on a radio button which causes a postback, it for some reason puts the divs back in.
any ideas as to why it does that?

you can use Panel controls instead. And can set their visible property to true or false.

One can use panel controls. Its easy to set their visible property to true or false and then your task shall be done.