How to make java script and update panels work together in asp.net

Hello,

In my asp.net web application, I have used java script and update panels(script manager) together. Java script functions are getting called and working fine on the web pages which don't have update panels. Where ever I have used them together, java script function does  not get called.

Could someone please help.
Tina_BholeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ddayx10Commented:
There is nothing explicit about having a scriptmanager and updatepanel on a page that would stop JavaScript in general from working. There has to be something about the way your JavaScript is interacting with the page that is being broken, overridden or otherwise mis-aligned with the processes called from the AJAX controls.

You need to show some code, and example of the type of operations involved and code that is breaking for us to be any help to you here. Please try to set it up in such a way as we have all the information to make it duplicatable.
0
Tina_BholeAuthor Commented:
Thanks for your response ddayx10.

Please see the following code:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Downloads_Manager.aspx.cs" Inherits="VA.Downloads_Manager" Title="Downloads Manager" MasterPageFile="~/Site.master" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="SM1" runat="server" EnablePageMethods="true" EnablePartialRendering="true" EnableScriptLocalization="true" EnableViewState="true"> </asp:ScriptManager>

<asp:UpdatePanel ID="UPmain" runat="server" UpdateMode="Conditional">
<ContentTemplate>
        <table cellpadding="0" cellspacing="0" border="0" class="defaultpg">
            <tr>
                <td>
                     <table cellpadding="0" cellspacing="0" border="0" class="productmenu5">
                          <tr>
                                <td><asp:Button Text="Upload Files" CssClass="menutb" ID="btnUpload" OnClick="ShowUpload" runat="server"/></td>
                                <td><asp:Button Text="Create User" CssClass="menutb"  ID="btnCreateUser" OnClick="showCreateUser"  runat="server" /></td>
                                <td><asp:Button Text="Retrieve Password" CssClass="menutb"  ID="btnRetrievePassword" OnClick="showRetrievePassword"  runat="server" /></td>
                                <td><asp:Button Text="Remove Files" CssClass="menutb"  ID="btnRemoveFiles" OnClick="showRemoveFiles" runat="server" /></td>
                                <td><asp:Button Text="Delete Records" CssClass="menutb"  ID="btnDeleteRecords" OnClick="showDeleteRecords" runat="server" /></td>
                         </tr>
                     </table>
                </td>
            </tr>
            <tr>
                <td class="contents">
                <asp:UpdatePanel ID="UPUpload" runat="server" UpdateMode="Conditional">
                        <Triggers>
                           <asp:PostBackTrigger  ControlID="btnuploadfile"/>
                        </Triggers>
                        <ContentTemplate>
                                <table cellpadding="0" cellspacing="0" border="0" class="smallform1left">
                                    <tr>
                                        <td colspan="2" > &nbsp;&nbsp;<asp:FileUpload runat="server" CssClass="inputfile" ID="inputfile" /></td>
                                    </tr>
                                    <tr><td class="bottommargin">.</td></tr>
                                    <tr>
                                        <td class="lbl" >&nbsp;&nbsp;&nbsp;&nbsp;Description</td>
                                        <td><asp:TextBox runat="server" ID="txtfiledesc" CssClass="txtboxextralong"></asp:TextBox></td>
                                    </tr>
                                    <tr><td class="bottommargin">.</td></tr>
                                    <tr>
                                        <td class="floatleft" colspan="2"><asp:Button runat="server" ID="btnuploadfile" Text="Upload" CssClass="btn2sml" OnClick="UploadFile" /></td>
                                    </tr>
                                </table>
                        </ContentTemplate>
                        </asp:UpdatePanel>
              </td>
            </tr>
        </table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>


-------------------------------------------code behind----------------------------------------------------


