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

我对我的codeigniter应用程序有一个令人困惑的时间。Codeigniter，jQuery Mobile，jQuery UI - 第一次加载脚本时不加载，只刷新

我有一个视图/表单（视图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工作 - 仅从视图CSS和JS 1 enter image description here

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

我已经在IE，Firefox和Chrome上试过这个，结果都一样。

任何意见表示赞赏。感谢

UPDATE

视图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>

来源

2013-03-27 Smudger

首先，你必须在你的代码的一个大问题。使用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移动+笨问题之后。我不能确认这会起作用，但你应该尝试。显然，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>

来源

2013-03-27 10:10:49 Gajotres

感谢Gajotres ，非常感谢深入的回答和你的知识转移。我将在接下来的几分钟内用我目前的语法更新我的问题。我理解正确吗？我的CSS和JS位于HTML标题中，我给出了最顶级的DIV ID，数据角色和主题。然后我把所有的脚本放在'$（document）.on（'pagebeforeshow'，'#pagebody'，function（）{'但它仍然不起作用，我忽略了这一点。 – Smudger 2013-03-27 11:16:25

还有一件事:)告诉我，你正在使用几个html文件？ – Gajotres 2013-03-27 11:20:55

嗨Gajotres。一点也不。我正在使用codeigniter框架。我的控制器显然是一个调用单一视图的PHP页面。我的观点是一个单独的HTML页面，没有包含或类似的东西。再次感谢您的帮助。 – Smudger 2013-03-27 11:24:19

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

回答

相关问题