Multiple buttons created via JavaScript

Thread is closed for posting
5 posts, 1 answers
  1. Chase Florell
    Chase Florell avatar
    257 posts
    Member since:
    Apr 2005

    Posted 02 Dec 2008 Link to this post

    I have a strange issue that I am hoping for some guidance on.

    I have two UserControls on my page, one contains a RadGrid inside a RadAjaxPanel and the other has an upload control.

    My problem is that whenever I "Page" the RadGrid, a new button is created dynamically inside my RadUpload DIV.

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Admin_BizForSale_ValueProUploader.ascx.vb" Inherits="App_Controls_Admin_BizForSale_ValueProUploader" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        <script language="javascript" type="text/javascript">  
            function checkJavaScriptValidity() {  
                document.getElementById("jsEnabled").style.visibility = 'visible';  
                document.getElementById("jsDisabled").style.visibility = 'hidden';  
                document.getElementById("jsDisabled").style.display = 'none';  
            }  
        </script> 
              
          
    <div class="customheader">Upload ValuePro</div> 
    <div class="panelbody_bottom">  
        <table> 
            <tr> 
                <td> 
                <div id="jsEnabled" style="visibility: hidden">  
                    <telerik:RadProgressManager ID="RadProgressManager1" runat="server" /> 
                    <telerik:RadUpload ID="RadUpload1"   
                                       runat="server"   
                                       Skin="Default2006"   
                                       TargetFolder="~/App_Data/ValuePro"   
                                       AllowedFileExtensions=".xml"   
                                       Width="370px"   
                                       ControlObjectsVisibility="None"   
                                       InputSize="33"   
                                       MaxFileInputsCount="1"   
                                       Localization-Select="Browse..." /> 
                                       <asp:Label ID="Label2" runat="server" Visible="false" /> 
                </div> 
               <div id="jsDisabled" style="color:Red;">  
                   Uploading ValuePro requires a <href="http://en.wikipedia.org/wiki/JavaScript" target="_blank" style="color:Red;">JavaScript Enabled Browser</a>.<br /> 
                   Click <href="http://www.google.com/support/bin/answer.py?hl=en&answer=23852" target="_blank" style="color:Red;">Here</a> to see how you can enable JavaScript.<br /><br /> 
                   We are sorry for the inconvenience.  
               </div> 
                </td> 
                <td style="padding-left:10px;">  
                    Business-Trader.com is set up to allow you to upload your ValuePro1 and your ValuePro10 information via XML to your Businesses For Sale Profile.&nbsp; Once your Ad is uploaded and paid for, it will be available in the   
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Search.aspx">Search</asp:HyperLink> &nbsp;area of Business-Trader.com.<br /> 
                    </td> 
            </tr> 
            <tr> 
                <td colspan="2">  
                    <telerik:RadProgressArea ID="RadProgressArea1" ProgressIndicators="TotalProgressBar, TotalProgress, TotalProgressPercent, RequestSize, TimeElapsed, TimeEstimated, TransferSpeed" runat="server"   
                        Skin="Default2006" /> 
                </td> 
            </tr> 
        </table> 
    </div> 
     <script type="text/javascript">  
        function pageLoad() {  
                var upload = $find("<%= RadUpload1.ClientID %>");  
                var uploaduploadDiv = upload.get_element();  
     
                var input = document.createElement("input");  
                input.type = "submit";  
                input.className = "ruButton";  
                input.value = "Upload";  
                inputinput.id = input.name = upload.getID("submitButton");  
                input.onclick = onClickHandler;  
     
                //the UL element of the upload  
                var ul = uploadDiv.getElementsByTagName("UL");  
                //the array of all LI elements of the UL element  
                var LIs = ul[0].getElementsByTagName("LI");  
                //Last LI item - the button area  
                var lastLi = LIs[LIs.length - 1];  
                lastLi.appendChild(input);  
            }  
        function onClickHandler() {  
            __doPostBack("submitButton", "");  
        }  
    </script>   
    <asp:Label ID="Label1" runat="server" /> 

    Here is the screenshot
  2. Answer
    Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 03 Dec 2008 Link to this post

    Hi Chase,

    The problem happens because the pageLoad function gets executed each time an Ajax update happens. You can solve it by using a global variable, like:

    var isButtonAdded = false;
    function pageLoad() { 
       if (!isButtonAdded)
       {
          isButtonAdded = true;

                var upload = $find("<%= RadUpload1.ClientID %>"); 
                var uploaduploadDiv = upload.get_element(); 
     
                var input = document.createElement("input"); 
                input.type = "submit"; 
                input.className = "ruButton"; 
                input.value = "Upload"; 
                inputinput.id = input.name = upload.getID("submitButton"); 
                input.onclick = onClickHandler; 
     
                //the UL element of the upload 
                var ul = uploadDiv.getElementsByTagName("UL"); 
                //the array of all LI elements of the UL element 
                var LIs = ul[0].getElementsByTagName("LI"); 
                //Last LI item - the button area 
                var lastLi = LIs[LIs.length - 1]; 
                lastLi.appendChild(input); 
       }


    I hope this helps.

    Best regards,
    Erjan Gavalji
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Chase Florell
    Chase Florell avatar
    257 posts
    Member since:
    Apr 2005

    Posted 03 Dec 2008 Link to this post

    I tried that with no luck.  When I use JS like that, then there is no button ever.
  4. Chase Florell
    Chase Florell avatar
    257 posts
    Member since:
    Apr 2005

    Posted 03 Dec 2008 Link to this post

    Thanks for your direction... I got it working, it was probably just a few syntax errors that copied over when I did a copy/paste
        var isButtonAdded = false;  
        function pageLoad() {  
            if (!isButtonAdded) {  
                isButtonAdded = true;  
                var upload = $find("<%= RadUpload1.ClientID %>");  
                var uploadDiv = upload.get_element();  
     
                var input = document.createElement("input");  
                input.type = "submit";  
                input.className = "ruButton";  
                input.value = "Upload";  
                input.id = input.name = upload.getID("submitButton");  
                input.onclick = onClickHandler;  
     
                //the UL element of the upload  
                var ul = uploadDiv.getElementsByTagName("UL");  
                //the array of all LI elements of the UL element  
                var LIs = ul[0].getElementsByTagName("LI");  
                //Last LI item - the button area  
                var lastLi = LIs[LIs.length - 1];  
                lastLi.appendChild(input);  
            }  
        }  
        function onClickHandler() {  
            __doPostBack("submitButton""");  
        } 
  5. Hossam
    Hossam avatar
    6 posts
    Member since:
    May 2008

    Posted 29 Jan 2009 Link to this post

    I ran into the same issue, but setting a gobal js variable didnt solve it, actually the button disapears after the first postback.

     

    all needed to make things work is to check for upload button is null or not. pretty the same solution but with different approach and m just post it here maybe it would save sombodys time one day :)

    function pageLoad() {  
     
        var btn = document.getElementById("UploadButton");  
     
            if (btn==null) {  
     
               var upload = $find("<%= radUplod.ClientID %>");  
                   var uploadDiv = upload.get_element();  
     
                   var input = document.createElement("input");  
                   input.type = "submit";  
                   input.className = "ruButton";  
                   input.value = "Upload";  
                   input.id = input.name = "UploadButton";  //upload.getID("submit");  
                   input.onclick = onClickHandler;  
                   var ul = uploadDiv.getElementsByTagName("UL");  
                   var LIs = ul[0].getElementsByTagName("LI");  
                   var lastLi = LIs[LIs.length - 1];  
                   lastLi.appendChild(input);  
              }  
Back to Top