James Hood
Top achievements
Rank 1
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
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
0
James Hood
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2012, 12:35 AM
Heres the entire script block...
I am just trying to figure out what ive done wrong
<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>0
James Hood
Top achievements
Rank 1
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
Hi,
Tsvetomir Tsonev
the Telerik team
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.
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!