Question

我的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 enter image description here

刷新加载 - 视图1中没有css或js，只能加载2 css和js。请注意我已经从视图2中删除了所有样式，只是为了测试并开始工作。所以下面的图像是我想要的。这里显示警报。这是克隆警报后的负载。 enter image description here

我在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>

Answer 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>

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

1 个答案: