jquery function doesn't work when called from usercontrol - c#

I have an aspx page which holds 2 user controls
UC1: Edit page - this has the fields for editing or data entry.
UC2: Notification page - this has a simple message box with jquery function
in my aspx i have this function:
public void ShowMessage(string status, string message)
{
Notification1.Message = message; //this is my user control UC2
Notification1.Status = status;
Notification1.DataBind();
}
now when my aspx page needs to show a message this works fine, but when i want the user control 1 to show a message like (invalid field, or wrong amount) it doesn't do anything. Now it gets called but jquery just doesn't react to it.
in UC2 -notification user control this is what I have:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript">
function showMsg(classname) {
$("#MsgBox").attr('class', classname);
$("#MsgBox").show().delay(5000).fadeOut();
}
</script>
<div id="MsgBox" class="info"><asp:Label ID="lblMessage" runat="server" /></div>
codebehind
public string Status{ get; set; }
public string Message { get; set; }
public override void DataBind()
{
if (Message != string.Empty)
{
lblMessage.Text = Message;
Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "showMsg('" + Status + "');", true);
}
}
and this is how i call the function from user control to aspx page:
((myaspxpage)this.Page).ShowMessage("error", "This is my error message.");
any help will be much appreciated! and if further details is needed just let me know.. Thanks in advance.
**EDIT: I tried putting the jquery and message box inside my Edit page to see if it would work that way and it doesn't So it seems that jquery is not working well within a usercontrol??

Move your codes of DataBind() method into OnPreRender. This should work. The reason is that you don't know which code from which step of your page cycle (init, load, bind, ...) is going to change the Message property.
Like in your case it seems you have a button click event where you are setting the Message property from. This is too late because your Notification1 control is already databound.
Leaving it as the latest stage makes it work:
protected override void OnPreRender()
{
if (Message != string.Empty)
{
lblMessage.Text = Message;
Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "showMsg('" + Status + "');", true);
}
}

I found the error is what that my button that was calling the function in aspx page was inside an update panel and i needed to add a trigger event to make it work.. Thanks everybody for the help it was that update panel causing the error :(

Related

Make User Control hide/show

I have a main page: Main.aspx and 2 user controls User1.ascx and User2.ascx. First, i want User2.ascx to be invisible.I have a hidden value in the main page control. And if value of hidden value is not null then show user2.ascx. I have typed the code in the prerender function on user2.ascx.
Currently, what I try
In Main.aspx
<usercontrol:User1 runat="server" ID="user1control" Visible = "false" />
By this,
In User2, it comes only in pageload event but not in OnPreRender.
I have my all code in OnPreRender
Try something like this
protected void btnToggle_Click(object sender, EventArgs e)
{
string s = btnToggle.Text;
switch (s)
{
case "Hide":
btnToggle.Text = "Show";
break;
case "Show":
btnToggle.Text = "Hide";
break;
}
ucDetails myControl = (ucDetails)Page.LoadControl("~/ucDetails.ascx");
UserControlHolder.Controls.Add(myControl);
myControl.Visible = !myControl.Visible;
}
The other option you can create this on the javascript side. Where you can wrap your usercontrol in a panel and hide and show through javascript function. Hiding and showing through css.
<script type="text/javascript">
function hide() {
document.getElementById("ResultPanel2").style.display = 'none';
}
</script>
I Solved it. I kept a hidden field in main page, and in the load event of main page, I kept a contion that if the value is not null or empty then, user2.visible = true. This worked for me.

javascript confirm message box in usercontrol

I have a usercontrol in which i have placed a javascript function which shows the confirm message box. That usercontrol is further called on aspx page.
the function i wrote is :
<script> function CreatePopup() {
return confirm("Do you confirm?");
}
</script>
and then i called the function on the button :
<asp:Button ID="btnAuthenticate" runat="server" Text="Authenticate"
OnClientClick="return CreatePopup();"
OnClick="btnAuthenticate_Click" />
What happens is this code is not working.. is there any problem with my function here or do we have certain limitations to look after when adding any scripts in usercontrol?
This is blowing me off as this was supposed to be the most simpliest task i thought to be!!!
I Use Javascript with a page method
<script>
function Delete(id) {
if (confirm("Delete Record?"))
{
PageMethods.DeleteSomething(id, onsuccessDel, onfailDel);
}
}
function onsuccessDel(msg) { window.alert('Did IT!'); }
function onfailDel(err) {window.alert('Some Error Occured!'); }
</script>
And then the HTML or ASPX should have :
<asp:ScriptManager ID="scriptMgr" runat="server" ViewStateMode="Disabled" EnablePageMethods="true" />
Delete
The Server side code :
[WebMethod]
public static void DeleteSomething(int id)
{
try{
//some code c#
}
catch (Exception ex)
{
throw new Exception(ex.toString());
}
}
You can see the working demo there: Demo.
And the code from here: code.
Hope this will be helpful to you.
The following worked for me to display a alert box from user control (ascx).
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(), "alert('I am from the Server');", true);

