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

Upload + jquery append issue

3 Answers 179 Views
Upload
This is a migrated thread and some comments may be shown as answers.
James Hood
Top achievements
Rank 1
James Hood asked on 11 Dec 2012, 11:30 PM
I am having an issue at work right now (in fact it's not just this control) I think that I am doing something wrong, as no one else seems to have this issue..

basically put I am using a jquery click event from an HTML button, then what happens in that area is code gets append (with .append()) but any code in that area I cannot seem to actually access via the kendo upload initializer thing

$('#upload_content').click(function () { $('#sideRight').append('<div class="fileupload" style="position:absolute;left:5%; top:35%;"><input id="file_upload" name="file_upload" type="file"></div>'


so would I actually initialize a proper upload control with that input field. I don't get any errors in Firefox, but any time I dynamically append any content (say on successful return of an ajax request) with the append function I cannot use any kendo controls (uploadify actually)

i know the code does work if I add an input control in just plain HTML in the body (without appending it with jquery) it works fine.

what am I DNA wrong? It's not like I am trying to use multiple upload controls, I will actually be using at least 3 on the page however, appended to 3 different click events, so in theory there will be multiple ones on the page..lol any help would be greatly appreciated

3 Answers, 1 is accepted

Sort by
0
James Hood
Top achievements
Rank 1
answered on 12 Dec 2012, 12:35 AM
Heres the entire script block...

<script type="text/javascript">
 
 
 
    $(document).ready(function () {
     $('#AdminMenu').load("AdminMenu.html");
      
            $(function () {
                $('#file_upload').kendoUpload({
                    complete: function () {
                        $(".k-upload-files.k-reset").remove();
                        alert("File Uploaded");
                    },
                    localization: {
                        "select": "Browse..."
                    },
                    async: {
                        saveUrl: "/PHP/Focus-Upload.php",
                        removeUrl: "/PHP/Focus-Remove.php",
                        autoUpload: true
                    }
 
 
            });
        });
          
 
 
                     var splitter = $("#vertical").kendoSplitter({
                        orientation: "horizontal",
                        panes: [{
                        size: "40%",
                        scrollable: true,
 
 
                        }, {
                        size: "60%",
                        scrollable: true,
 
                        }]
                        });
                         
                                 $('.files').click(function () {
                                    $('#sideRight').empty();
                                     var file = $(this).attr('path');
                                    $('#sideRight').prepend('<div class="options_title" style="width:50%; position:relative; left:25%; text-align:center;">You are viewing: <BR><span style="font-style:italic;">'+file+'</span></div>');
                                    $('#sideRight').append('<div style="position:absolute;left:5%; top:15%;"><button id="delete_file">Delete Item</button> <button id="get_link">Get Link</button></div> ');
                                     
                                        $('#get_link').click(function () {
                                        alert('http://'+locationID+'.leeschools.net/'+file);
                                             
                                            });
                                             
                                        $('#delete_file').click(function () {
 
                                            $.ajax({
                                                    type: "POST",
                                                    contentType: "application/json; charset=utf-8",
                                                    url: "../PHP/DeleteUserContent.php?file="+file,
                                                    datatype: "json",
                                                    success: function () {
                                                        location.reload();
                                                       },
                                                     error: function () {
                                                        alert("fail");
                                                       }
                                             
                                             
                                                });
                                            });
                                      
                                     });
                                      
                                      
                                    $('.folders').click(function () {
                                    $('#sideRight').empty();
                                     var file = $(this).attr('path');
                                    $('#sideRight').prepend('<div class="options_title" style="width:50%; position:relative; left:25%; text-align:center;">You are viewing: <BR><span style="font-style:italic;">'+file+'</span></div>');
                                    $('#sideRight').append('<div style="position:absolute;left:5%; top:15%;"> <button id="delete_folder">Delete Folder</button> <button id="create_folder">Create Folder</button>  <button id="upload_content">Upload Content</button></div>');
                                      
                                      
                                                $('#delete_folder').click(function () {
 
                                            $.ajax({
                                                    type: "POST",
                                                    contentType: "application/json; charset=utf-8",
                                                    url: "../PHP/DeleteUserContent.php?file="+file,
                                                    datatype: "json",
                                                    success: function () {
 
                                                        location.reload();
                                                       },
                                                     error: function () {
                                                        alert("fail");
                                                       }
                                             
                                             
                                                });
                                            });    
                                             
                                             
                                    $('#create_folder').click(function () {
                                    $('#sideRight').append('<div style="position:absolute;left:5%; top:25%;">Folder Name: <input type="text" class="k-textbox" id="FileToMake"> <button id="create_me">Create</button></div>');
 
 
                                        $('#create_me').click(function () {
                                                                var F2M = $('#FileToMake').val();
                                                                 
                                                                var path = file+"/"+F2M;
                     
                                                                $.ajax({
                                                                        type: "POST",
                                                                        contentType: "application/json; charset=utf-8",
                                                                        url: "../PHP/CreateUserContent.php?file="+path,
                                                                        datatype: "json",
                                                                        success: function () {
 
                                                                            location.reload();
                                                                           },
                                                                         error: function () {
                                                                            alert("fail");
                                                                           }
                                                                 
                                                                 
                                                                    });
                                                                });
                     
                                                            });                    
 
                                     });
                                      
                                      
                                $('.root_element').click(function () {
                                    $('#sideRight').empty();
                                     var file = $(this).attr('path');
                                    $('#sideRight').prepend('<div class="options_title" style="width:50%;position:relative; left:25%; text-align:center;">You are viewing: <BR><span style="font-style:italic;">'+file+'</span></div>');
                                    $('#sideRight').append('<div style="position:absolute;left:5%; top:15%;"><button id="create_folder">Create Folder</button> <button id="upload_content">Upload Content</button></div>');
                                      
                                      
                                    $('#create_folder').click(function () {
                                    $('#sideRight').append('<div style="position:absolute;left:5%; top:25%;">Folder Name: <input type="text" class="k-textbox" id="FileToMake"> <button id="create_me">Create</button></div>');
 
 
                                        $('#create_me').click(function () {
                                                                var F2M = $('#FileToMake').val();
                                                                 
                                                                var path = file+"/"+F2M;
                     
                                                                $.ajax({
                                                                        type: "POST",
                                                                        contentType: "application/json; charset=utf-8",
                                                                        url: "../PHP/CreateUserContent.php?file="+path,
                                                                        datatype: "json",
                                                                        success: function () {
                                                                            alert("success");
                                                                            location.reload();
                                                                           },
                                                                         error: function () {
                                                                            alert("fail");
                                                                           }
                                                                 
                                                                 
                                                                    });
                                                                });
                     
                                                            });
                                                             
                                                        $('#upload_content').click(function () {
                                                             
                                                        $('#sideRight').append('<div class="fileupload" style="position:absolute;left:5%; top:35%;"><input id="file_upload" name="file_upload" type="file"></div>');
                                                                                });                                        
                                                             
                                            });
                                             
                 
 
                                     
                                      
                 
          
 
    });
</script>
I am just trying to figure out what ive done wrong
0
James Hood
Top achievements
Rank 1
answered on 12 Dec 2012, 12:40 PM
    $(function () {
        $('#file_upload').kendoUpload({
            complete: function () {
                $(".k-upload-files.k-reset").remove();
                alert("File Uploaded");
            },
            localization: {
                "select": "Browse..."
            },
            async: {
                saveUrl: "/PHP/Focus-Upload.php",
                removeUrl: "/PHP/Focus-Remove.php",
                autoUpload: true
            }
 
 
    });
});

that is the uploader call. I am using this inside of a splitter, also using a tree view on the page for another element.

I dont understand why I have never been able to initialize any kendo ui controls through appending content with jquery.. obviously im doing something wrong
0
T. Tsonev
Telerik team
answered on 13 Dec 2012, 10:00 AM
Hi,

I'm copying the reply to your support ticket for community reference.

The problem is most definitely a timing issue, as you're attempting to initialize the Upload before its added to the page. A quick way to debug this is to check if the element is in the DOM:

alert($('#file_upload').length);

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Upload
Asked by
James Hood
Top achievements
Rank 1
Answers by
James Hood
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or