blueimp jquery上傳部件被附加視圖部分覆蓋

我有插件完美使用codeigniter 2.1。我現在試圖使用插件作爲由多個視圖組成的動態生成頁面的一部分。blueimp jquery上傳部件被附加視圖部分覆蓋

要做到這一點我控制器包含以下內容：

$this->load->view('blue_view_widget'); // the file upload view 
$this->load->view('form'); // a form

我現在看到模板上傳和模板下載表（由JavaScript生成）由形式查看HTML覆蓋。我想（也許不正確），第二個視圖中的html在javascript有時間動態生成視圖底部的表之前被回顯出來。我怎樣才能解決這個問題？

這是我的代碼：

</script> 
<!-- The template to display files available for download --> 
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
<!-- <tr class="template-download fade">--> 
    <tr class="template-download "> 
     {% if (file.error) { %} 
      <td></td> 
      <td class="name"><span>{%=file.name%}</span></td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td> 
     {% } else { %} 
      <td class="preview">{% if (file.thumbnail_url) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> 
      {% } %}</td> 
      <td class="name"> 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> 
      </td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td colspan="2"></td> 
     {% } %} 
     <td class="delete"> 
      <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"> 
       <i class="icon-trash icon-white"></i> 
       <span>{%=locale.fileupload.destroy%}</span> 
      </button> 
      <input type="checkbox" name="delete" value="1"> 
     </td> 
    </tr> 
{% } %} 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> 
<script src="blueimp/js/vendor/jquery.ui.widget.js"></script> 
<!-- The Templates plugin is included to render the upload/download listings --> 
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script> 
<!-- The Load Image plugin is included for the preview images and image resizing functionality --> 
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> 
<!-- The Canvas to Blob plugin is included for image resizing functionality --> 
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script> 
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo --> 
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script> 
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script> 
<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
<script src="blueimp/js/jquery.iframe-transport.js"></script> 
<!-- The basic File Upload plugin --> 
<script src="blueimp/js/jquery.fileupload.js"></script> 
<!-- The File Upload file processing plugin --> 
<script src="blueimp/js/jquery.fileupload-fp.js"></script> 
<!-- The File Upload user interface plugin --> 
<script src="blueimp/js/jquery.fileupload-ui.js"></script> 
<!-- The localization script --> 
<script src="blueimp/js/locale.js"></script> 
<!-- The main application script --> 
<script src="blueimp/js/main.js"></script> 
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ --> 
<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]--> 


THE SECOND VIEW ('FORM') BEGINS HERE. 


<div class="container"> 
     <base href="http://localhost/bootstrap1/"> 
<!-- <div class="row">--> 
<fieldset> 

      <legend>Registration</legend>  


    <div class="span10" class="well"> 

     <form class="well" id="registerHere" method='post' action='index.php/site/process_form'> 
//   



<div class="form_row" > 

    <div class="control-group"> 
      <label class="control-label" for="textarea">Textarea</label> 
      <div class="controls"> 
       <textarea class="span8" class="input-xlarge" id="description" name="description" rel="popover" data-content="Re-enter your description." data-original-title="description" rows="3"></textarea> 
      </div> 
      </div> 
</div>  


<div class="form_row" >

來源

2012-07-31 K C

我沒想到的 '鏈接腐' 的。在任何情況下，以下是這個問題的答案：

我使用bootstrap工具包，並試圖使自包含視圖內引導容器標籤。我有它設置的方法是：

頭

視圖答：HTML放在這裏CSS和JS

觀點B：HTML放在這裏CSS和JS

頁腳

時我連接了2個視圖，我有一個重複的jquery腳本，導致在我的情況下在螢火蟲中出現以下錯誤：

$(」#fileupload」).fileupload is not a function 
[Break On This Error] 

$(’#fileupload’).fileupload();

由於目前我的JS技能很差，我仍然不明白它的意思，但是一旦我將第二個腳本註釋掉了，整個頁面就開始按預期工作。

來源

2012-08-11 13:35:38

blueimp jquery上傳部件被附加視圖部分覆蓋

回答

相關問題