codeigniter, jQuery Mobile, jQuery UI - 脚本在第一次加载时不加载，只刷新答案

【问题标题】：codeigniter, jQuery Mobile, jQuery UI - scripts not loading on first load, only refreshcodeigniter, jQuery Mobile, jQuery UI - 脚本在第一次加载时不加载，只刷新
【发布时间】：2013-03-27 08:02:07
【问题描述】：

我的 codeigniter 应用程序让我感到困惑。

我有一个视图/表单（视图 1），它在提交时会加载另一个视图（视图 2）。查看 1，在初始页面加载时没有加载正确的 js 和 css。而是从视图 1 加载 js 和 css。如果我在视图 2 上点击刷新，则加载正确的 css 和 js。

为了证明我的观点，我放置了一个测试 js 脚本

<script type='text/javascript'>
alert('test');
</script>

作为视图 1 和视图 2 上的第一位代码。在第一次加载视图 1 时，会显示警报，当我单击视图 1 上的提交并加载视图 2 时，不会显示警报。如果我根据需要刷新警报。

所以 js 和 css 在初始加载时无法正确加载，但在刷新时可以完美运行。

有什么想法吗？

查看 1

<script type='text/javascript'>
alert('test');
</script>
<html>
   <head>
      <title>
         Capture New Order
      </title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

   </head>
<body>
   <div  data-role="page"  data-theme="a">
      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/pointer'">Menu</a>
            <h3>New Order Details</h3>
         </div>
      </div>   
   <div data-role="content">
   <form id="sales_order_details" action="/sales/new_blank_order_lines" method="post">
         <label for="customer">Select Customer</label>
      <div id="autocomplete_dropdown">
         <input type="text" id="customer" name="customer" />
      </div>

   <label for="period">Desired Order Period</label>
   <select id="period" name="period"> 
      <option value="0"></option>
        <?php
          for($i = 0; $i <= 365; $i ++){
            $startdate = strtotime("today + $i day");
            $enddate = strtotime("today + " . ($i + 6) . " day");
            if(date('D', $startdate) == 'Mon'){
                echo '<option value="' . date('Y-m-d', $startdate) . '">' .date('d M y', $startdate) . " to " . date('d M y', $enddate) . "</option>";
            }
          } 
        ?> 
   </select>

<label>Choose an order type below and provide requested details</label>

  <div data-role="collapsible-set">
      <div data-role="collapsible">
          <h3>
              Auto Spread Order
          </h3>
          <label for="asuom">Unit of Measure for Order</label>
            <select id="asuom" name="asuom"> 
              <option value="0"></option>
              <option value="Bundles">Bundles</option>
              <option value="Cubes">Cubes</option>
              <option value="Pieces">Pieces</option>
            </select>
          <label>Number of Cubes to Autospread</label>
          <input type="text" name="ascubes" id="ascubes">
          <label>Products over which to spread</label>
          must work on this...
          <input type="submit" name="previous_order" id="previous_order" value="Continue">
      </div>
      <div data-role="collapsible">
          <h3>
              Previous Order
          </h3>
          <label>Select Order to use as template</label>
          <input type="submit" name="previous_order" id="previous_order" value="Continue">

      </div>
      <div data-role="collapsible">
          <h3>
              Blank Order
          </h3>
          <label for="buom">Unit of Measure for Order</label>
            <select id="buom" name="buom"> 
              <option value="0"></option>
              <option value="cubes">Bundles</option>
              <option value="cubes">Cubes</option>
              <option value="pcs">Pieces</option>
            </select>
          <input type="submit" name="blank_order" id="blank_order" value="Continue">

      </div>
  </div>


   </form>
   </div>

</body>
</html>

<!-- script for page start-->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
      <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
      $(function(){
        $("#customer").autocomplete({
          source: "get_customers",
          messages: {
          noResults: '',
          results: function() {}
      }


        });
      });
</script>

查看 2

