Trigger Javascript for a Server side Checkbox - javascript

I have a situation where i am performing some server action the click of the checkbox and then redirecting the user to another page. But the problem is, After i click the checkbox, it is taking time to redirect as it is slightly slow and hence the users are able to click on other checkboxes. I want to either disable the whole page or disable all the Check boxes. I wrote a javascript but it gets triggered only when the page is loaded again.
My Html :
<div>
<asp:CheckBox ID="checkbox1" runat="server" OnCheckedChanged="checkbox1_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
<asp:CheckBox ID="checkbox2" runat="server" OnCheckedChanged="checkbox2_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
<asp:CheckBox ID="checkbox3" runat="server" OnCheckedChanged="checkbox3_CheckedChanged" AutoPostBack="true" CssClass="chk-facet-checkbox"/>
</div>
<div id='blockerdiv'>
</div>
My Jquery :
if ($(".chk-facet-checkbox").is(":checked")) {
$('.blockerdiv').show();
//Code to show the 'blockerdiv' as an overlay blocking the whole page
// All we need to do is show the blockerdiv. There is already Code to take care of the overlay
}

Try adding:
$(".chk-facet-checkbox").attr("disabled", true);
and so:
if ($(".chk-facet-checkbox").is(":checked")) {
$('.blockerdiv').show();
//Code to show the 'blockerdiv' as an overlay blocking the whole page
// All we need to do is show the blockerdiv. There is already Code to take care of the overlay
$(".chk-facet-checkbox").attr("disabled", true);
}
This disables all checkbox inputs with that class.

You can Use jquery.blockui.js
Then simply use $.blockUI and $.unblockUI functions to block and unblock the UI according to your need.

Related

How to hide User Control div from aspx page?

In my user control i have below controls :
.ascx Page:
<div id="div1" runat="server">
<asp:Label ID="Lblname" Text="Name" runat="server"></asp:Label>
</div>
<div id="div2" runat="server">
<asp:TextBox ID="txtvalue" runat="server"></asp:TextBox>
</div>
<div id="div3" runat="server">
<asp:Button ID="btnClick" runat="server" Text="Click" />
</div>
aspx page
How to hide div1, div2 & div3 using c# or javascript
There is no need of javascript. You can easily put an
id="YourId" and runat="server". You can also add a Visible=False as default (or the other way if you want it to be visible as default). In .cs page, you can define and change the Visible value as you wish. So let's say you want it visible as a default only for administrator users, and you check in database if the user is an administrator with a true/false value (a bit value). then in PageLoad() you can perform a check like this:
if(LoggedUser.IsAdmin==true)
{
div1.Visible=true;
}
else
{
div1.Visible=false;
}
A C# implementation
You should be able to reference your divs by their IDs in the codebehind since you have runat set to server.
So, assuming you want this to occur on the page loading, to your Page_Load event, add:
div2.Visible = false;
You page renders html from your user controls as well as from master pages.
If you want to hide your elements then simply use this
$("#YouHTMLElement").attr("style","display:none");
One important thing: you need to specify clientidmode="static" on your divs because IDs of server controls changes when your html renders.
Updated: In C#, you need to do this
div1.Style.Add("display", "none");

Trigger jQuery function / event from c# code-behind

