0

jQuery UI の継承に問題がある CI 2.1.3 を使用しています。ajax gui のソート可能なページのネストを作成しようとしています。

ビュー/管理者/コンポーネント/page_head.php

<!DOCTYPE html>
<html>
<head>
  <title><?php echo $meta_title; ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="<?=site_url(config_item('path_bootstrap').'css/bootstrap.min.css');?>" rel="stylesheet" media="screen">
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  if (!window.jQuery) {
      document.write('<script src="<?php echo site_url(config_item("path_assets")."js/jquery-1.10.1.js"); ?>"><\/script>');
  }
  </script>
  <script src="<?php echo site_url(config_item('path_bootstrap').'js/bootstrap.min.js'); ?>"></script>

  <?php //if((isset($sortable)) AND ($sortable === TRUE)): ?>
  <!-- script src="<?php echo site_url(config_item('path_jqueryui').'minified/jquery-ui.min.js'); ?>"></script -->
  <script src="<?php echo site_url(config_item('path_assets').'js/jquery-ui.js'); ?>"></script>
  <script src="<?php echo site_url(config_item('path_assets').'js/jquery.mjs.nestedSortable.js'); ?>"></script>
  <script type="text/javascript">
  if (window.jQuery.ui) {
    alert('jquery ui found');
  }
  else {
    alert('jquery ui not found');
  }
  /*if (window.jQuery) {
    alert('jquery found');
  }
  if (window.jQuery.ui) {
    alert('jquery ui found');
  }
  if (window.jQuery.ui.sortable) {
    alert('jquery ui sortable found');
  }
  if (window.jQuery.mjs.nestedSortable) {
    alert('jquery nestedSortable found');
  }*/
  </script>
  <?php //endif; ?>

  <script src="<?php echo site_url(config_item('path_assets').'js/tinymce/tinymce.min.js'); ?>"></script>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

ビュー/管理者/order.php

<section>
  <h2>Order pages</h2>
  <p class="alert alert-info">Drag to order pages and then click 'Save'</p>
  <div id="orderResult"></div>
  <input type="button" id="save" value="Save" class="btn btn-primary" />
</section>
<?php dump($sortable); ?>
<script>
$(function() {
  $.post('<?php echo site_url("tutsplus_admin/page/order_ajax"); ?>', {}, function(data)
  {
    $('#orderResult').html(data);
  });

  $('#save').click(function()
  {
    oSortable = $('.sortable').nestedSortable('toArray');

    $('#orderResult').slideUp(function()
    {
      $.post('<?php echo site_url("tutsplus_admin/page/order_ajax"); ?>', { sortable: oSortable }, function(data)
      {
        $('#orderResult').html(data);
        $('#orderResult').slideDown();
      });
    });
  });
});
</script>

order_ajax.php

<?php
//dump($pages);
function get_ol ($array, $child = FALSE)
{
  $str = '';

  if (count($array)) {
    $str .= $child == FALSE ? '<ol class="sortable">' : '<ol>';

    foreach ($array as $item) {
      $str .= '<li id="list_' . $item['id'] .'">';
      $str .= '<div>' . $item['title'] .'</div>';

      // Do we have any children?
      if (isset($item['children']) && count($item['children'])) {
        $str .= get_ol($item['children'], TRUE);
      }

      $str .= '</li>' . PHP_EOL;
    }

    $str .= '</ol>' . PHP_EOL;
  }

  return $str;
}
?>

<?php echo get_ol($pages); ?>


<script type="text/javascript">
$(document).ready(function()
{
  $('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '> div',
    maxLevels: 2
  });
});
</script>

order.php では、jquery、jquery_ui、および msj.nestedSortable が正常にロードされます。order_ajax.php は ajax コンテンツとして読み込まれます。order_ajax.php で jquery ui と msj.nestedSortable スクリプトを再度読み込まないと機能しません。

何かご意見は？

4

1 に答える 1

0

AJAX 経由で読み込まれたページのスクリプト コンテンツが実行されていません。スクリプトを *.js-File に入れ、これをjQuery.getScriptdataType経由でロードするか、AJAX 呼び出しを次のようにscript変更します。

$.ajax({
    ...
    dataType: "script",
    ...
});

http://api.jquery.com/jQuery.ajax/から:

dataType (デフォルト: Intelligent Guess (xml、json、script、または html))
タイプ: 文字列
サーバーから返されるデータのタイプ。何も指定されていない場合、jQuery は応答の MIME タイプに基づいてそれを推測しようとします (XML MIME タイプは XML を生成し、1.4 では JSON は JavaScript オブジェクトを生成し、1.4 ではスクリプトがスクリプトを実行し、その他はすべて文字列として返されます)。

于 2013-06-17T06:51:47.590 に答える