Re: javascript manipulations on an image via ImageUrl rewriting issue

Last post 08-03-2007 3:08 AM by Steve Marx. 14 replies.

Sort Posts:

  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-01-2007, 8:55 PM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    Hello,

    This is a weird one. I am using a small javascript file in an image's CssClass property to change its appearance on the client-side. I have a UserControl that begins with this image default, and it works great. When the file is uploaded, the ImageUrl is rewritten with the freshly uploaded image thumbnail and on a full page refresh, it also works great.

    Now I'm using the IFrame approach to the FileUpload/UpdatePanel problem via JeffZ's AjaxFileUploadHelper. Everything works great for asyn file uploading, and the image does appear after the upload is complete, except my image manipulation trick no longer gets applied, and this probably makes sense because it works on a full page refresh. Is there a way to force this .js to reload the image cssclass that's doing the manipulation via .js, or am I chasing my tail?

     

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-01-2007, 11:50 PM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    Here is a little more detail after working a few things out. I am trying to accomplish running a javascript include after a Button click in a User Control when an update occurs on an UpdatePanel.

     In the OnClick event code, I have something like this:

    // Run script after event
    StringBuilder sb = new StringBuilder();

    // this works
    sb.Append("<script type='text/javascript'>alert('x');</script>");

    // this does not
    // sb.Append("<script type='text/javascript' src='script.js'>doThis();</script>");

    if(!Page.ClientScript.IsStartupScriptRegistered(GetType(), "script"))
    {
         ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", sb.ToString(), false);
    }

    So I am able to register the dummy alert script but the include does not run, or does not appear to. I thought about it being a path issue but I resorted to dropping copies in the base Page, user control, and masterpage directories to no avail.

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 7:10 PM

    I think the problem is you code, You are Checking the Page.ClientScript whether it is registered which will never true as your are adding in the scriptmanager. Replace it with the following:

    if(!ScriptManager.IsStartupScriptRegistered(GetType(), "script"))
    {
         ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", sb.ToString(), false);
    }

    Long Live .NET
    Kazi Manzur Rashid (Amit)
    _________________________
    http://weblogs.asp.net/rashid/
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 7:56 PM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    KaziManzurRashid:

    I think the problem is you code, You are Checking the Page.ClientScript whether it is registered which will never true as your are adding in the scriptmanager. Replace it with the following:

    if(!ScriptManager.IsStartupScriptRegistered(GetType(), "script"))
    {
         ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", sb.ToString(), false);
    }

     

     
    Thanks, Kazi. I agree that the code is probably never going to evaluate to true in this circumstance, and that is probably a separate issue. ScriptManager actually doesn't have an "IsStartupScriptRegistered" method, so would you suggest an alternative?

    I think the main issue I'm having is that the example I gave that executes the inline alert javascript works fine but the function to run a script from a file does not. I want to run a file, not an inline script. Why does one work and not the other?
     

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 8:09 PM

    Treh try this:

    ScriptManager.RegisterClientScriptInclude(this, this.GetType, "externalFile", "YourJSFileUrl");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "startUp", "functionNameOfTheAboveFileThatYouWantToExecute()", true);

    Long Live .NET
    Kazi Manzur Rashid (Amit)
    _________________________
    http://weblogs.asp.net/rashid/
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 8:09 PM

    Then try this:

    ScriptManager.RegisterClientScriptInclude(this, this.GetType, "externalFile", "YourJSFileUrl");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "startUp", "functionNameOfTheAboveFileThatYouWantToExecute()", true);

    Long Live .NET
    Kazi Manzur Rashid (Amit)
    _________________________
    http://weblogs.asp.net/rashid/
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 8:15 PM
    • Loading...
    • Steve Marx
    • Joined on 05-26-2006, 4:35 PM
    • Microsoft
    • Posts 643

    Give this a try:

            ScriptManager.RegisterClientScriptInclude(this, typeof(Page), "testjs", "test.js");
            ScriptManager.RegisterStartupScript(this, typeof(Page), "test", "test();", true);
     
    Steve Marx | ASP.NET AJAX Evangelist | Microsoft Corporation
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 8:55 PM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    Steve Marx:

    Give this a try:

            ScriptManager.RegisterClientScriptInclude(this, typeof(Page), "testjs", "test.js");
            ScriptManager.RegisterStartupScript(this, typeof(Page), "test", "test();", true);

     

     Hi Steve,

    I created a test.js file with a single test() function that alerts the browser. I created it in the same UserControls directory as the control resides in. I then replaced the inline script code with the following:

    string
    url = ResolveClientUrl("test.js");
    ScriptManager.RegisterClientScriptInclude(this, typeof(UserControl), "testjs", url);
    ScriptManager.RegisterStartupScript(this, typeof(UserControl), "test", "test();", true);

    Since I followed the thought that a script manager belongs to the page hosting the user control, I also attempted:
    string url = "/UserControls/test.js";
    ScriptManager.RegisterClientScriptInclude(this.Page, typeof(Page), "testjs", url);
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "test", "test();", true);

    But do not see the alert. Actually the latter approach introduced an introducing side effect where the button controlling the modal popup needed to be pressed twice to call the popup, and it works correctly with the first.

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 8:56 PM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    Steve Marx:

    Give this a try:

            ScriptManager.RegisterClientScriptInclude(this, typeof(Page), "testjs", "test.js");
            ScriptManager.RegisterStartupScript(this, typeof(Page), "test", "test();", true);

     

     Hi Steve,

    I created a test.js file with a single test() function that alerts the browser. I created it in the same UserControls directory as the control resides in. I then replaced the inline script code with the following:

    string
    url = ResolveClientUrl("test.js");
    ScriptManager.RegisterClientScriptInclude(this, typeof(UserControl), "testjs", url);
    ScriptManager.RegisterStartupScript(this, typeof(UserControl), "test", "test();", true);

    Since I followed the thought that a script manager belongs to the page hosting the user control, I also attempted:
    string url = "/UserControls/test.js";
    ScriptManager.RegisterClientScriptInclude(this.Page, typeof(Page), "testjs", url);
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "test", "test();", true);

    But do not see the alert. Actually the latter approach introduced an interesting side effect whereby the button controlling the modal popup needed to be pressed twice to call the popup, and it works correctly with the first.

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-02-2007, 10:11 PM
    • Loading...
    • Steve Marx
    • Joined on 05-26-2006, 4:35 PM
    • Microsoft
    • Posts 643

    Does your script include the call to "Sys.Application.notifyScriptLoaded()" at the end?

    Do you see any JavaScript errors in the browser when it doesn't work?

     

    (P.S. Kazi, I didn't see your reply when I made mine... great minds think alike! :-P)

    Steve Marx | ASP.NET AJAX Evangelist | Microsoft Corporation
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-03-2007, 2:04 AM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    Steve Marx:

    Does your script include the call to "Sys.Application.notifyScriptLoaded()" at the end?

    Do you see any JavaScript errors in the browser when it doesn't work?

     

    (P.S. Kazi, I didn't see your reply when I made mine... great minds think alike! :-P)

    The test script works with a call to Sys.Application.notifyScriptLoaded(), thank you for that. My simple test.js file looked like this:

    function test()
    {
        alert(
    "x");
    }

    if(Sys && Sys.Application)
    {
        Sys.Application.notifyScriptLoaded();
    }

    It's easy to overlook dependencies and if possibly I'd love to hear recommendations on good texts out there to help me get a broader picture of how this all fits together (even if it's an "old school" javascript book). Just to be specific I used this snippet in order to register on the script manager page though the script request is spawned by the UserControl:

    ScriptManager.RegisterClientScriptInclude(Page, typeof(Page), "testjs", url);
    ScriptManager.RegisterStartupScript(Page, typeof(Page), "test", "test();", true);

    I'm not out of the woods yet, however, as Firefox doesn't obey this, at least in this scenario, and continues to remain unresponsive. For the record, I didn't receive any javascript errors in either browser to tip me off.

    The AjaxFileUploadHelper project I'm using to achieve partial postbacks of image uploads in an update panel (which is in a UserControl) is already having issues with Firefox, however, as it completes its operation but leaves Firefox in a perpetual "loading activity" state in the browser tab and cursor selection. I'm determined to stick with this though, as the end result should be a really slick image uploading control.

     

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-03-2007, 2:31 AM
    Answer
    • Loading...
    • Steve Marx
    • Joined on 05-26-2006, 4:35 PM
    • Microsoft
    • Posts 643

    Strange.  I just tried this on my computer, and it works fine in IE7 and Firefox 2.0.0.6.  Here's my complete source just in case, but it looks to be pretty much identical to yours:

    default.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        protected void button_click(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptInclude(this, typeof(Page), "testjs", "test.js");
            ScriptManager.RegisterStartupScript(this, typeof(Page), "test", "test();", true);
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server" OnClick="button_click" Text="Click Me" />
                </ContentTemplate>
            </asp:UpdatePanel>
        <div>
        
        </div>
        </form>
    </body>
    </html>
    

    test.js:

    function test () {
        alert('here');
    }
    
    Sys.Application.notifyScriptLoaded();
     
    Steve Marx | ASP.NET AJAX Evangelist | Microsoft Corporation
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-03-2007, 2:49 AM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    No doubt, this code runs cleanly on my machine too. I suspect the issue arises when the same code is moved to a UserControl. Then the AspFileUploadHelper project is dropped on the control to facilitate the hack for FileUpload and UploadPanel operations, then the ModalPopupExtender is added for a thumbnail full image view from dynamic page-based image links (saved to the response stream), etc., etc.

    I'll have to break this down and try to isolate what's causing the trouble. Technically AspFileUploadHelper is broken in Firefox which probably accounts for the script not running properly, or it could be linked to the ModalPopupExtender. I'll start a separate project and try to pin it down.

    Some day I'll be able to answer more questions than I ask.
  • Re: javascript manipulations on an image via ImageUrl rewriting issue

    08-03-2007, 3:02 AM
    • Loading...
    • Dimebrain
    • Joined on 07-13-2007, 11:41 PM
    • Posts 68

    I was able to reach a partial solution for this with your help. Basically, the custom script I was using needed to run both in traditional full postback, as well as partial postback when it was required. When I didn't include the notifyScriptLoaded() code in my custom script before you enlightened me, I didn't see any script errors in either browser. When I added the code, I added it to the single script file that was responsible for both full and partial running. What I didn't notice after I did this was I was now getting the 'Sys' is undefined error for the case where I was just referencing the script in a tag for the full postback, 'normal' mode. This probably prevented any further running of scripts on the page.

    So, I copied the 'normal' script, added the Sys.Application.notifyScriptLoaded() call and renamed it to script_partial, and I registered that file, not the classic file. Now that they no longer collide, it appears to work in both Firefox and IE. Now I just have to fix the endless activity indicators in Firefox and th