I hope I will be able to explain my problem clearly.
Scenario:
Asp.net web page with UpdatePanel. Some properties of controls are changeable via UI trigger and are set in jQuery (for faster response, as this page is expected to accept input data of at least 500 records per day).
Example below, (if written in c# code, the logic is like this: txtIDNumber.Enabled = chkIsReceiptRequired.Checked; rfvIDNumber.Enabled = chkIsReceiptRequired.Checked;):
Markup:
<asp:CheckBox ID="chkReceiptRequired" runat="server" Text="Receipt required" />
<asp:TextBox runat="server" ID="txtIDNumber" Width="150px" style="float: left;" />
<asp:RequiredFieldValidator ID="rfvIDNumber" runat="server" ForeColor="Red"
ErrorMessage="Enter ID No." ControlToValidate="txtIDNumber" ValidationGroup="save" />
Snippet of default jQuery code (upon page load, chkReceiptRequired is unchecked, validator and textbox will only be enabled upon ticking chkReceiptRequired):
<script type="text/javascript">
function pageLoad(){
$('input[id$=_txtIDNumber]').prop('disabled', true);
ValidatorEnable($("[id$='rfvIDNumber']")[0], false);
$('input[id$=_chkReceiptRequired]').change(function () {
$('input[id$=_txtIDNumber]').prop('disabled', !$(this).is(':checked'));
$('input[id$=_txtIDNumber]').val(!$(this).is(':checked') ? '' : $('input[id$=_txtIDNumber]').val());
ValidatorEnable($("[id$='rfvIDNumber']")[0], $(this).is(':checked'));
});
}
</script>
I'm using this same page to load the data here to perform record update. Code snippet of data loading:
var maintableComponent = new MainTableComponent();
var maintableData = maintableComponent.GetMainTableDataById(rowId);
chkReceiptRequired.Checked = maintableData.IsReceiptRequired.Value;
txtIDNumber.Text = maintableData.IDNumber;
//todo: enable txtIDNumber and rfvIDNumber from here
The problem: by right, upon page render for update, because chkReceiptRequired is checked, supposedly txtIDNumber should be enabled. But my problem is, it is not. What can I do to enable the txtIDNumber and rfvIDNumber upon data loading from code-behind?
*I have already tried this link and this but it doesn't seem to work.
Please, please help me. The snippets I posted here are just one of many jQuery validations that I desperately need to address. Thanks in advance.
Feeling incredibly stupid right now. Figured out how to fix it after sleeping it off. :P
I just changed the default jQuery code to this:
var isReceiptRequired = $('input[id$=_chkReceiptRequired]').is(':checked');
$('input[id$=_txtIDNumber]').prop('disabled', !isReceiptRequired);
ValidatorEnable($("[id$='rfvIDNumber']")[0], isReceiptRequired);
I just remembered that the last thing in the page-cycle is rendering it on the page so the jQuery can be manipulated by the values set in the control from code-behind.

Data from entity framework displayed in javascript/Jquery dialog

I have a problem, and looking for a solution for 2 days
Target : Create/edit client... in HTML build a dialog with and asp fields with clientIDMode static
<div id="divDialog" runat="server" clientidmode="Static" style="display: none;">
<div class="DialogFields">
<asp:Label ID="Label1" runat="server" Text="Firstname"></asp:Label>
<br />
<asp:TextBox ID="tbxFirstName" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>
...
In script
$("#btnShowDialog").click(function () {
openDialog();
});
function openDialog() {
$("#divDialog").dialog('open');
$("#divDialog").parent().appendTo($("form:first"));
}
When I click the button btnShowDialog it works fine... But
Beneath it I have a gridview within it a edit button (asp:Linkbutton) with a event to the codebehind it looks like:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="Edit" OnCommand="Edit_Click" CommandArgument='<%#Eval("RelationID") %>'
runat="server"><img src="../images/Edit-item.png" alt="Edit" /></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
In codebehind take the parameter from commandargument and fire LoadInfo (specific data to all the fields in de dialog).
LoadInfo(e.CommandArgument != null ? int.Parse(e.CommandArgument.ToString()) : -1);
but no way I get the dialog open.
I tried
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openDialog();", true);
and
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openDialog();", true);
after this LoadInfo, push btnShowDialog button and it opens the dialog and all data perfect in place.
Also tried the other way around as Directly to Jquery function, get all data loaded and open the dialog. 2 problems, loading in codebehind was not even started before the dialog opens. and I only can get a static function in the codebehind.
A lot of ground to cover for me, but can any body help me out (even for a part).
...Thanx
If I understand your question correctly, you are trying to fire some client scripts (openDialog) from the server side, but they wont fire?
Try placing your page in an update panel, lets assume that we name the update panel "MyUpdatePanel". And then refer to the update panel like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, MyUpdatePanel.GetType(), "MyUpdatePanelScript", "openDialog();", true);

Calling c# from JS via button

So what I want to do is click on a button which will cause JS code to run which will cause another button to click and button #2 will be runat="server" and cause a C# function to run onClick.
But using the below does not cause the C# function to run even though simply clicking the button2 does cause it to run.
function button1_click() {
document.getElementById('button2').click();
__doPostBack('#button2', 'onclick');
$('#button2').trigger('click');
// neither worked (tried them seperately)
}
<asp:Button runat="server" Visible="true" text="you should not see this" ClientIDMode="Static" ID="button2" onclick="button2_Click" formnovalidate />
Useful knowledge:
- button one is in a client form
- button two is in a runat="server" form
This code
$('#button2').trigger('click');
should work.
Have you checked that the ID 'button2' is not changed during runtime?
Sometimes, when using master pages or user controls, the client ID of an element with runat="server" attribute will get a prefix at run time.
Use a debug console (depends on your browser, try pressing F12) to check the effective client ID.
Also, have you checked that button1_click() function is actually called?

Cannot call modal popup of master page in child page

I am using a modal popup for to display login box. The modal popup is in the master page and associated with a LogIn link therein. Now I want to call the same modal popup in a child page using a different link button. The modal popup can be called by the LogIn link of master page but I want to add this second control (linkButton) in child page, which can call the modalpop of master page.
I tried this in child page:
function LogIn2()
{
$find("programmaticModalPopupBehavior").show();
}
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="LogIn2">Log in</asp:LinkButton>
Reference: multiple TargetControls for the ModalPopup
How to call the functional modal popup of master page from a control in child page??
Update:
This is in masterpage:
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="linkLog" CancelControlID="linkClose" BackgroundCssClass="cssModal" PopupControlID="panelPopUp" BehaviorID="programmaticModalPopupBehavior" PopupDragHandleControlID="panelDrag"></ajax:ModalPopupExtender>
Add an OnClientClick for the LinkButton, like this:
<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="return LogIn2()" ...>
Put the JavaScript function in your master page, and after showing the popup, have the method return false to prevent the LinkButton from doing a postback:
function LogIn2()
{
$find("<%=ModalPopupExtender1.UniqueID%>").show();
return false;
}
As an alternative, you may also add return false to the OnClientClick of the LinkButton, after the LogIn2 function has executed, like this:
<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="LogIn2();return false;" ...>
I m not sure about this but let me confirm are you using the control of ajax like given below
<asp:ModalPopupExtender ID="ImageUploaderEx" runat="server" BehaviorID="ImageUploaderBID" TargetControlID="Link Name" CancelControlID="Cancel" PopupControlID="Panel to be open" OnCancelScript="hideUploader()"></asp:ModalPopupExtender>
If Yes then you can use this same modal with a different name, If this doesnt work let me know I will try my best
try this if it works
((ModalPopupExtender)Page.Master.FindControl("ModalPopupExtender1")).Show();
and add this as well
using AjaxControlToolkit;

Categories