我对我的 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>