protected void UploadFile(object sender, EventArgs e)
        {
            if (txtfiledesc.Text.Trim() != "")
            {
                if ((inputfile.PostedFile != null) && (inputfile.PostedFile.ContentLength > 0))
                {
                    try
                    {
                        string fn = System.IO.Path.GetFileName(inputfile.PostedFile.FileName);
                        string savelocation = Server.MapPath("Downloads\\Hotfixes") + "\\" + fn;
                        inputfile.PostedFile.SaveAs(savelocation);

                        SqlConnection mySqlConnection = new SqlConnection(GlobalClass.ConnectionStr);
                        mySqlConnection.Open();
                        SqlCommand mySqlCommand = new SqlCommand(GlobalClass.I_Uploads, mySqlConnection);
                        mySqlCommand.Parameters.AddWithValue("@filename", inputfile.PostedFile.FileName);
                        mySqlCommand.Parameters.AddWithValue("@filedesc", txtfiledesc.Text);
                        mySqlCommand.ExecuteNonQuery();
                        mySqlCommand.Dispose();
                        mySqlConnection.Close();

                        txtfiledesc.Text = "";
                        UPUpload.Update();
                        GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert('File has been Uploaded Successfully.');</script>";
                        ScriptManager.RegisterStartupScript(btnuploadfile, btnuploadfile.GetType(), "fileuploadScript1", "GlobalClass.JScript_Alert", true);
                        
                        
                    }
                    catch (Exception exp)
                    {
                        GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert(" + exp.Message.ToString() + ");</script>";
                        ScriptManager.RegisterStartupScript(this,Page.GetType(),"courseschScript1", GlobalClass.JScript_Alert,true);
                    }
                }
            }
            else
            {
                GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert('Please add a Description for the File being Uploaded');</script>";
                ScriptManager.RegisterStartupScript(this, Page.GetType(), "courseschScript2", GlobalClass.JScript_Alert,true);
            }
        }

Open in new window

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Downloads_Manager.aspx.cs" Inherits="VA.Downloads_Manager" Title="Downloads Manager" MasterPageFile="~/Site.master" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="SM1" runat="server" EnablePageMethods="true" EnablePartialRendering="true" EnableScriptLocalization="true" EnableViewState="true"> </asp:ScriptManager>

<asp:UpdatePanel ID="UPmain" runat="server" UpdateMode="Conditional">
<ContentTemplate>
        <table cellpadding="0" cellspacing="0" border="0" class="defaultpg">
            <tr>
                <td>
                     <table cellpadding="0" cellspacing="0" border="0" class="productmenu5">
                          <tr>
                                <td><asp:Button Text="Upload Files" CssClass="menutb" ID="btnUpload" OnClick="ShowUpload" runat="server"/></td>
                                <td><asp:Button Text="Create User" CssClass="menutb"  ID="btnCreateUser" OnClick="showCreateUser"  runat="server" /></td>
                                <td><asp:Button Text="Retrieve Password" CssClass="menutb"  ID="btnRetrievePassword" OnClick="showRetrievePassword"  runat="server" /></td>
                                <td><asp:Button Text="Remove Files" CssClass="menutb"  ID="btnRemoveFiles" OnClick="showRemoveFiles" runat="server" /></td>
                                <td><asp:Button Text="Delete Records" CssClass="menutb"  ID="btnDeleteRecords" OnClick="showDeleteRecords" runat="server" /></td>
                         </tr>
                     </table>
                </td>
            </tr>
            <tr>
                <td class="contents">
                <asp:UpdatePanel ID="UPUpload" runat="server" UpdateMode="Conditional">
                        <Triggers>
                           <asp:PostBackTrigger  ControlID="btnuploadfile"/>
                        </Triggers>
                        <ContentTemplate>
                                <table cellpadding="0" cellspacing="0" border="0" class="smallform1left">
                                    <tr>
                                        <td colspan="2" > &nbsp;&nbsp;<asp:FileUpload runat="server" CssClass="inputfile" ID="inputfile" /></td>
                                    </tr>
                                    <tr><td class="bottommargin">.</td></tr>
                                    <tr>
                                        <td class="lbl" >&nbsp;&nbsp;&nbsp;&nbsp;Description</td>
                                        <td><asp:TextBox runat="server" ID="txtfiledesc" CssClass="txtboxextralong"></asp:TextBox></td>
                                    </tr>
                                    <tr><td class="bottommargin">.</td></tr>
                                    <tr>
                                        <td class="floatleft" colspan="2"><asp:Button runat="server" ID="btnuploadfile" Text="Upload" CssClass="btn2sml" OnClick="UploadFile" /></td>
                                    </tr>
                                </table>
                        </ContentTemplate>
                        </asp:UpdatePanel>
              </td>
            </tr>
        </table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>


-------------------------------------------code behind----------------------------------------------------


