This is a migrated thread and some comments may be shown as answers.

Multiple buttons created via JavaScript

4 Answers 82 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Chase Florell
Top achievements
Rank 1
Chase Florell asked on 02 Dec 2008, 06:12 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Erjan Gavalji
Telerik team
answered on 03 Dec 2008, 01:07 PM
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.
0
Chase Florell
Top achievements
Rank 1
answered on 03 Dec 2008, 03:21 PM
I tried that with no luck.  When I use JS like that, then there is no button ever.
0
Chase Florell
Top achievements
Rank 1
answered on 03 Dec 2008, 07:23 PM
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""");  
    } 
0
Hossam
Top achievements
Rank 1
answered on 30 Jan 2009, 05:20 AM

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);  
          }  
Tags
Upload (Obsolete)
Asked by
Chase Florell
Top achievements
Rank 1
Answers by
Erjan Gavalji
Telerik team
Chase Florell
Top achievements
Rank 1
Hossam
Top achievements
Rank 1
Share this question
or