0

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からすべてのスタイリングを削除したことに注意してください。下の画像は私が望むものです。アラートはここに表示されます。これはclsingアラート後のロードです。 ここに画像の説明を入力してください

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>

4

1 に答える 1

1

まず第一に、コードに大きな問題があります。jQuery Mobileを使用する場合、javascript / jqueryコードを初期化する適切な方法は、jQueryMobileページイベントのみです。document readyまたはを使用$(function(){してコードを初期化すると、次の理由で失敗する可能性が高くなります。

  • そのように使用されるJavaScriptは、ページがDOMに読み込まれる前にトリガーされる場合があります。これが、更新後に機能する理由です。コンテンツはすでにDOMにあります。
  • ページがDOMに読み込まれる場合でも、jQueryMobileは独自のスタイルとマークアップでページを拡張する必要があります。

これを防ぐために、jQueryMobileページイベントを使用することを強くお勧めします。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">

これをよりよく理解したい場合は、この記事を参照するか、ここで見つけてください。

もう1つ、jQMページイベントがあるため、HTMLファイルの最後にスクリプトをロードする必要がなくなりました。いずれにせよ、jQMの場合、jQmjsとcssは常にhtmlヘッダーに含まれている必要があります。

編集 ：

問題のあるjQueryMobile+Codeigniterを調べた後。これが機能するかどうかは確認できませんが、試してみてください。どうやらcodeigniterはjQueryMobileがAJAXを介してページの読み込みを処理する方法に問題があるようです。したがって、基本的なアドバイスはそれをオフにすることです。

最初に行う必要があるのは、すべてのスクリプトタグとスタイルタグをHEADに移動することです。各PHPファイルには、同じセットのjQuery、jQueryMobilejsファイルがヘッドにロードされている必要があります。これは、ページがDOMに読み込まれないようにし、すべてのページが単一のエンティティとして機能するためです。

次に、ajaxページの読み込みをオンにします。

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

もう1つ、mobilinitイベントはjQueryの後、jQueryMobileの前に次のように初期化する必要があります。

<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>
于 2013-03-27T10:10:49.653 に答える