protected void UploadFile(object sender, EventArgs e)
        {
            if (txtfiledesc.Text.Trim() != "")
            {
                if ((inputfile.PostedFile != null) && (inputfile.PostedFile.ContentLength > 0))
                {
                    try
                    {
                        string fn = System.IO.Path.GetFileName(inputfile.PostedFile.FileName);
                        string savelocation = Server.MapPath("Downloads\\Hotfixes") + "\\" + fn;
                        inputfile.PostedFile.SaveAs(savelocation);

                        SqlConnection mySqlConnection = new SqlConnection(GlobalClass.ConnectionStr);
                        mySqlConnection.Open();
                        SqlCommand mySqlCommand = new SqlCommand(GlobalClass.I_Uploads, mySqlConnection);
                        mySqlCommand.Parameters.AddWithValue("@filename", inputfile.PostedFile.FileName);
                        mySqlCommand.Parameters.AddWithValue("@filedesc", txtfiledesc.Text);
                        mySqlCommand.ExecuteNonQuery();
                        mySqlCommand.Dispose();
                        mySqlConnection.Close();

                        txtfiledesc.Text = "";
                        UPUpload.Update();
                        GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert('File has been Uploaded Successfully.');</script>";
                        ScriptManager.RegisterStartupScript(btnuploadfile, btnuploadfile.GetType(), "fileuploadScript1", "GlobalClass.JScript_Alert", true);
                        
                        
                    }
                    catch (Exception exp)
                    {
                        GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert(" + exp.Message.ToString() + ");</script>";
                        ScriptManager.RegisterStartupScript(this,Page.GetType(),"courseschScript1", GlobalClass.JScript_Alert,true);
                    }
                }
            }
            else
            {
                GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert('Please add a Description for the File being Uploaded');</script>";
                ScriptManager.RegisterStartupScript(this, Page.GetType(), "courseschScript2", GlobalClass.JScript_Alert,true);
            }
        }

Open in new window

0
ddayx10Commented:
OK I see what's wrong. I have to do something else first then I'll come back and explain in about 1/2 hour :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ddayx10Commented:
OK there are several small things you are doing wrong that add up to this not working. The good news is it's easy to fix :)

There are 3 areas where you are doing something like this(Im going to take the 3rd one for my example):


GlobalClass.JScript_Alert = "@<script language='javascript' type='text/javascript'>alert('Please add a Description for the File being Uploaded');</script>";

ScriptManager.RegisterStartupScript(this, Page.GetType(), "courseschScript2", GlobalClass.JScript_Alert,true);

Problems:

1. The ScriptManager.RegisterStartupScript method is not going to work in this instance with an update panel because the entire page is not reloading. This needs to be replaced with the ScriptManager.RegisterClientScriptBlock method instead.

2. You are assigning a JavaScript string to your class GlobalClass.JScript_Alert. The last parameter of the RegisterStartupScript/RegisterClientScriptBlock methods (the boolean) determines whether the method automatically assigns the script block for you. You have added the script block in your string and also assigned it again using true as the parameter. It needs to be one or the other. You will still see a glitch even after the JavaScript is running because you have the @ symbol inside the string instead of just outside it...

Ex.

string s = @"somestring"; //correct
string s = "@somestring"; //incorrect

So the entire thing could be changed as follows and will work:

GlobalClass.JScript_Alert  = @"<script language='javascript' type='text/javascript'>alert('Please add a Description for the File being Uploaded');</script>";

ScriptManager.RegisterClientScriptBlock(btnuploadfile, btnuploadfile.GetType(), "courseschScript2", GlobalClass.JScript_Alert , false);

OR


GlobalClass.JScript_Alert  = @"alert('Please add a Description for the File being Uploaded');";

ScriptManager.RegisterClientScriptBlock(btnuploadfile, btnuploadfile.GetType(), "courseschScript2", GlobalClass.JScript_Alert , true);


Also note that in this line (81 in above sample):

ScriptManager.RegisterStartupScript(btnuploadfile, btnuploadfile.GetType(), "fileuploadScript1", "GlobalClass.JScript_Alert", true);


You incorrectly have "" around GlobalClass.JScript_Alert.

Hope that clears things up for you. I have setup and tested your code above and this all works properly.

Good Luck


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tina_BholeAuthor Commented:
WOW!!! thank you so much. It's working now :)
0
Tina_BholeAuthor Commented:
The explanation was excellent. Thank you very much
0
ddayx10Commented:
YW :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.