<script type='text/javascript'>
alert('test');
</script>
<?php 
$newperiod = date('Y-m-d',strtotime($period) + (24*3600*6)); 
?>
<html>
   <head>
      <title>
         Capture blank Order
      </title>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
 function callAutocomplete(element) 
 { 
 $(element).autocomplete( 
 { 
 source: "get_sku_codes", 
 messages: 
 { 
 noResults: '', 
 results: function() {} 
 }, 
 select: function( event, ui ) 
 { 
 var selectedObj = ui.item; 
 $.post('sales/get_sku_prices', {data:selectedObj.value},function(result) { 
 $(ui).parent('tr').find('input[id^="pricepercube"]').val(result); 
 }); 
 } 
 }); 
 } 

 $(function() 
 { 
 var counter = 1; 
 jQuery("table.authors-list").on('change','input[name^="qty"]',function(event) 
 { 
 event.preventDefault(); 
 counter++; 
 var newRow = jQuery('<tr>'+ 
 ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' + 
 ' <td><input type="text" id="product' + counter + '" name="product' + counter + '"  /></td>' + 
 ' <td><input type="text" id="qty' + counter + '" name="qty' + counter + '"  /></td>'+ 
 ' <td><input type="text" id="price' + counter + '" name="price' + counter + '" /></td>'+ 
 ' <td><input type="text" id="discount' + counter + '" name="discount' + counter + '"  /></td>'+ 
 ' <td valign=top><input type="checkbox" id="treated' + counter + '" name="treated' + counter + '" /></td>'+ 
 ' </tr>'); 
 jQuery('table.authors-list').append(newRow); 
 callAutocomplete("#product"+ counter); 
 }); 

 $("#product").autocomplete( 
 { 
 source: "get_sku_codes", 
 messages: 
 { 
 noResults: '', 
 results: function() {} 
 }, 
 select: function( event, ui ) 
 { 
 var selectedObj = ui.item; 
 $.post('<?=site_url("sales/get_sku_price")?>', {data:value},function(result)

 { 
 $("#price").val(result); 
 }); 
 } 
 }); 

 }); 

 </script>


  </head>
<body >

      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/pointer'">Menu</a>
            <h3>New Blank Order</h3>
         </div>
      </div>   
      <div data-role="content">
         <center>
            <table width=80%><tr><td>
            <input type="text" name="customer" id="customer" value="<?php echo $customer; ?>" disabled>
               </td><td>
            <input type="text" name="period" id="period" value="<?php echo $period." to ".$newperiod; ?>" disabled>
               </td><td>
            <input type="text" name="buom" id="buom" value="<?php echo $buom; ?>" disabled>
               </td></tr></table>
      </center>
      </div>

<table class="authors-list" border=0>
  <tr><td></td><td>Product</td><td>Qty</td><td>Price/Cube</td><td>Discount</td><td>treated</td></tr>
  <tr>
   <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>
   <td><input type="text" id="product" name="product" /></td>
   <td><input type="text" id="qty" name="qty" /></td>
   <td><input type="text" id="price" name="price" /></td>
   <td><input type="text" id="discount" name="discount" /></td>
   <td valign="top" ><input type="checkbox" id="treated" name="treated" /></td>
</tr>
</table>

</body>
</html>

初始页面加载 - 没有警报或 js/css 工作 - 只有来自视图 1 的 css 和 js

刷新加载 - 没有来自视图 1 的 css 或 js，仅加载了视图 2 的 css 和 js。请注意，我已经从视图 2 中删除了所有样式，只是为了测试和开始工作。所以下面的图片是我想要的。此处显示警报。这是关闭警报后的负载。

我在 IE、Firefox 和 Chrome 中都试过这个，结果都是一样的。

感谢任何建议。谢谢

更新

查看 1：

<html>
   <head>
      <title>
         Capture New Order
      </title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
      <!-- script for page start-->
           <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
           <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
            <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
      <script type="text/javascript">
      $(document).on('pageshow', '#pagebody', function(){   
            $(function(){
              $("#customer").autocomplete({
                source: "get_customers",
                messages: {
                noResults: '',
                results: function() {}
            }


              });
            });
          });
      </script>
      <!-- script for page end-->
   </head>
<body>
   <div  data-role="page"  data-theme="a">
      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/pointer'">Menu</a>
            <h3>New Order Details</h3>
         </div>
      </div>   
   <div data-role="content">
   <form id="sales_order_details" action="/sales/new_blank_order_lines" method="post">
         <label for="customer">Select Customer</label>
      <div id="autocomplete_dropdown">
         <input type="text" id="customer" name="customer" />
      </div>

   <label for="period">Desired Order Period</label>
   <select id="period" name="period"> 
      <option value="0"></option>
        <?php
          for($i = 0; $i <= 365; $i ++){
            $startdate = strtotime("today + $i day");
            $enddate = strtotime("today + " . ($i + 6) . " day");
            if(date('D', $startdate) == 'Mon'){
                echo '<option value="' . date('Y-m-d', $startdate) . '">' .date('d M y', $startdate) . " to " . date('d M y', $enddate) . "</option>";
            }
          } 
        ?> 
   </select>

