[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-26
7
Medium Priority
?
316 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:Tina_Bhole
  • 4
  • 3
7 Comments
 
LVL 20

Expert Comment

by:ddayx10
ID: 37034796
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
 

Author Comment

by:Tina_Bhole
ID: 37034831
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
 
LVL 20

Expert Comment

by:ddayx10
ID: 37034952
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 20

Accepted Solution

by:
ddayx10 earned 1000 total points
ID: 37035053
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
 

Author Comment

by:Tina_Bhole
ID: 37035470
WOW!!! thank you so much. It's working now :)
0
 

Author Closing Comment

by:Tina_Bhole
ID: 37035474
The explanation was excellent. Thank you very much
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 37035692
YW :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 11 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question