Multiple buttons created via JavaScript

[Chase Florell]

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 <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank" style="color:Red;">JavaScript Enabled Browser</a>.<br />
               Click <a 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

[Erjan Gavalji]

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.

[Chase Florell]

I tried that with no luck.  When I use JS like that, then there is no button ever.

[Chase Florell]

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", "");
    }

[Hossam]

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);
          }
}