I am having a confusing time with my codeigniter app.
I have a view/form(view 1) which when submitted loads another view (view 2). view 1, on initial page load does not load the correct js and css. it instead loads the js and css from view 1. if I then hit refresh on view 2, the correct css and js is loaded.
To prove my point I placed a test js script
<script type='text/javascript'>
alert('test');
</script>
as the first bit of code on both view 1 and view 2. on loading view 1 for the first time, the alert is shown, when I click submit on view 1 and view 2 is loaded the alert is not shown. if I refresh though the alert shows as desired.
So js and css not loading correctly on initial load but on refresh works perfectly.
Any ideas?
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>
Initial Page Load - no alert or js/css working - only css and js from view 1
Refresh Load - no css or js from view 1, only view 2 css and js loaded. note I have removed all styling from view 2 just to test and get working. So below image is what I desire. alert is shown here. this is load after clsing alert.
I have tried this in IE, Firefox and Chrome all with same result.
Any advice is appreciated. thanks
UPDATE
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>
