I have a link button in the page like:
<asp:LinkButton ID="edit" runat="server" OnClick="edit_Click" Enabled="False">ویرایش</asp:LinkButton>
I want Enable/Disable this in javascript.
I use this code but set visible
var objedit = document.getElementById('<%= edit.ClientID.ToString() %>');
objedit.style.display = "none";
I use this code but not enable
if (count == 1) {
objedit.disabled = false;
} else {
objedit.disabled = true;
}
I can click but link button is disabled.
This link should give you everything you need. You can't really "disable" a linkbutton because its just a link with some javascript attached. Basically, you need to reassign the click handler to something that returns void or false.
You can refer to the ID of the link with the following script:
<script runat="server">
var a = document.getElementById('<%= edit.ClientID.ToString() %>')
</script>
So, is this what you want?
http://jsfiddle.net/hzaR6/
http://jsfiddle.net/hzaR6/2/ -- UPDATED, tested in Chrome and Firefox
The UPDATED way
You can use a class name to define disabled element, for which you can have more control on their styles ... etc.
$("#link").toggleClass("disabled"); //This will simply toggle the class
and for the css
#link.disabled{
z-index:-1; /*Make it not clickable*/
position:relative;
opacity: .5; /*Lighter*/
}
You can do whatever you want here.
The good old form element way
$("#edit").attr("disabled", false);
-or-
document.getElementBy("edit").disabled = false;
This will disable any form element. If you want to enable them, just change false to true.
var a = document.getElementBy("edit").disabled;
a will be true if the element is disabled. Otherwise it will be false.
To disable element:
document.getElementById('<%# edit.ClientID %>').disabled = 'disabled';
//.ToString() is not necessary; ClientID is a string.
To re-enable:
document.getElementById('<%# edit.ClientID %>').disabled = '';
Of course, it can be done after document (DOM) is loaded.
try this
var objedit = document.getElementById("edit"); //not editid (editid is a variable)
objedit.disabled = true; //if I'm not mistaken its true/false or disabled
document.getElementById("lnk").style.display = "none";
Related
I want to use form serialization but exclude a button and a label from the serialization.
This is a version of the javascript I have:
var saveBtn = document.getElementById("btnSaveButton");
var saveLbl = document.getElementById("lblSaveLabel");
var originalFormData = $("#MasterForm").not(saveBtn, saveLbl).serialize();
$("form :input").on('change keyup paste mouseup', function () {
var newFormData = $("#MasterForm").serialize();
if (originalFormData != newFormData) {
//some code
} else {
//some other code
}
});
See: .not(saveBtn, saveLbl)
That is not excluding the button or the label.
Can someone please help me and let me know how I can exclude the button and the label from the serialization?
What essentially happens is I switch the display from the button to the label and back depending on whether the user has made any change to the form.
UPDATE UPDATE
Thank you for the responses ... appears something is amiss ...
There might be too much html to post here ...
Using vb.net. I have a master page, within it is a page called Admin.aspx, and within that is a usercontrol called Bundles.ascx.
In the code of Bundles.ascx I have this javascript:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(prmRequest);
prm.add_endRequest(prmRequest);
function prmRequest(sender, args) {
setupFormChangeCheck("btnSaveBundle", langId);
}
In a master javascript file I have the function setupFormChangeCheck, which looks like this:
function setupFormChangeCheck(txtName, langId) {
try {
savebtnFnctn('dis', txtName, langId)
var originalFormData = $("#MasterForm").serialize();
$("form :input").on('change keyup paste mouseup', function () {
var newFormData = $("#MasterForm").serialize();
if (originalFormData != newFormData) {
savebtnFnctn('en', txtName, langId)
} else {
savebtnFnctn('dis', txtName, langId)
}
});
} catch (err) { }
}
On the same master javascript file I have the function savebtnFunction, which looks like this:
function savebtnFnctn(event, txtName, langId) {
var saveBtn = document.getElementById(txtName);
var saveLbl = document.getElementById(txtName.replace("btn", "lbl"));
if (event == 'en') {
saveBtn.style.display = "inline";
saveLbl.style.display = "none";
} else if (event == 'dis') {
saveBtn.style.display = "none";
saveLbl.style.display = "inline";
}
}
The user control is loaded dynamically, because the same page has multiple use controls and unless I load the one control dynamically, all load ... slows things down incredibly.
Loading a user control dynamically leads to serious postback challenges. So, the vast majority of the user control interactions are handled client side with jquery. For Bundle.ascx this is done in Bundle.js
SOOOOO ....
When the user control is loaded, setupFormChangeCheck fires, which runs the 'dis' (disable) event in function savebtnFnctn.
Here is the problem I noticed today as I tried the code from suggestions above.
When I interact in the Bundle uc, setupFormChangeCheck does not fire from the beginning. What first fires is this line $("form :input").on('change keyup paste mouseup', function ()
And no matter what I do, click in a textbox even without changing anything, leads this: originalFormData != newFormData to be true and the Save button remains enabled ...
I should add that all the controls in the Bundle user control are inside an updatepanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
Long explanation I know, sorry ... if anyone has any idea to solve this, I would be eternally grateful.
Thank you. Erik
The jQuery's .not() method takes selector, not elements.
Also, you are matching the form itself, not the inputs of it.
Since you do know the IDs of the elements to exclude, use this instead:
var data = $("#MasterForm").find("input, textarea, select").not("#btnSaveButton, #lblSaveLabel").serialize();
You select the form.
Then you select the form elements underneath.
Then you exclude the concrete elements from the collection.
Lastly you serialize the results.
NOTE: You should use strict comparison !== instead of !=.
I have a fileupload which loses its content on button click. I have a confirm button to freeze the page from user making any further changes. Once the changes are finalized, the button shall be renamed from Apply to Submit. But during this transition (Autopostback), fileupload loses its content.
To avoid this autopostback, I tried to fix this using javascript by freezing the textboxes and other controls but the button name doesn't change.
if (document.getElementById('<%=Submit.ClientID%>').value == "Apply") {
....
document.getElementById('<%=Remarks.ClientID%>').disabled = false;
document.getElementById('<%=Submit.ClientID%>').value == "Submit";
return false;
}
return true;
I also tried to use the below code snippet but dint work either. In both the cases, the text boxes were disabled but the button name dint change.
if (document.getElementById('<%=Submit.ClientID%>').value == "Apply") {
....
document.getElementById('<%=Remarks.ClientID%>').disabled = false;
document.getElementById('<%=Submit.ClientID%>').innerHTML == "Submit";
return false;
}
return true;
Have referred few sites but most of them suggest to use value or innerHTML. Not sure why it dint work here. Anything else am I missing?
Please suggest how to fix this.
Its not an if you dont have to put == just one and you want to change the value.
change
document.getElementById('<%=Submit.ClientID%>').innerHTML == "Submit";
to
document.getElementById('<%=Submit.ClientID%>').value = "Submit";
the easiest solution is to make sure that you load your JavaScript code after your button definition, or at the end of the file.
this is the correct form :
<button id="test"></button>
<script>
var b = document.getElementById("test");
b.innerHTML = "test" ;
</script>
not this :
<script>
var b = document.getElementById("test");
b.innerHTML = "test" ;
</script>
<button id="test"></button>
you can also use jQuery:
<button id="test"></button>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script>
$("#test").text("test");
</script>
#myDiv is a clickable box, if #myDiv is clicked, there is a class .opened will be added. my jQuery reads
if ($('#myDiv').hasClass('open')){
var myValue = "1";
}else{
var myValue = "2";
}
Apparently, after the page completed loaded, myValue always equals 2, but after clicking #myDiv, myValue is still 2. what event should I use to detect whether my elements change? I'd like to support IE7+ as well. thanks!
try this solution : http://jsfiddle.net/charaf11/Emv8L/
function containOpen(){
if ($('#myDiv.open').length==1){
var myValue = "1";
}
else{
var myValue = "2";
}
}
You would have to rerun the code, there is no way for that code to change just because a class has been added/removed.
So when the click happens you would need to call a function that will set the value.
In your click event listener, suscribe your element a custom trigger $('#myDiv').trigger('openedClassAdded').
Then
$('#myDiv').on('openedClassAdded', function () {
myValue = '2';
});
Hi friends i have a button control which has to be enabled based on my asp.net checkbox check,but when run the code i am facing the problem my button is still disabled even after i perform a checkbox check .is their any property i have set in code behind to acccess the check event.
I am using the following code in my application
This is my javascript file
<script type="text/javascript">
function theChecker() {
var checkboxId = '<%= SpEligible.ClientID %>';
alert(checkboxId);
if (checkboxId.checked == true)
{
document.getElementById("SplistButton").disabled = false;
}
else
{
document.getElementById("SplistButton").disabled = true;
}
}
</script>
This is my code for the checkbox and button is
<asp:CheckBox ID="SpEligible" runat="server" Text="SpEligible" class="cBox" />
<asp:Button ID="SplistButton" runat="server" OnClientClick=" return ShowInsertForm()" Enabled="false"/>
This is my aspx.cs file where i am calling the javascript
SpEligible.Attributes.Add("onclick", "theChecker()");
I can see two major errors in your code :
1- In your <script> tag, you did realize that your Checkbox wouldn't have the same ID once in the page, but you didn't made that check. Also, as Ken Pespisa mentioned, the ID you took is only a string, therefore, it doesn't know any checked property. Here is the code I would write :
<script type="text/javascript">
function theChecker() {
var checkboxId = '<%= SpEligible.ClientID %>';
alert(checkboxId);
if (document.getElementById(checkboxId).checked == true)
{
document.getElementById("<%= SplistButton.ClientID %>").disabled = false;
}
else
{
document.getElementById("<%= SplistButton.ClientID %>").disabled = true;
}
}
</script>
2- In your .cs page, you don't seem to use any namespace. You may have hide some code, so I'll just say be sure to have namspaces and be sure to use this line inside a function, maybe the page load event function.
You need to change the javascript code to:
<script type="text/javascript">
function theChecker() {
var checkboxId = document.getElementById('<%= SpEligible.ClientID %>');
alert(checkboxId);
if (checkboxId.checked == true)
{
document.getElementById("SplistButton").disabled = false;
}
else
{
document.getElementById("SplistButton").disabled = true;
}
}
</script>
You were checking the checked property of a string constant. You need to get the control itself using document.getElementById which has checked property. I'd also rename "checkboxId" to "checkbox"
Change
document.getElementById("SplistButton")
to
document.getElementById(checkboxId)
I have a simple html option/select (dropdown) menu. I want to use JQuery to redirect links when an option is selected. I have a "go" button in noscript tags in case javascript is disabled, but in the case that the user has javascript..I would like the redirection to happen automatically on-click. Could somebody please guide me on how to accomplish this using jquery (I have this done using simple javascript 'onclick' events but I'd like to move all of my code to jquery)?
Right now my code looks like this (the function gets call from the 'onclick' event):
function option(dropdown) {
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL;
if(SelValue=="1")
baseURL="something1";
else if(SelValue=="2")
baseURL="something2";
else if(SelValue=="3")
baseURL="something3";
top.location.href = baseURL;
return true;
}
To bind the click element in jQuery you can do
$('#elementId').click(function(){
//do redirection
});
But for you case I think you need to bind the change event
$('#elementId').change(function(){
var optionSelectedValue = $('#elementId option:selected').val();
if(optionSelectValue == value1) {
newUrl = url1;
}
else if(optionSelectValue == value2) {
newUrl = url2;
}
top.location.href = newUrl;
});