Enter Does Not Work For Submit, ASP.NET Page Refreshes and Doesn't Search

I am working with an ASP.NET site with a C# back end. There is a .Master page where the tag is, and other search pages on the site will search when you hit enter after filling out the form. However we have one page that has a few text boxes and when you hit enter to search, it appears to just refresh and reload the page without searching. In order to search you have to hit the search button (which is an igtxt:WebImageButton ). All of the solutions I have found to this issue so far involve people using javascript to call some kind of function on submit. As far as I know there is no javascript being called when you hit the search button, it is all in the C# code. Once again I find myself searching SO and other sites for an answer but none of the solutions seem to fit my situation. The form tag is as follows:
<form id="form1" runat="server">
The web image buttons call a btn_SearchClick function that runs the search code. But since the form is started in the .Master file I can't edit that as it would effect all other pages as well. Is there any way to have enter call the btn_SearchClick from the form without having to put it in the form tag? I'm not sure what would've changed to cause this behavior on one page and none of the others.
if (!IsPostBack)
{
TextBox1.Attributes.Add("onKeyPress",
"doClick('" + btnSearch.ClientID + "',event)");
}
<SCRIPT type=text/javascript>
function doClick(buttonName,e)
{
//the purpose of this function is to allow the enter key to
//point to the correct button to click.
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if (key == 13)
{
//Get the button the user wants to have clicked
var btn = document.getElementById(buttonName);
if (btn != null)
{ //If we find the button click it
btn.click();
event.keyCode = 0
}
}
}
</SCRIPT>
or u can use default button.it's work while cursor's in this box
protected void Page_Load(object sender, EventArgs e)
{
this.Form.DefaultButton = this.btnSubmit.UniqueID;
}
Add some jquery to control the Enter key behavior on your textbox. Something like this:
$(function() {
$('#<%=txtTextbox.ClientID%>').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
$('#<%=btn_SearchClick.ClientID%>').click();
}
});
});

How to unregister Page.ClientScript in C# Asp.net

I am registering java script to my Asp.net code behind file, which is working fine. Now, I have some update panels on the same page and problem is whenever there is any change in any of the update panel, this script is automatically getting called. Is there any way that I can stop this happening. I can't remove update panels from my page and this script is also a very essential part of the application. In this situation I am just calling a alert (rad alert with set time out functionality) when Save Button is clicked or an Update routine is called while I have few other buttons in update panels and whenver any of the button which is registered to the update panels clicked, the following script is called un-willingly. Anyone's help will really be appreciated.
following is my Page.ClientScript
string radalertscript = "<script language='javascript'> Sys.Application.add_load(function(sender, e) {var oWnd = radalert('dialogMessage', 400, 140, 'Saved');window.setTimeout(function () { oWnd.Close(); }, 3000);});</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", radalertscript);
You can assign empty string to same key radalert to remove the script.
if(some_condition)
Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", "");
Edit: Based on comments, you can make it simple without using RegisterStartupScript
In code behind
btnSave.Attributes.Add("", "saveButtonFunction();");
In Javascript
<script language='javascript'>
Sys.Application.add_load(function(sender, e) {
if(btnSaveClicked){
var oWnd = radalert('dialogMessage', 400,140, 'Saved');
window.setTimeout(function () { oWnd.Close(); }, 3000);
btnSaveClicked = false;
}
});
btnSaveClicked = false;
function saveButtonFunction(){
btnSaveClicked = true;
};
</script>
Thank you very much for your answer Adil. I already have followed the same approach with little difference. I have taken JavaScript out from my code behind file and have registered Sys.Application.add_load event as follow
Sys.Application.add_load(DisplayRadAlertHandler);
function DisplayRadAlertHandler() {
var getMessage = document.getElementById('<%=radAlertDialogHidden.ClientID%>').value;
if (getMessage != "") {
document.getElementById('<%=radAlertDialogHidden.ClientID%>').value = "";
var oWnd = radalert(getMessage, 400, 140, 'Saved');
window.setTimeout(function () { oWnd.Close(); }, 3000);
}
}
Here I am setting my alert message in a hidden input field from code behind file and in the above event handler I am just checking if message is there than reset the hidden field and display the message. Your approach is also right and I have marked your answer but as I am displaying my message from multiple locations (Save button, Update routine etc.) so by assigning value to hidden input field and than resetting in above event handler looks more appropriate. Thanks once again for your help.

