Ошибка кода Jignery UI при вложенных представлениях (ошибка TypeError: «undefined» не является функцией)

Question

Я использую виджет запроса загрузки файла BlueImp (https://github.com/blueimp/jQuery-File-Upload) в проекте Codeigniter. Когда я загружаю только мультиизображение, все работает отлично, но когда я загружаю представление, вложенное в мое базовое представление (включает заголовок, main_content) и нижний колонтитул) Я получаю ошибку javascript (TypeError: 'undefined' не является функцией (вычисляется '$ (' # fileupload '). fileupload ()')).

Что может быть причиной этого? Код ниже

multi-image.php (просмотр)

<div class="container">
    <div id="fileupload">
        <?php
        $hidden = array('wedding_id' => $wedding->id);
        echo form_open_multipart("http://localhost:8888/wedSpark/multi_image/index/$wedding->id",'', $hidden);?>
            <div class="fileupload-buttonbar">
                <label class="fileinput-button">
                    <span>Add files...</span>
                    <input type="file" name="files" multiple>
                </label>
                <button type="submit" class="start">Start upload</button>
                <button type="reset" class="cancel">Cancel upload</button>
            </div>
        </form>
        <div class="fileupload-content">
            <div class="fileupload-progressbar"></div>
            <table class="files"></table>
        </div>
    </div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
            <td class="error" colspan="2">Error:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
            <td></td>
            <td class="name">${name}</td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Error:
                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
                {{else error === 3}}File was only partially uploaded
                {{else error === 4}}No File was uploaded
                {{else error === 5}}Missing a temporary folder
                {{else error === 6}}Failed to write file to disk
                {{else error === 7}}File upload stopped by extension
                {{else error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                {{else error === 'emptyResult'}}Empty file upload result
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="preview">
                {{if thumbnail_url}}
                    <a href="${view_url}" target="_blank"><img src="${thumbnail_url}"></a>
                {{/if}}
            </td>
            <!--<td class="name">
                <a href="${view_url}"{{if thumbnail_url}} target="_blank" {{/if}}>${name}</a>
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>-->
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
        </td>
    </tr>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="<?php echo base_url()?>plugins/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="<?php echo base_url()?>plugins/jQuery-File-Upload/jquery.fileupload.js"></script>
<script src="<?php echo base_url()?>plugins/jQuery-File-Upload/jquery.fileupload-ui.js"></script>
<script src="<?php echo base_url()?>plugins/jQuery-File-Upload/multi-image.js"></script>

Функция контроллера

function upload_multi_image($wedding_id=0)
{
    if (empty($wedding_id)) {
        $this->session->set_flashdata('status', 'No Wedding Specified');
        redirect('gallery');
    }

    $w = new Wedding();
    $w->get_by_id($wedding_id);
    $data['wedding'] = $w;
    $data['pageTitle'] = $w->name;
    $data['main_container_view'] = $this->load->view("wed/multi-image", $data, true); 
    $this->load->view('templates/template', $data);
}

Просмотр шаблона

<?php
    $this->load->view("templates/header", $pageTitle); 
    echo $main_container_view; 
    $this->load->view("templates/footer"); 
?>

Заголовок

<?php 
    $CI =& get_instance();
?>
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title><?php echo $pageTitle;?></title>
        <meta charset="UTF-8">

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
              <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.0.min.css">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
        <link rel='stylesheet' href="<?php echo base_url();?>css/styles.css">
        <link href='http://fonts.googleapis.com/css?family=Dancing+Script:700|Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>
    </head>
    <body>      
        <div class="topbar-wrapper" style="z-index: 5;">
            <div class="topbar">
                <div>
                    <h1><a href="<?php echo site_url();?>">wedSpark*</a></h1>
                    <ul class="nav secondary-nav">
                        <?php echo form_open('gallery/search'); ?>
                            <input type="text" name="query" placeholder="Search" />
                            <?php echo form_submit('search', 'Search', "id='searchSubmit'"); ?>
                        <?php echo form_close(); ?>
                    <?php if ($u = $CI->login_manager->get_user()) : ?>
                        <li><a href="<?php echo base_url();?>wed/">My Weddings</a></li>
                        <li><a href="<?php echo base_url();?>account/inspiration_wall">Inspiration Wall</a></li>
                        <li><a href="<?php echo base_url();?>about/">About</a></li>
                        <li class="menu">
                            <a href="#" class="menu"><?php echo $u->username?></a>
                            <ul class="menu-dropdown">
                                <li><a href="<?php echo base_url().'account/profile/'.$u->id;?>">Profile</a></li>
                                <li><a href="<?php echo base_url().'account/settings/'.$u->id;?>">Settings</a></li>
                                <li class="divider"></li>
                                <li><a href="<?php echo base_url();?>account/logout/">Logout</a></li>
                            </ul>
                        </li>

                        <?php else: ?>
                        <li><a href="<?php echo base_url();?>about/">About</a></li>
                        <li><a href="<?php echo base_url();?>account/">Login</a></li>
                        <?php endif;?>
                    </ul>
                </div><!-- /fill -->
            </div><!-- /topbar -->
        </div>  
        <div class="notifyBar"></div>

Вид нижнего колонтитула

<?php 
    $CI =& get_instance();
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="<?php echo base_url();?>js/prettify.js"></script>
<script src="<?php echo base_url();?>js/dropdown.js"></script>
<script src="<?php echo base_url();?>js/jquery.notifyBar.js"></script>
<?php
    if($CI->session->flashdata('success')) {
        $status = $CI->session->flashdata('success');
        echo "<script>$(function () {
          $.notifyBar({
            html: '{$status}',
            delay: 750,
            animationSpeed: 'normal',
            cls: 'success'
          });  
        });
        </script>";
    }
?>

<?php
    if($CI->session->flashdata('error')) {
        $status = $CI->session->flashdata('error');
        echo "<script>$(function () {
          $.notifyBar({
            html: '{$status}',
            delay: 1500,
            animationSpeed: 'normal',
            cls: 'error'
          });  
        });
        </script>";
    }
?>
    </body>
</html>

Answer 1

Согласно этот пример , кажется, что пропущен application.js в вашем представлении (multi-image.php)

<script src="application.js"></script>