Upload + jquery append issue

4 posts, 1 answers
  1. Answer
    James Hood
    James Hood avatar
    27 posts
    Member since:
    Jun 2012

    Posted 11 Dec 2012 Link to this post

    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
  2. James Hood
    James Hood avatar
    27 posts
    Member since:
    Jun 2012

    Posted 11 Dec 2012 Link to this post

    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
  3. James Hood
    James Hood avatar
    27 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2012 Link to this post

        $(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
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 13 Dec 2012 Link to this post

    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!
Back to Top