I wrote a javscript which create a popup with certain information.
function Showduplicate() {
isDuplicate = true;
var modal = document.getElementById('duplicate');
modal.style.display = '';
modal.style.position = 'fixed';
modal.style.zIndex = '100';
modal.style.left = '30%';
modal.style.top = '40%';
var screen = document.getElementById('modalScreen');
screen.style.display = '';
return false;
}
modal is a div element. duplicate is also a div element which contains certain checkboxes etc. . Now I check a query in codebehind and call this javascript function accordingly. I tried to use Page.RegisterClientScriptBlock Method but was unsuccessful. So can you guys help me out in calling the javascript function in codebehind.
I think for your scenario, you should be using Page.RegisterStartupScript(). See this post for more info on the distinction between RegisterStartupScript() and RegisterClientScriptBlock().
I'm assuming you're using Asp.Net WebForms and Asp.Net Ajax. (The same technique can be applied to other scenarios as well).
Let's say you have a button like:
<tr>
<td><input id="grid_1">Value</input></td>
<td>Add</td>
</tr>
Then you can control the popup with the following JS code:
function OnAddSuccess(result) {
// Update display
}
function OnAddError(error) {
Showduplicate();
}
function addItem(id) {
$get("LoadingLabel").innerHTML = "Loading...";
PageMethods.TryAddItem(id, $get("grid_"+id).innerHTML, OnAddSuccess, OnAddError);
}
You should not forget:
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" />
Related
I am revitalizing a very old application and trying not to introduce Devexpress or Telerik into this application.
I have a need for some dropdownlists with multiple selection availability. I have poked around on the web and the chosen jquery plugin looks to be the route to go.
I have it implemented in one of my test pages, but I am trying to get this implemented rather quickly without much tooling around with it. I am having some difficulties grabbing the multiple selected values on the server side in my code behind. I don't really want to have a bunch of client side functionality holding and maintaining data on change etc.
Any one ever attempt to get at this data server side versus client side and have luck?
Code example. :
<select id="slcExample" multiple class="chosen-select" style="width:350px;" runat="server"></select>
<script type="text/javascript">
$(document).ready(function () {
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
</script>
I have found that if I could get at this property .SelectedIndices that I would have access to the selected values but it will not let me use this on the server side as it is a protected property of the select in asp.net.
Here is what I ended up doing. :
Dim index As Integer
Dim valuesChosen As String = ""
For index = 0 To (slcExample.Items.Count - 1)
If (slcExample.Items(index).Selected) Then
valuesChosen += slcExample.Items(index).Value.Trim + ";"
End If
Next
I needed something on the server side. Hopefully this helps someone else. If you have a better option I am open to seeing it and will mark as answer if better.
You can create a hidden field with asp:net class. with a javascript method, add all value in a comma separated list.
You can have the list on the server side after submiting your form.
try putting clientIDMode="Static"
<asp:HiddenField runat="server" ID="hidTest" ClientIDMode="Static" />
but if you can't, you will have to see the generated name from asp to update it in your javascript method
<script type="text/javascript">
$(document).ready(function () {
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
var hiddenSeparatedList = "";
for (var selector in config) {
hiddenSeparatedList += $(selector).chosen(config[selector]) + ','
$('#hidTest').val(hiddenSeparatedList);
}
});
</script>
I had the same problem and switched to this JQuery plugin instead: http://www.erichynds.com/blog/jquery-ui-multiselect-widget
Since the asp.net dropdown control does not allow multiple items, I used a regular tag with runat server and an ID. The plugin actually selects the items and then you can read them from code behind.
The plugin will works client-side on the asp.net dropdown, but you can't get the selected items in the code behind. So depending on your needs .. .
Hope this helps!
Bonnie
I used a List instead:
int i;
IList<string> chosenItems = new List<string>();
for (i = 0; i <= selectExample.Items.Count - 1; i++)
{
if (selectExample.Items[index].Selected)
{
chosenItems.Add(selectExample.Items[index].Value.Trim());
}
}
I am using jquery onbeforeunload event in asp.net application.
If i write event as given below then its working fine and display confirm dialog box.
var vGlobal = true;
var sMessage = "Leaving the page will lost in unsaved data!";
[ Working ]
> window.onbeforeunload = function() {
> if (vGlobal == false) return
> sMessage; }
but its not working if i use bind method like as given below
[ Not working ]
$(window).bind("beforeunload", function(e) {
if (vGlobal == false)
return sMessage;
});
Anybody suggest me why its not working.Is there any difference between these two methods.
Code on aspx:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
CLICK ON THIS LINK TO SEE RUNNING EXAMPLE
See the updated version
You need to bind all the events inside document ready event.
Apart from the fact that vGlobal is true and you are checking if (vGlobal == false), this smells like a $(document).ready() issue.
I.e. you should place the declaration inside a document.ready() handler as shown here:
$(document).ready(function(){
$(window).bind("beforeunload", function(e) {
if (vGlobal == false)
return sMessage;
});
});
There is no benefit in using jQuery to bind the event to the window - all you are doing is adding the overhead of having jQuery parse the window into a jQuery object, which you aren't even using.
Therefore, using:
window.onbeforeunload = handler;
Is preferable to using jQuery to bind this event.
You can still perform the binding inside of the document ready section:
$(document).ready(function () {
window.onbeforeunload = handler;
};
On load I'm both calling a JavaScript setTimeout() function that will hide a .NET Panel control, and hiding it in the code behind on first load. Clicking the save button will set the Panel to visible then reload the page at which point a setTimeout() function is called... so basically you click save, and see a panel with "Details Saved" for three seconds, at which point it disappears.
The problem is the external JavaScript file can't find _pDivAlert.ClientID (I've debugged and it returns null). It only works when the code is in a tag in the .aspx page. Any suggestions as to how I can either pass the client ID to the HideControl() function or find the ClientID from the external JS file?
Here's my code, any suggestions?
<script language="javascript" src="Forms.js" type="text/javascript"></script>
<body onload="ToggleAlert()">
<form id="form1" runat="server">
<script type="text/javascript">
//alert the user that the details were saved
function HideControl() {
var control = document.getElementById('<%=_pDivAlert.ClientID %>');
if(control != null)
control.style.display = 'none';
}
function ToggleAlert() {
setTimeout("HideControl()", 3000);
}
</script>
I've also tried sending the ClientID within the ToggleAlert() call, but that didn't work:
<body onload="ToggleAlert('<%=_pDivAlert.ClientID %>')">
External JS:
function HideControl(_c) {
var control = _c;
if (control != null)
control.style.display = 'none';
}
function ToggleAlert(_c) {
setTimeout("HideControl(_c)", 3000);
}
can you show your markup with the panel and the codebehind where you hide it?
there's a difference between setting the Visible property to false and setting the style display attribute to none- the first will not render the element at all, meaning there isn't anything rendered with the id you're looking for.
edit: it's probably because of the way you're calling HideControl in the timeout- this should be a function instead of a string.
try doing
function ToggleAlert(_c) {
setTimeout(
function () {
HideControl(_c);
}, 3000);
}
just for clarity, when you pass a string to setTimeout, it's evaluated and then run. the code chunk that eval produces will run in a different scope than your ToggleAlert method, and so _c won't be available at that time.
edit: you also need to actually get a reference to the control. you're passing the id string to ToggleAlert, which relays it to HideControl, which is expecting an object not a string.
function HideControl(_c) { // _c is the id of the element
var control = document.getElementById(_c);
if (control != null)
control.style.display = 'none';
}
i am using asp.net ajax tab container[ which has 2 tab panel]
under each tab panel i have an div tag. now by default.i have my Activetabindex="0"
now i need to enable css property for the div tag using javscript so that there is no post back happening. i doing like this css property for the tab panel 1 is not getting applied
this is my script what i doing. if i do the same thing in code behind for the ta selected index change it works. but thatcause an post back.
now i need t o do it my javscript only
OnClientActiveTabChanged="PanelClick"
<script type="text/javascript" language="javascript">
function PanelClick(Sender, e) {
debugger;
var CurrentTab = $find('<%=Tab1.ClientID%>');
if( Sender._activeTabIndex==0) {
debugger
document.getElementById('<%=mycustomscroll2.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll2.ClientID%>').Enabled = false;
document.getElementById('<%=mycustomscroll.ClientID%>').className = 'flexcroll';
}
if (Sender._activeTabIndex == 1) {
debugger
document.getElementById('<%=mycustomscroll.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll.ClientID%>').Enabled= false ;
document.getElementById('<%=mycustomscroll2.ClientID%>').className = 'flexcroll';
}
}
</script>
so how to i enable my css property for the div using javascript for the tab panel
anyhelp would be great
thank you
Here is a javascript function which will sort of do what you want:
function PanelClick(Sender, e) {
var scroll1 = $get('<%=mycustomscroll.ClientID%>');
var scroll2 = $get('<%=mycustomscroll2.ClientID%>');
if(Sender._activeTabIndex == 0) {
scroll1.setAttribute('class', 'flexcroll');
scroll2.setAttribute('class', '');
} else if(Sender._activeTabIndex == 1) {
scroll1.setAttribute('class', '');
scroll2.setAttribute('class', 'flexcroll');
}
}
There really is no such thing as "enabled" in HTML and JavaScript. HTML has a "disabled" attribute, but it only applies to these elements: button, input, optgroup, option, select and textarea. It is used like so:
<input type="text" name="txtSomething" id="txtSomething" disabled="disabled">
and in JavaScript, similar to setting the class attribute, above:
$get('txtSomething').setAttribute('disabled','disabled'); // disable the input
$get('txtSomething').setAttribute('disabled',''); // enable the input
But this will not work for other elements like <div> and <span> tags.
I've got a particularly large form in an page. When the form is validated and a field is invalid, I want to scroll the window to that control. Calling the control's Focus() doesn't seem to do this. I've found a JavaScript workaround to scroll the window to the control, but is there anything built into ASP.NET?
Page.MaintainScrollPositionOnPostBack = False
Page.SetFocus(txtManagerName)
Are you using a Validation Summary on your page?
If so, ASP.NET renders some javascript to automatically scroll to the top of the page which may well override the automatic behaviour of the client side validation to focus the last invalid control.
Also, have you turned client side validation off?
If you take a look at the javascript generated by the client side validation you should see methods like this:
function ValidatorValidate(val, validationGroup, event) {
val.isvalid = true;
if ((typeof(val.enabled) == "undefined" || val.enabled != false) &&
IsValidationGroupMatch(val, validationGroup)) {
if (typeof(val.evaluationfunction) == "function") {
val.isvalid = val.evaluationfunction(val);
if (!val.isvalid && Page_InvalidControlToBeFocused == null &&
typeof(val.focusOnError) == "string" && val.focusOnError == "t") {
ValidatorSetFocus(val, event);
}
}
}
ValidatorUpdateDisplay(val);
}
Note the call to ValidatorSetFocus, which is a rather long method that attempts to set the focus to the control in question, or if you have multiple errors, to the last control that was validated, using (eventually) the following lines:
if (typeof(ctrl.focus) != "undefined" && ctrl.focus != null) {
ctrl.focus();
Page_InvalidControlToBeFocused = ctrl;
}
To get this behaviour to work, you would ideally need to ensure that all your validators are set to be client-side - server side validators will obviously require a postback, and that might affect things (i.e. lose focus/position) - and setting MaintainScrollPositionOnPostBack to true would probably cause the page to reload to the submit button, rather than the invalid form element.
Using the server side .Focus method will cause ASP.NET to render out some javascript "on the page load" (i.e. near the bottom of the page) but this could be being overriden by one of the other mechanisms dicussed above.
SO I believe the problem is because I was trying to focus on HtmlGenericControls instead of WebControls.
I just ended up doing a workaround based off of:
http://ryanfarley.com/blog/archive/2004/12/21/1325.aspx
http://www.codeproject.com/KB/aspnet/ViewControl.aspx
...in the interest of time.
public static void ScrollTo(this HtmlGenericControl control)
{
control.Page.RegisterClientScriptBlock("ScrollTo", string.Format(#"
<script type='text/javascript'>
$(document).ready(function() {{
var element = document.getElementById('{0}');
element.scrollIntoView();
element.focus();
}});
</script>
", control.ClientID));
}
Usage:
if (!this.PropertyForm.Validate())
{
this.PropertyForm.ErrorMessage.ScrollTo();
failed = true;
}
(Although it appears Page.RegisterClientScriptBlock() is deprecated for Page.ClientScript.RegisterClientScriptBlock()).
Adding MaintainScrollPositionOnPostback is the closest that ASP.NET has built in, but won't necessarily jump to the invalid field(s).
<%# Page MaintainScrollPositionOnPostback="true" %>
Very simple solution is to set the SetFocusOnError property of the RequiredFieldValidator (or whichever validator control you are using) to true
Are you sure Focus() won't do what you're describing? Under the hood, it is essentially doing the "JavaScript workaround" - it writes some JS to the page which calls focus() on the control with the matching ID:
Whichever control had Focus() called last before the page finishes processing writes this to the page:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('txtFocus2');//]]>
</script>
Please insert these into your OnClick event
Page.MaintainScrollPositionOnPostBack = false;
Page.SetFocus("cliendID");
// or
Page.setFocus(control);
You should looks into jQuery and the ScrollTo plugin
http://demos.flesler.com/jquery/scrollTo/
I've achieved something similar using basic HTML fragments. You just leave an element with a known ID:
<span id="CONTROL-ID"></span>
And then either via script, on on the server side change the url:
window.location += "#CONTROL-ID";
In the first case the page won't reload, it will just scroll down to the control.
Paste the following Javascript:
function ScrollToFirstError() {
Page_ClientValidate();
if (Page_IsValid == false) {
var topMostValidator;
var lastOffsetTop;
for (var i = 0; i < Page_Validators.length; i++) {
var vld = Page_Validators[i];
if (vld.isvalid == false) {
if (PageOffset(vld) < lastOffsetTop || lastOffsetTop == undefined) {
topMostValidator = vld;
lastOffsetTop = vld.offsetTop;
}
}
}
topMostValidator.scrollIntoView();
}
return Page_IsValid;
}
function PageOffset(theElement) {
var selectedPosY = 0;
while (theElement != null) {
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
return selectedPosY;
}
Then call ScrollToFirstError() in your OnClientClick of the button that is saving, make sure the button has CausesValidation=true as well.
There you have it.