个人中心
gpt4 book ai didi

jquery - codeigniter、jQuery Mobile、jQuery UI - 脚本未在首次加载时加载，仅刷新

转载 作者：太空宇宙 更新时间：2023-11-04 15:08:16 24 4
gpt4 key购买 nike

我对我的 codeigniter 应用感到困惑。

我有一个 View /表单( View 1)，它在提交时加载另一个 View ( View 2)。 View 1，在初始页面加载时未加载正确的 js 和 css。它改为从 View 1 加载 js 和 css。如果我随后在 View 2 上点击刷新，则会加载正确的 css 和 js。

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

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

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

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

有什么想法吗？

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

View 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 工作 - 只有来自 View 1 的 css 和 js enter image description here

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

我在 IE、Firefox 和 Chrome 中都试过了，结果都一样。

欢迎任何建议。谢谢

更新

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

View 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 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 header 中。

编辑:

在调查 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>

关于jquery - codeigniter、jQuery Mobile、jQuery UI - 脚本未在首次加载时加载，仅刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15654140/

24 4 0
文章推荐： java - 在 OSGI 4.2 包中使用 JAX-WS 时出现 NoClassDefFoundError
文章推荐： c++ - 模板类的创 build 成了主要瓶颈
文章推荐： java - 莫里斯图表从外部 JSON 中破坏
文章推荐： java - 我将 getHostAddress() 与 try-catch 一起使用，但是当我运行它时，它只是不运行 这有什么问题吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com