<label>Choose an order type below and provide requested details</label>
<div  data-role="page"  data-theme="a" id="pagebody">
  <div data-role="collapsible-set">
      <div data-role="collapsible">
          <h3>
              Auto Spread Order
          </h3>
          <label for="asuom">Unit of Measure for Order</label>
            <select id="asuom" name="asuom"> 
              <option value="0"></option>
              <option value="Bundles">Bundles</option>
              <option value="Cubes">Cubes</option>
              <option value="Pieces">Pieces</option>
            </select>
          <label>Number of Cubes to Autospread</label>
          <input type="text" name="ascubes" id="ascubes">
          <label>Products over which to spread</label>
          must work on this...
          <input type="submit" name="previous_order" id="previous_order" value="Continue">
      </div>
      <div data-role="collapsible">
          <h3>
              Previous Order
          </h3>
          <label>Select Order to use as template</label>
          <input type="submit" name="previous_order" id="previous_order" value="Continue">

      </div>
      <div data-role="collapsible">
          <h3>
              Blank Order
          </h3>
          <label for="buom">Unit of Measure for Order</label>
            <select id="buom" name="buom"> 
              <option value="0"></option>
              <option value="cubes">Bundles</option>
              <option value="cubes">Cubes</option>
              <option value="pcs">Pieces</option>
            </select>
          <input type="submit" name="blank_order" id="blank_order" value="Continue">

      </div>
  </div>


   </form>
   </div>

</body>
</html>

查看 2：

<?php 
$newperiod = date('Y-m-d',strtotime($period) + (24*3600*6)); 
?>
<html>
   <head>
      <title>
         Capture blank Order
      </title>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
$(document).on('pageshow', '#pagebody', function(){   

 function callAutocomplete(element) 
 { 
 $(element).autocomplete( 
 { 
 source: "get_sku_codes", 
 messages: 
 { 
 noResults: '', 
 results: function() {} 
 }, 
select: function( event, ui ) 
 { 
 var selectedObj = ui.item; 
 $.post('get_sku_prices', {data:selectedObj.value},function(result) 
 { 
 $(element).parent().parent().find('input[id^="price"]').val(result); 
 }); 
 } 
 }); 
 }

 $(function() 
 { 
 var counter = 1; 
 jQuery("table.authors-list").on('change','input[name^="qty"]',function(event) 
 { 
 event.preventDefault(); 
 counter++; 
 var newRow = jQuery('<tr>'+ 
 ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' + 
 ' <td><input type="text" id="product' + counter + '" name="product' + counter + '"  /></td>' + 
 ' <td><input type="text" id="price' + counter + '" name="price' + counter + '" /></td>'+ 
 ' <td><input type="text" id="qty' + counter + '" name="qty' + counter + '"  class="linetotal" /></td>'+ 
 ' <td><input type="text" id="total' + counter + '" name="total' + counter + '"  /></td>'+ 
 ' <td><input type="text" id="discount' + counter + '" name="discount' + counter + '"  /></td>'+ 
 ' <td valign=top><input type="checkbox" id="treated' + counter + '" name="treated' + counter + '" /></td>'+ 
 ' </tr>'); 
 jQuery('table.authors-list').append(newRow); 
 callAutocomplete("#product"+ counter); 
 }); 


 $("#product").autocomplete( 
 { 
 source: "get_sku_codes", 
 messages: 
 { 
 noResults: '', 
 results: function() {} 
 }, 
 select: function( event, ui ) 
 { 
  var selectedObj = ui.item; 
 $.post('get_sku_prices', {data:selectedObj.value},function(result) { 
 $("#product").parent().parent().find('input[id^="price"]').val(result[0]);
 }); 
 } 
 });

//code to calculate line cost (price*qty)
var total=Number($('input[id^="price"]').val()) + Number($('input[id^="qty"]').val());
$('input[id^="total"]').val(total);

//code to calculate Grand Total of all line costs (sum of all line totals)


 }); 

});
 </script>


  </head>
<body >
  <div  data-role="page"  data-theme="a" id="pagebody">

      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/pointer'">Menu</a>
            <h3>New Blank Order</h3>
         </div>
      </div>   
      <div data-role="content">
         <center>
            <table width=80%><tr><td>
            <input type="text" name="customer" id="customer" value="<?php echo $customer; ?>" disabled>
               </td><td>
            <input type="text" name="period" id="period" value="<?php echo $period." to ".$newperiod; ?>" disabled>
               </td><td>
            <input type="text" name="buom" id="buom" value="<?php echo $buom; ?>" disabled>
               </td></tr></table>
      </center>
      </div>