Can't get ScriptManager.RegisterStartupScript in WebControl nested in UpdatePanel to work

I am having what I believe should be a fairly simple problem, but for the life of me I cannot see my problem. The problem is related to ScriptManager.RegisterStartupScript, something I have used many times before.
The scenario I have is that I have a custom web control that has been inserted into a page. The control (and one or two others) are nested inside an UpdatePanel. They are inserted onto the page onto a PlaceHolder:
<asp:UpdatePanel ID="pnlAjax" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="placeholder" runat="server">
</asp:PlaceHolder>
...
protected override void OnInit(EventArgs e){
placeholder.Controls.Add(Factory.CreateControl());
base.OnInit(e);
}
This is the only update panel on the page.
The control requires some initial javascript be run for it to work correctly. The control calls:
ScriptManager.RegisterStartupScript(this, GetType(),
Guid.NewGuid().ToString(), script, true);
and I have also tried:
ScriptManager.RegisterStartupScript(Page, Page.GetType(),
Guid.NewGuid().ToString(), script, true);
The problem is that the script runs correctly when the page is first displayed, but does not re-run after a partial postback. I have tried the following:
Calling RegisterStartupScript from CreateChildControls
Calling RegisterStartupScript from OnLoad / OnPreRender
Using different combinations of parameters for the first two parameters (in the example above the Control is Page and Type is GetType(), but I have tried using the control itself, etc).
I have tried using persistent and new ids (not that I believe this should have a major impact either way).
I have used a few breakpoints and so have verified that the Register line is being called correctly.
The only thing I have not tried is using the UpdatePanel itself as the Control and Type, as I do not believe the control should be aware of the update panel (and in any case there does not seem to be a good way of getting the update panel?).
Can anyone see what I might be doing wrong in the above?
Thanks :)
Well, to answer the query above - it does appear as if the placeholder somehow messes up the ScriptManager.RegisterStartupScript.
When I pull the control out of the placeholder and code it directly onto the page the Register script works correctly (I am also using the control itself as a parameter).
ScriptManager.RegisterStartupScript(this, GetType(), Guid.NewGuid().ToString(), script, true);
Can anyone throw any light on why an injected control onto a PlaceHolder would prevent the ScriptManager from correctly registering the script? I am guessing this might have something to do with the lifecycle of dynamic controls, but would appreciate (for my own knowledge) if there is a correct process for the above.
I had an issue using this in a user control (in a page this worked fine); the Button1 is inside an updatepanel, and the scriptmanager is on the usercontrol.
protected void Button1_Click(object sender, EventArgs e)
{
string scriptstring = "alert('Welcome');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "alertscript", scriptstring, true);
}
Now it seems you have to be careful with the first two arguments, they need to reference your page, not your control
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "alertscript", scriptstring, true);
I think you should indeed be using the Control overload of the RegisterStartupScript.
I've tried the following code in a server control:
[ToolboxData("<{0}:AlertControl runat=server></{0}:AlertControl>")]
public class AlertControl : Control{
protected override void OnInit(EventArgs e){
base.OnInit(e);
string script = "alert(\"Hello!\");";
ScriptManager.RegisterStartupScript(this, GetType(),
"ServerControlScript", script, true);
}
}
Then in my page I have:
protected override void OnInit(EventArgs e){
base.OnInit(e);
Placeholder1.Controls.Add(new AlertControl());
}
Where Placeholder1 is a placeholder in an update panel. The placeholder has a couple of other controls on in it, including buttons.
This behaved exactly as you would expect, I got an alert saying "Hello" every time I loaded the page or caused the update panel to update.
The other thing you could look at is to hook into some of the page lifecycle events that are fired during an update panel request:
Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(EndRequestHandler);
The PageRequestManager endRequestHandler event fires every time an update panel completes its update - this would allow you to call a method to set up your control.
My only other questions are:
What is your script actually doing?
Presumably you can see the script in the HTML at the bottom of the page (just before the closing </form> tag)?
Have you tried putting a few "alert("Here");" calls in your startup script to see if it's being called correctly?
Have you tried Firefox and Firebug - is that reporting any script errors?
When you call ScriptManager.RegisterStartupScript, the "Control" parameter must be a control that is within an UpdatePanel that will be updated. You need to change it to:
ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(), script, true);
The solution is to put the scripts in an outside js file (lets called 'yourDynamic.js') and re-register de file everytime you refresh the updatepanel.
I use this in the updatepanel_prerender event:
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "UpdatePanel1_PreRender", _
"<script type='text/javascript' id='UpdatePanel1_PreRender'>" & _
"include('yourDynamic.js');" & _
"removeDuplicatedScript('UpdatePanel1_PreRender');</script>" _
, False)
In the page or in some other include you will need this javascript:
// Include a javascript file inside another one.
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
var scripts = document.getElementsByTagName('script');
for(var x=0;x<scripts.length;> {
if (scripts[x].getAttribute('src'))
{
if(scripts[x].getAttribute('src').indexOf(filename) != -1)
{
head.removeChild(scripts[x]);
break;
}
}
}
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
// Removes duplicated scripts.
function removeDuplicatedScript(id)
{
var count = 0;
var head = document.getElementsByTagName('head')[0];
var scripts = document.getElementsByTagName('script');
var firstScript;
for(var x=0;x<scripts.length;> {
if (scripts[x].getAttribute('id'))
{
if(scripts[x].getAttribute('id').indexOf(id) != -1)
{
if (count == 0)
{
firstScript = scripts[x];
count++;
}
else
{
head.removeChild(firstScript);
firstScript = scripts[x];
count = 1;
}
}
}
}
clearAjaxNetJunk();
}
// Evoids the update panel auto generated scripts to grow to inifity. X-(
function clearAjaxNetJunk()
{
var knowJunk = 'Sys.Application.add_init(function() {';
var count = 0;
var head = document.getElementsByTagName('head')[0];
var scripts = document.getElementsByTagName('script');
var firstScript;
for(var x=0;x<scripts.length;> {
if (scripts[x].textContent)
{
if(scripts[x].textContent.indexOf(knowJunk) != -1)
{
if (count == 0)
{
firstScript = scripts[x];
count++;
}
else
{
head.removeChild(firstScript);
firstScript = scripts[x];
count = 1;
}
}
}
}
}
Pretty cool, ah...jejeje
This part of what i posted some time ago here.
Hope this help... :)
I had an issue with Page.ClientScript.RegisterStartUpScript - I wasn't using an update panel, but the control was cached. This meant that I had to insert the script into a Literal (or could use a PlaceHolder) so when rendered from the cache the script is included.
A similar solution might work for you.
DO NOT Use GUID For Key
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel)
Guid.NewGuid().ToString(), myScript, true);
and if you want to do that , call Something Like this function
public static string GetGuidClear(string x)
{
return x.Replace("-", "").Replace("0", "").Replace("1", "")
.Replace("2", "").Replace("3", "").Replace("4", "")
.Replace("5", "").Replace("6", "").Replace("7", "")
.Replace("8", "").Replace("9", "");
}
What worked for me, is registering it on the Page while specifying the type as that of the UpdatePanel, like so:
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel) Guid.NewGuid().ToString(), myScript, true);
Sometimes it doesnt fire when the script has some syntax error, make sure the script and javascript syntax is correct.
ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(),script, true );
The "true" param value at the end of the ScriptManager.RegisterStartupScript will add a JavaScript tag inside your page:
<script language='javascript' defer='defer'>your script</script >
If the value will be "false" it will inject only the script witout the --script-- tag.
I try many things and finally found that the last parameter must be false and you must add <SCRIPT> tag to the java script :
string script = "< SCRIPT >alert('hello!');< /SCRIPT>";
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), key, script, **false**);

Categories