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
}
Related
I am trying to make a note-keeping app in which there are many divs as notes and I want that whenever the user clicks on a particular div then it should be made editable and a button shows on top of div which before the action was hidden. I have somewhat done this part. Now I want that when the user clicks on other div or other parts of the page, then the already shown button goes hidden.
In short, those div's button should be visible where the user is currently working.
I am not sure how to just make the one button visible at a time.
the javascript I used for the button shown is:
edits=document.getElementsByClassName('new');
Array.from(edits).forEach((element) => {
child=element.childNode
element.addEventListener("click",(e)=>
{
let data=e.target;
data.contentEditable=true;
let btn=data.getElementsByTagName('button');
Array.from(btn).forEach(element => {
console.log(element);
element.style.display="block";
element.contentEditable=false;
});
});
});
here is that part of code
https://jsfiddle.net/mahajaved/sq7zuakf/
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();
}
});
})
PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.
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.
A follow up on one of my earlier questions;
My goal was to make a script that auto clicks a button to display a quick reply box on a forum, which I've succeeded in doing. However, the issue right now is that on each page load, it goes straight to the bottom where the quick reply is as the text field is indeed focused.
What would I need to write in greasemonkey to stop it from moving all the way down to the textfield? I'm guessing I'd have to disable the 'message' focus section, but I'm unsure how to go about that.
The script below is the one generated on the site at hand, and not the script I've been writing.
function hide_qr(show)
{
dE('qr_editor_div');
dE('qr_showeditor_div');
if (show && document.getElementById('qr_editor_div').style.display != 'none')
{
document.getElementsByName('message')[0].focus();
}
return true;
}
Notice that the element is only focused if this condition is true:
if (show && document.getElementById('qr_editor_div').style.display != 'none') {
document.getElementsByName('message')[0].focus();
}
If show is false, the element doesn't get focused. show is also the only argument for this function, so if you set it to false, the element doesn't focus.
Therefore, try running the function using hide_qr(false) instead of hide_qr(true).