<table class="authors-list" border=0>
  <tr><td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>Line Total</td><td>Discount</td><td>treated</td></tr>
  <tr>
   <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>
   <td><input type="text" id="product" name="product" /></td>
   <td><input type="text" id="price" name="price" /></td>
   <td><input type="text" id="qty" name="qty" onchange="fill()" /></td>
   <td><input type="text" id="total" name="total" class="linetotal" /></td>
   <td><input type="text" id="discount" name="discount" /></td>
   <td valign="top" ><input type="checkbox" id="treated" name="treated" /></td>
</tr>
</table>
</div>
</body>

【问题讨论】：

标签： jquery css codeigniter jquery-mobile view

【解决方案1】：

首先，您的代码中有一个大问题。使用 jQuery Mobile 时，初始化 javascript/jquery 代码的唯一正确方法是 jQuery Mobile 页面事件。如果您使用 document ready 或 $(function(){ 来初始化您的代码，那么它很有可能会失败，因为：

有时像这样使用的 javascript 会在页面加载到 DOM 之前触发。这就是它在刷新后工作的原因，内容已经在 DOM 中。
即使页面被加载到 DOM 中，jQuery Mobile 仍然需要使用自己的样式和标记来增强它们。

为防止这种情况，强烈建议使用 jQuery Mobile 页面事件。这是一个有效的 jsFiddle 示例：http://jsfiddle.net/Gajotres/tuJEm/

$(document).on('pageshow', '#index', function(){       
    alert('Page loaded');
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('Page loaded');
});

要使其适用于您的情况，您需要为页面容器提供一个 id：

<div  data-role="page"  data-theme="a">

如果你想更好地理解这一点，看看这个ARTICLE，或者找到它HERE。

还有一件事，由于 jQM 页面事件，您不再需要在 HTML 文件的末尾加载脚本。无论如何，在 jQM 的情况下，您的 jQm js 和 css 应该始终在您的 html 标头中。

编辑：

在调查了一个 jQuery Mobile + Codeigniter 问题之后。我无法确认这是否有效，但您应该尝试一下。显然 codeigniter 在 jQuery Mobile 如何通过 AJAX 处理页面加载方面存在问题。所以基本的建议是关闭它。

您需要做的第一件事是将所有脚本和样式标签移到 HEAD 中。每个 PHP 文件都应该有相同的一组 jQuery、jQuery Mobile js 文件加载到头部。这样做是因为我们将阻止页面加载到 DOM 中，并且每个页面都将作为一个实体。

第二件事，轮到ajax页面加载：

<script>
    $(document).bind("mobileinit", function() {
        $.mobile.ajaxEnabled = false;
    });
</script> <!-- Note your script before jqm -->

还有一点，mobilinit 事件必须在 jQuery 之后但在 jQuery Mobile 之前初始化，像这样：

<script src="jquery.js"></script>
<script>
    $(document).bind("mobileinit", function() {
        $.mobile.ajaxEnabled = false;
    });
</script> <!-- Note your script before jqm -->
<script src="jquery-mobile.js"></script>

【讨论】：

感谢 Gajotres，非常感谢深入的回答和您的知识转移。在接下来的几分钟内，我将使用我当前的语法更新我的问题。我对你的理解正确吗？我的 CSS 和 JS 在 HTML 标题中，我给最上面的 DIV 一个 id、数据角色和主题。然后我把我所有的脚本放在$(document).on('pagebeforeshow', '#pagebody', function(){ 中，但它仍然不起作用。我是否错过了重点。指导表示赞赏。谢谢 Gajotres...
还有一件事 :) 告诉我，你使用了几个 html 文件？
嗨 Gajotres。一点也不。我正在使用 codeigniter 框架。我的控制器显然是一个调用单个视图的 php 页面。我的视图是一个没有包含或类似内容的单个 html 页面。再次感谢您的帮助。
不管你怎么称呼它，你的视图仍然是一个有HEAD和BODY的页面，对吗？
如果您有多个 html 文件（或在您的情况下查看），jQuery Mobile 会将所有内容加载到 DOM 中。这意味着，只会加载第一个文件（视图）的 HEAD。在其他加载的文件（视图）中，HEAD 将被丢弃。您应该将脚本标签从 VIEW 2 移动到 VIEW 1 中，或者在这种情况下将其放在 BODY 中（忽略我在回答中告诉您的内容）。