0

I am using CI 2.1.3, having problem with jQuery UI inheritance. Trying to create a ajax gui sortable page nesting.

view/admin/components/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>

view/admin/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>

In order.php jquery, jquery_ui and msj.nestedSortable is succesfully loaded. order_ajax.php is loaded as ajax content. It is not working unless I load jquery ui and msj.nestedSortable script again in order_ajax.php.

Any thoughts?

4

1 回答 1

0

通过 AJAX 加载的页面中的脚本内容没有被执行。将您的脚本放入 *.js-File 并通过jQuery.getScript加载它或将dataType您的 AJAX 调用更改为script：

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

来自http://api.jquery.com/jQuery.ajax/：

dataType（默认值：Intelligent Guess（xml、json、script 或 html））
类型：String
您期望从服务器返回的数据类型。如果没有指定，jQuery 将尝试根据响应的 MIME 类型推断它（XML MIME 类型将产生 XML，在 1.4 中 JSON 将产生一个 JavaScript 对象，在 1.4 中脚本将执行脚本，其他任何内容都将是作为字符串返回）。

于 2013-06-17T06:51:47.590 回答